Components

ThumbnailPro - Thumbnail Image Menus

ThumbnailPro is a component which allows you to use images for the links in the menus in your Joomla site instead of text. This means that you can create pages where site visitors can see small pictures (thumbnails) which they can click on to go to other pages.

A good example of a Thumbnail menu is on the Melbourne Bakehouse website: http://www.melbournebakehouse.com.au/index.php?option=com_content&task=view&id=77&Itemid=10

On that page, the images on the left are actually a menu leading to lots of different pages - each page having one larger picture of the cake on it.

These are a very simple instructions on how to use ThumbnailPro, more information on how to use it can be found in the admin area of your site by going to 'Mambots>Site Mambots' page and clicking on the 'thumbnailspro' link.

Creating a new Thumbnail menu

To create an entirely new Thumnail menu like that:

  1. Create one of the pages that you want to link together (eg each one having a large picture of the cake). Leave space for the thumbnail menu where you want it.
  2. Copy that page and create all of the pages that you want to link together
  3. Put the images that you want to use as the thumbnails - and use identical dimensions - in a Media Manager folder to use in the links - What is Media Manager?
  5. Create a new links in the new menu to each of the pages (More information on creating a link in a menu)
  6. Set images to menu links
  7. Display the Thumbnail image menu on each page

Setting images to menu links

  1. Log in to your website
  2. From the 'Components' menu, click on 'ThumbnailPro>Menu Icons'. This will take you to a page which lists all the menus have been created in your site.
  3. Click the name of the menu you wish to use images for links.
  4. The page you are taken to lists all the links in that menu and displays three drop-down lists beside each:
    'MouseOut Icon' - What the icon is when the mouse is not on top of the thumbnail image (The normal state)
    'MouseOver Icon' - The image displayed when a user has their mouse over the thumbnail image.
    'MouseDown Icon' - The image displaed when a user has their mouse on the thumbnail and they are clicking on it.
  5. Set all the images you wish to use for each links in the menu and their three states, 'MouseOut', MouseOver' and 'MouseDown'.
  6. Click 'Save' button in the top right of the window to save your settings and be taken back to previous page listing all the menus in your site.

Displaying the image menu

Note: this will only work after it has been created, either by Butterfly Internet or you (more information on creating a new Thumbnail Pro menu)

In order to insert the image menu on to a page:

  1. Create the page that you want to insert the image menu onto
  2. Put your mouse cursor where you want the image menu to display
  3. Enter the code that for your thumbnail menu, for example {thumbnailspro yourmenu,60,48,6,5,yes,#FF0000,#00FF00} Help on editing the image menu code
  4. Press save
  5. Look at the page to ensure that it looks correct

Editing the image menu code

An example of the code that is used to display an image menu is as follows:

{thumbnailspro yourmenu,60,48,6,5,no,#FF0000,#00FF00}

This code tells your web server to display the image menu nominated and specifies the height and width of the thumbnail images, the number of images in a row and other items as below:

This is a breakdown of the example code {thumbnailspro yourmenu,60,48,6,5,no,#FF0000,#00FF00}

 

{thumbnailspro and } These tags are needed in order for the code to work and display your image menu.
yourmenu The name of the menu you wish to have displayed on your page exactly as you named the menu - uppercase and lowercase must be correct.
60 The height of the images used for the links in the menu.
48 The width of the images used for the links in the menu.
6 The image links are displayed in a table, so this value is the number of images to display in a row.
5 Cellspacing between the cells in the table: the number of pixels of space between images.
no Displaying the text for the link as well as the image. This value can either be 'yes' to show the link text, or 'no' to hide it.
#FF0000 This value is the colour of the border around the image link. To have no border, set this value to 0.
#00FF00 This is the colour of the border when a user has their mouse over an image link. To have no border set this value to 0.

 

Adding a new page into a Thumbnail menu

  1. Create the new page that you want to link to first (you may be able to copy an exisitng page More information on working with pages)
  2. Upload the thumbnail file into the media manager folder with the other images (More information on working with Media Manager)
  3. Insert the new menu link (to the new page) into the correct menu
  4. Set the appropriate image to the menu link

Changing a picture in a Thumbnail menu

  1. Upload the thumbnail file into the media manager folder with the other images (More information on working with Media Manager)
  2. Change the image the appropriate menu link in the correct menu
    • Components > Thumbnail Pro > Menu Icons
    • You will see a list of all of the menus in your site
    • Click on the menu which contains the link you want to change the image for
    • You can choose the appropriate image that you want to use for each of the different states:
      'MouseOut Icon' - What the icon is when the mouse is not on top of the thumbnail image (The normal state)
      'MouseOver Icon' - The image displayed when a user has their mouse over the thumbnail image.
      'MouseDown Icon' - The image displaed when a user has their mouse on the thumbnail and they are clicking on it.
  3. Press save when you are finished