Customizing appearance of images and thumbnails in search results

Q. How do I associate an icon with all images for my search results?

To associate an icon with all images, open the Zoom Indexer Configuration window, and select the "Scan Options" tab. Double click on the file extension you wish to configure (e.g. ".jpg") and click on the "Configure images" button that appears.

On the "Image and thumbnail configuration" window, check "Display same icon for all images:" from the "Image indexing options: Image options" and enter the icon's URL.

This is what your search results will look like if you use "Display same icon for all images"
(with to represent images and to represent Word documents):

As you can see, 2 different images displayed the same thumbnail in the seacrh results.

Q. How do I associate a thumbnail with an image for my search results?

To associate a thumbnail with an image, open the Configuration window, and select the "Scan Options" tab. Double click on the file extension you wish to configure (e.g. ".jpg") and click on the "Configure images" button that appears.

On the "Image and thumbnail configuration" window, check "Display different thumbnails for each image" and edit the "Thumbnail options" based on your web site's organization. You can associate a thumbnail with an image by using relative path or absolute path as well as specifying the naming convention of the thumbnail images that you want to associate with the linked image..

This is what your search results will look like of you choose "Display different thumbnails for each image" and have created thumbnails for them:

As you can see, 2 different images displayed its own thumbnails in the seacrh results.

Q. How do I associate a thumbnail with a particular page?

You can associate a thumbnail or image with a particular page. This image will then be displayed alongside the link when this page appears in the search results.

To do this, you will need to insert a meta tag like the following on your chosen web page:

This will associate the image "redshoes.jpg" in the images folder with the page that this tag is inserted in.

This option can be particularly useful for websites where you may have an individual page per product, and you would like a picture of the product to appear along their corresponding pages (or any other website where you may want a single image representing a page).

Note: The path to the image files can be relative or absolute (ie. full http:// URLs). If you are using a relative path, note that the path would be relative to the page that the meta tag was found on. Zoom will automatically resolve this relative path and determine the full absolute path for your image.

Q. Should I specify absolute or relative path for my thumbnails?

For example, if you web site is organized such that its thumbnails are always in a directory called "thumb" relative to where the image files are, then you should use relative path "thumb". If your thumbnail images all start with a "th_", you should check "Look for thumbnails with the same filename but with "th_" before the name.

If you web site is organized such that its thumbnails are always in a directory called "thumb" at the root of the site, then you should use absolute path "/thumb". Bear in mind that if you use absolute path and have 2 different images of the same name, both of them will display the same thumbnail.

You can see your thumbnail settings at the preview window:

Q. How do I display icons and thumbnails for my search results?

Go to "Zoom Indexer Configuration: Search results layout" and check "Image".

A preview of your layout option is displayed at the bottom of the window:

Q. How do I set thumbnail image size or alignment via CSS?

You can set the size or alignment of the thumbnails to be displayed on the search results by changing the CSS (Cascading Style Sheets) classes defined at the top of the search template file ("search_template.html" or "search.html" for the Javascript version) using a text editor such as Notepad or your favourite HTML editor (such as Dreamweaver).

Set thumbnail sizes to fixed width of 100 pixels (and keeping the aspect ratio):

Set thumbnail sizes to fixed size of 100x100 pixels (aspect ratio might be changed):

Set thumbnail alignment to the left:

Refer to "How do I customize the appearance of my search page with CSS?" to find out more on how you can customize the search results layout via CSS.

Q. How do I resize an image to make a thumbnail?

It is recommended that you use third-party software to generate thumbnails for your images as Windows does not provide a productive tool to do that (you can use Paint and painfully resize image by image!). Try seacrhing for "thumbnail generator" in Google or CNET Download for a list of thumbnail generators. For demonstration purposes, I have used Extreme Thumbnail Generator 1.7 by Extreme Internet Software.

A few recommended practices:
1. Keep all thumbnails the same width. This will result in a neater search layout. Common thumbnail sizes vary from 64 x 64 to 100 x 80.
2. Depending on the application you use to generate your thumbnails, the resize methods emplyed by each application will most probably differ. Use the best quality resize method (it is usually the slowest).

3. Specify the JPEG quality of your thumbnail in the range of 85-90%. If you compress too much, the quality will be compromised. If you keep the quality too high, the thumbnail file sizes might be too big. It is common for thumbnails to be around 4-5 KB.

Return to the Zoom Search Engine Support page