3.9.7 Linking Thumbnail Images to Larger Images
You may want to include small images on your page that, when clicked on, open up a larger version of the same image. While certain Bistro modules allow you to do this automatically, you can quite easily create this effect on any editable page on your site. Please keep the following notes in mind as you work with uploading image files.
Note 1: To minimize load on your website, compress your images for use on the internet.
Note 2: for information about acceptable image file formats, review Section 3.9.6.1 Acceptable File Formats (PDF, DOC, SWF, etc.)
Note 3: please make sure there are no spaces in your filenames when uploading images (eg: Test Product Thumbnail.jpg must be renamed as TestProductThumbnail.jpg with the spaces removed).
Note 4: Larger files will take longer to upload and there is a maximum file upload size of 10 MB.
For information on how to upload larger files using FTP, review section 3.9.6.2 Uploading Large Files Using FTP
When creating this effect, we recommend using two distinct image files since significantly resizing images on the web can create loss of image clarity.
- Create your two image files and save them on your computer.
- Make sure you can distinguish by the filename which one is the thumbnail image and which is the large image.
Now you want to add the thumbnail image to one of your website pages, and link it so that clicking on the thumbnail image opens a larger image.
The fastest way to accomplish that is as follows:
- Log in to Bistro and open the page where you want the thumbnail image displayed for editing. (If you need more information about accessing Bistro or editing pages, review section 3.2. How to Login and section 3.9. Editing Existing Pages).
- In the editing area, click where you want your thumbnail image to be placed and add the image to your page as you would add any image. (for more information about adding images to a page, review section 3.9.1.3. Adding and Editing Images)
- Once you have added your thumbnail image, highlight the image to select it and click on the button that looks like two chain links on the toolbar
- This will open the Insert/edit link dialogue box.
- Click on the small browse icon
to the right of the Link URL: text field - This will open the file manager (also known as the asset manager). Here you can view and organize all files, images and documents that already reside on your site. You can also upload new ones.
- Now you will upload your second (larger image) and select it as the file to be linked to.
- To do so, click [Upload] at the top of the main file manager dialogue box (above) and the smaller Upload dialogue box will open.
- Here you can type in the name of your larger image file (if you know the entire file path) or you can browse your computer to find it by clicking [Browse]
- Once you have entered or located your file, click [Upload].
- When your file has finished uploading, close the upload file dialogue box by clicking on the small x in the top right corner
- Select your larger image file from the list of files by clicking the checkbox to the left of its name
- Click the Insert link on the bottom left of the file manager dialogue box (below the preview box).
- You have now successfully uploaded and inserted a link to your larger image file.
- You will be returned to the Insert/Edit link dialogue box where you can continue to format your link.
The most important thing you will want to do before you finish is select how you want your file or document to open.
You do this by selecting one of the options from the Target: drop down list.
The default setting is "Open in this Window", but many people prefer to have the larger image open in a new window - so make sure you select the option you prefer.
For more information about link formatting options, please review Section 3.9.1.2. Adding and Removing Links
Once you have selected the way you want your larger image to open and made any other formatting changes, click [Update] to return to your page.
Remember to save your changes by clicking [Save] when you are ready to exit the page editor.