If you want to skip the editor and add your custom image in your Chaturbate or Camgasm Bio, the simplest method is this.

Please follow the steps accordingly and you will do just fine without learning HTML

Adding the image

1. you will need to host your image online, to upload your image online
2. next step it to get the image full url path. Basically the URL of the hosted image which should be the direct one and it ends with image extension and nothing else. Like this:

http://hosted.com/myimage.jpg
Do you notice the image extension at the very end? it is not php or html so make sure that is the right one.

3. Go to your Bio page… and click on Edit Your Bio

– now you have access to your settings page where some options are available.

Your image is going to be added inside My Bio box (optional you can use the Wish Lists box)

The HTML code which needs to be added is pretty simple.

<img src="http://hosted.com/myimage.jpg" />
where <img tag informs the browser that the element is an image and should be displayed as image. The trailing slash from the very end of the code but just before the closing tag is optional.

4. After adding the code, save and take a look.

Some troubleshooting:

A. The image seams like a broken icon (broken image placeholder) when editing is saved.

– make sure that you added the full direct path of the image

– check to see if the url of the image is between double quotes

– make sure you added the closing tag image tag starts with <img and it ends with closing tag >

– test the direct url path of the image in new tab. If you paste the url in address bar you should see ONLY the image, nothing else

– use the right image tags accepted by the platform and do not use BB codes like the ones below… It will not work.

[IMG] http://hosted.com/myimage.jpg [/IMG] or [img= http://hosted.com/myimage.jpg%5D http://hosted.com/myimage.jpg%5D g”/> [/img]

B. After saving is done, image is not displayed.

– if you used gif images (animated image) you should probably disable any adblocker extension in your browser. Disable, F5 (refresh the page).

Positioning the image

You can add some inline css in order to position the image. This is the css which makes the magic move

<img src="http://hosted.com/myimage.jpg" style="margin-left:2opx;"/>
In the above example I’ve added the style with margin attribute. The image will be displayed away from the left margin with 20px.

Position the image troubleshooting:

A. The image is in the same place.

– try adding the display as block attribute and position set to relative. The code should look like this:

<img src="http://hosted.com/myimage.jpg" style="display:block; margin-left:20px; position:relative;"/>

Resize the image

CSS is a cool markup to play with if you know the basics so yes, you can resize the image’s width and height using one of this two options.
First code is not using inline css and it looks like this:

<img src="http://hosted.com/myimage.jpg" width="400" height="200"/>
The above code is instructing the browser how to display the image. Assuming that your image was smaller let’s say 300px width /100px height

The second option and I always use this one; is by adding the width and height attributes to the inline css. The code will look like this:

<img src="http://hosted.com/myimage.jpg" style="width:400px; height:200px;"/>

Make the image semi responsive

Now we are talking experience mode. Nice.

In some cases you need your image to be bigger and to cover the width (or height) of an element.

First, make sure that your image is not smaller than 700px in width. If the image is way smaller (let’s say 40px width) resizing it will decrees the quality of your image and it will look ugly, lots of blurred pixels.

To make the image semi responsive we will use the % values instead of px values. The code looks like this:

<img src="http://hosted.com/myimage.jpg" style="width:100%;height:auto;"/>

The above code instructs the browser to display the image at full width of the containing element and height will be automatically set.

For demo purpose I will add a more complex code and explain it after.

<img src="http://hosted.com/myimage.jpg" style="display: block; width: 90%; height: auto; margin: 20px auto; border: 3px solid #000000; position: relative;"/>
display:block – by default image elements have block attributes
width: 90% – the image will be displayed only 90% in full width (it is not cutting or cropping the image, it makes it smaller or bigger)
height: auto – based on the image width the height will be resized accordingly
margin: 20px auto – moves the image element away from all margins with 20px and centers the image element inside the wrapper element
border: 3px solid #000000 – adds a 3px solid black border to the image

Well that’s it. If you have suggestions or questions, post them below!