Your Big Cartel account does not include tools for uploading and inserting general (non-product) images for pages, however you can easily upload images to a separate location to use in your Big Cartel pages.

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 Big Cartel page content?

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.

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?) 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://i39.tinypic.com/aemt5j.jpg" alt="Boy on Bike" />

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://i39.tinypic.com/aemt5j.jpg" alt="Boy on Bike" width="800" height="601" />

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
• border – adds border and background to your image

So, using our example, if we wanted our image to be aligned to the left and add a border, our code would be:

<img class="alignleft border" src="http://i39.tinypic.com/aemt5j.jpg" alt="Boy on Bike" width="800" height="601" />

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://i39.tinypic.com/aemt5j.jpg" alt="Boy on Bike" width="800" height="601" />

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="LINKURL">LINKTEXT</a>

Where LINKURL = the destination URL for the link, e.g. http://aarcadethemes.com/, and LINKTEXT 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://aarcadethemes.com/"><img src="http://i39.tinypic.com/aemt5j.jpg" alt="Boy on Bike" width="800" height="601" /></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://aarcadethemes.com/" target="_blank"><img src="http://i39.tinypic.com/aemt5j.jpg" alt="Boy on Bike" width="800" height="601" /></a>

Note that blank begins with an underscore, i.e. _blank.