Creating Custom Thumbnails

If you’re not satisfied with the quality of thumbnails or you want something a little different you can create custom thumbnails for your site. Here’s how:

Use your ftp access to log onto the server.

Go inside the httpdocs folder where you will see a folder called gallery. Inside that are your thumbnail folders.

thumbnail-folders1

Each folder contains a set of images that have been re-sized by the server. Here’s what they’re for:

  • Original – The original images you uploaded to the site
  • Large – iPad images
  • Medium – iPhone/Android images
  • Small – Large thumbnails on the site
  • Square – Medium thumbnails on the site (not square).
  • Thumb – Small thumbnails on the site.

Here are the steps to create custom thumbs:

1. Download the original folder to your desktop

2. Batch resize all the images inside the original folder (batch resize instructions here). Make sure you don’t change the names and that you set the quality as high as you need it (i.e. use a high quality setting on save for web).

3. Use these sizing guidelines for the different thumbs

size width height
small 100px 75px
med 215px 133px
large 300px 200px

4. Once you are finished replace the images in the appropriate folder on the server (overwrite or delete the images).

5. Clear your browser cache to see the new thumbnails.

If you want to create thumbs for the iphone and android (medium folder on the server) here are some guidelines:

device width height
iPhone 4 960px 640px (horizontal orientation)
iPhone 3 480px 320px (horizontal orientation)
Nexus One 800px 480px (horizontal orientation)
Droid X 854px 480px (horizontal orientation)
HTC / Incredible 800px 480px (horizontal orientation)
The ipad (large folder on the server) has a screen resolution of 1024 x 768.

If you need additional help submit a support ticket.