The Info Pages functionality supports HTML, and with this you can add images - whether it be a sizing chart, a logo of an organisation you belong to, or simply a product photo. The process is simple, requiring just a few short steps.
A few notes you need to be aware of before you begin:
- We detail the steps for the popular Image Host 'Imgur.com' here, but other solutions are exist
- The images you upload with this process will be publicly available on Imgur.com
With that out of the way, let's jump right in:
1) Upload your photo to an image host
There are other image hosts such as Dropbox that we would recommend if you have an account - but Imgur is a quick and free solution to getting an image within your Info page. Navigate to the website at: http://imgur.com and on the right hand side you'll see the following:
Click the 'Computer' icon and you'll then be presented with the usual browser file selection prompt. Navigate and select the file you want to upload. You'll then be presented with the following screen.
Simply click the 'Start Upload' button to upload your file, then hop on to step 2!
2) Copy the Embed link to the image
After the upload process completes, you'll see a list of various generated codes on the right hand side. In this case, it's the 'direct link' you'll want, which will then form a part of the HTML Image tag that we're going to build. Click on the 'page' icon next to the link, as point in the screenshot below to copy the link to your clipboard.
3) Paste your link into your Info Page
Finally, the direct link (which is simply a URL to the now uploaded image), will need to be placed within an upload image tag. An Image tag looks like this: <img src="LINK_TO_IMAGE" />. All you need to do is replace the text 'LINK_TO_IMAGE' with the actual link you just copied, and this can then be pasted into the Info Page. Wherever you paste the Image tag will be where it shows up in the Info Page.
To clarify, based on the example image above, what you paste into your Info Page would be:
<img src="http://i.imgur.com/4yeu7ccl.png" />.
Save your Info Page, click to view it, and you should see your image!
If you don't, double check your HTML code looks something like the example above - and if you're still having troubles, feel free to email us.
Final Tips!
Alt attributes for SEO
We recommend you add an 'alt' attribute to your HTML tag, with a keyword or two to explain what the image is showing. This is useful to those who are unable to load the image, but also for SEO purposes, so search engines like Google know what the image represents (given that it can only read text). Here is an example of the above HTML Image tag modified to include a description alt tag: <img src="http://i.imgur.com/4yeu7ccl.png" alt="An Imgur Screenshot" />.
Positioning your Image to flow with text
Adding an image with the HTML example provided in this article will have the image sit on it's own line - with any other content you have appearing above or below it. Should you have a small image that you would like the text to wrap around - you'll need to float the image either left or right. To do so, simply modify the HTML Image tag you have to include a 'style' attribute, with a 'float' set to either 'left' or 'right' and a 'margin' so that that there is a little bit of space between the image and the surrounding content. An example is this:
<img src="http://i.imgur.com/4yeu7ccl.png" style="float: right; margin: 5px" />.
You can find more information on floating an image here:
http://webdesign.about.com/od/beginningcss/ht/htcssfloatright.htm