How do I insert an image into my page?
If you have a Single Page Web Site: Your site includes in-built tools for uploading both a header image and a background image. These instructions are provided for additional images and files that you wish to insert into your page’s content.
If you have a Full Web Site: Your site has complete upload and media library controls built in; while the Image Editing Tool and Important Preparation sections of this article remain relevant to you, the remainder of these instructions are not applicable.
Image Editing Tool
In most cases you will need to edit your images before uploading them to your web space. To do this you will need an image editing tool such as Preview or iPhoto for Apple, Paint for Windows, a professional level editing tool such as PhotoShop.
If you do not have any image editing software you can use an online image editor such as picnik.
Before uploading and using images on your web space it is important to first ensure that they are optimised for internet use by reviewing the following items and using your image editing tool to correct the images as required.
- Ensure your image size is appropriate for upload. We strongly recommend your images be no more than 1000px wide by 1000px high unless you have a special use for the image, i.e. it is to be displayed in a size that is larger than most people’s web browser window.
- Ensure your image type is appropriate for upload. Your image must be in the file format .png, .jpg, .jpeg or .gif.
Upload Your Image
Before inserting an image into your web page, you will need to upload it to a publicly accessible location on the internet. If you do not already have such a location, refer to support article How do I upload images or files for my web page?
You should now have a public URL for your image file, e.g. http://aarfiefiles.com/aarfie.png, that displays your image if entered into your web browser’s address field.
Inserting Your Image
To insert your image, you will need to write a HTML image tag into your content editor (i.e. your single page Body Text field or your Big Cartel page editor) incorporating your image’s public URL as follows:
<img src="X" alt="Y" />
Where X = the public URL and Y equals a brief title for your image using only letters, numbers and spaces (i.e. no symbols or special characters). Using our example, the image tag would become:
<img src="http://aarfiefiles.com/aarfie.png" alt="Aarfie" />
If you know your image dimensions (and you should if you pre-formatted it correctly) it is best practice (although not required) to add your image and width pixel values to the tag as follows:
<img src="http://aarfiefiles.com/aarfie.png" alt="Aarfie" width="386" height="188" />
Styling Your Image
If you are working with an Aarfie created Big Cartel theme or Single Web Page, you have a number of classes available to control the styling of your image, including:
- alignnone: adds default padding and styling without adding alignment
- alignleft: adds default padding and styling and aligns image to the left
- alignright: adds default padding and styling and aligns image to the right
- aligncenter: adds default padding and styling and aligns image to the center
- bordernone: removes any border or background added to your image by default
So, using our example, if we wanted our image to be aligned to the left and also ensure that it had no borders or background our code would be:
<img class="alignleft bordernone" src="http://aarfiefiles.com/aarfie.png" alt="Aarfie" width="386" height="188" />
You can also use basic inline styles to manually format your image (refer to w3schools for more information). For example, if you wanted your image to have a margin of 10px below it and 20 pixels to the right of it, our code would become:
<img style="margin-bottom: 10px; margin-right: 20px;" src="http://aarfiefiles.com/aarfie.png" alt="Aarfie" width="386" height="188" />
Adding a Link to Your Image
You may wish to add a link to your image, so that your visitor can be directed to a new location when they click it. To achieve this you need to wrap your image tag in a link tag. A simple link tag appears as follows:
<a href="Z">Click here to visit Z</a>
Where Z = the destination URL for the link, e.g. http://aarfiesx.com/, and “Click here to visit Z” could be any text you want to convert to link text. Note that the link tag must be closed with </a>.
In our case we want to replace the link text with our image, so our complete code now becomes:
<a href="http://aarfiesx.com/"><img src="http://aarfiefiles.com/aarfie.png" alt="Aarfie" width="386" height="188" /></a>
If you want your image link to open the destination URL in a new window, you can set the link tag’s target attribute to blank as follows:
<a href="http://aarfiesx.com/" target="_blank"><img src="http://aarfiefiles.com/aarfie.png" alt="Aarfie" width="386" height="188" /></a>
Note that blank begins with an underscore, i.e. _blank.
Last Modified: 28th June, 2011