Aarfie custom web development and maintenance services are discontinued – read more

Looking for our new Big Cartel themes – visit Aarcade

 
 

AARFIE SUPPORT

How do I insert an image into my Big Cartel shop page?

If you purchased or upgraded your Big Cartel theme after 29th November 2011, please refer to Aarcade Support instead of the following article.

close message

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.

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.

Important Preparation

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.

  1. 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.
  2. 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, 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" />

Removing Default Image Styling

Some themes may add styling to your image by default (e.g. an image border). You can remove this on a per image basis using the bordernone class detailed in the previous section of this article.

To remove this styling globally, copy all of the code from the box below and paste it into your custom style code area (refer to support article Where do I add custom style coding in my Big Cartel theme controls?)

/* - - - - - - - - - - - - - - - - Reset Custom Page Image Style */
body.custom #page_main img {
	padding: 0;
	border: 0 none;
	background: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-moz-border-radius: 0px;
	-khtml-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	}

Click the Save button when you have finished editing your theme CSS code.

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: 6th June, 2011

Other ‘Big Cartel’ Articles...

Big Cartel support articles generally relate to Aarfie-developed Big Cartel themes purchased from the shop or created for a custom project.