Your theme's imagery refers the default graphics associated with every page of your site, for example the banner image.  These do not include images associated with a specific event, venue, or product, which are uploaded at the time you create those items.


Prerequisites:

  • Have FireFox installed.
  • Install the Web Developer "add-on" : http://chrispederick.com/work/web-developer/ (This will require you to restart your browser.)
  • Must have tools to crop and slice images to appropriate sizes.  Adobe Photoshop works well for this.


Step 1:

View your site and think about what you want to change visually on your site:

Open your site in FireFox


Step 2:

Find the significant information about the image/s you wish to change:
Have the web-developer toolbar visible
Select: Images > View Image Information

  • A new page will appear, displaying all images on your page, including information about the images like width and height in pixels and file type and size.
  • Find the images you would like to change and take note of the relevant information regarding that image.  For example, perhaps you would like to change the sites header image, on this list you may find something like, a .jpg image, width 900px, height 200px, 60KB.

 

Step 3:

Create a replacement image of the same width and height, file type, and of a similar file size:

There are three important factors to consider about your replacement image.

  • First, it must be of the same width and height as the original image or else it will not look good on the page.  If the space requires an image 900px x 200px and the image that replaces it is 400px x 600px, the browser will stretch and manipulate the 400x600 to fit into the 900x200 space, causing distortion.  Any standard photo editing program that has a crop tool should allow you to crop your image to the size needed.  To learn more about cropping in Photoshop, see this tutorial.
  • Secondly, it is important that your image be of a similar file size to the original.  Large images take a longer time to load onto the page, which means that end users will have a hard time navigating the pages.  Therefore it is important to keep the file size as small as possible, while still maintaining the visual quality of the image.  Typically, web images are set at 72px/inch.  The original file size is a good benchmark to follow; try not to go too far over, or you will see that the pages load slowly.
  • Last but not least, when saving the image, be sure the save it as the same file type as the original.  This will be either a .gif or .jpg image type.  You can see the file type of the original also on the list of images made in step 2.

Once you have your images cropped properly and of a good file size, you are ready to put them onto your site.

Step 4:

Upload the new image to the site:

  1. Login to the admin pages of your site
  2. Go to Store Information > Themes & Images > Manage Images
  3. this will bring up the File/Image Manager.   Note: Your site's current theme folder should be pre-selected as the root folder. In order to upload new images and make changes, you'll need to make a clone of the theme by clicking the "Clone Theme" link
  4. Go to the folder which has all the images; for example if your theme is "CityTours" your site's images will appear in:  \App_Themes\CityTours\images\  Note: It is wise at this point to backup the existing images into a safe folder, that way you can revert back to them or reference them if you need to find out what size the originals were.
  5. Find in the list the name of the image you would like to replace.
  6. Make sure that your new image and the image in the list have the exact same name and file extension (i.e. .jpg, .gif)
  7. Click on the Upload button at the top; this will bring up an Upload box.
  8. Browse for the image you would like to upload.
  9. Select the "Overwrite if files exist?" box
  10. Click upload to overwrite the image/s
  11. You can see the changes immediately by refreshing your home page.  Note: We recommend replacing the banner image first, then going back to your site to see how it looks. Then replace 1 image at a time. This way it's easier to detect any problems immediately (i.e. if uploaded wrong image or if image is cropped incorrectly). If you upload all the images at once it's very hard to tell which one could be causing a problem.