Upload Your Image
Before inserting an image into your page, you will need to upload it to a publicly accessible location on the internet. If you have not already done so, refer to support article How do I upload images or files for my Big Cartel page content?
You should now have a public URL for your image file that displays your image if entered into your web browser’s address field. For example:
http://i.imgur.com/ZZGxQiN.jpg - is correct
<img src="http://i.imgur.com/ZZGxQiN.jpg" alt=""> - is incorrect
Remember that, as well as supporting the methods detailed in this article, your Aarcade theme provides shortcodes to help you easily display your images in your page content. Refer to:
Using your image in your Big Cartel admin area
If you are creating page content in Visual mode (the default page edit mode), you can insert your image by clicking the insert image icon in your edit toolbar and entering your image’s public URL.
If you are working in HTML edit mode — for more control and flexibility you can enter into HTML edit mode - refer How do I switch to HTML edit mode? — or in your product description area you can insert your image by applying the following instructions.
Inserting your image in HTML edit mode
To insert your image, you will need to write a HTML image tag into 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://i.imgur.com/ZZGxQiN.jpg" alt="Boy on Bike">
Styling Your Image
If you are working with an Aarcade created Big Cartel theme, you have a number of classes available to control the styling of your image, including:
- 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
So, using our example, if we wanted our image to be aligned to the left, our code would be:
<img class="alignleft" src="http://i.imgur.com/ZZGxQiN.jpg" alt="Boy on Bike">
You can also use basic inline styles to manually format your image (refer to CSS tutorial 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://i.imgur.com/ZZGxQiN.jpg" alt="Boy on Bike">
Sizing Your Image
You can also use inline styles (see previous section of this article) to control the width of your image. Your width value should be less than the natural width of the image to ensure a higher quality image appearance.
For example, forcing images to display at half their natural size is an easy method to create crisp images on retina (high pixel density) device screens. Our example image - http://i.imgur.com/ZZGxQiN.jpg - is 800 pixels wide, so halving this size we get a display width of 400px. To apply this width, we add an inline style as follows:
<img style="width: 400px;" src="http://i.imgur.com/ZZGxQiN.jpg" alt="Boy on Bike">
Never add a
max-width style value. This value is set to
100% by your Aarcade theme to ensure that all images will downsize when needed on smaller screens.
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:
Where LINKURL = the destination URL for the link — e.g.
http://www.aarcade.net/ — and LINKTEXT could be any text you want to convert to link text. Note that the link tag must be closed with
In our case we want to replace the link text with our image, so our complete code now becomes:
<a href="http://www.aarcade.net/"><img src="http://i.imgur.com/ZZGxQiN.jpg" alt="Boy on Bike"></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://www.aarcade.net/" target="_blank"><img src="http://i.imgur.com/ZZGxQiN.jpg" alt="Boy on Bike"></a>
Note that blank begins with an underscore, i.e.