Need a simple way to add a thumbnail picture effect to a web page? With a recently made Storyboard Application improvement, it is now a snap to add hyperlinked thumbnail pictures to your StoryBoard Web site.
First a few basics:
What is a thumbnail picture you ask? Well, it's simply a small (viewing size and byte file size) representation of a much larger picture. Why should you know about using thumbnails? Web pages have to 'download' and big pictures translate to long download times. Since we all know that web site visitors are impatient, a slow downloading page is sure to discourage visitors from hanging around on your web site. The solution is to show a small representation of the large picture and allow those interested to be able to click on the small picture and get the original large picture. That way folks interested in seeing the detailed large picture can have it and those not interested don't have to wait around for the picture to load..... the best of both worlds!
Convinced? Here's how to do it in your StoryBoard Web Site:
- 1) Make sure you have uploaded any of your pictures you will be wanting to make thumbnails of. You best can do this via the Gallery Manager. ONCE your pictures are uploaded, then we are ready to begin.
- 2) In the Preview mode click on the left Menu page you want to work on.
- 3) Once that selected page is showing, click on the right margin 'Body Section'. This will take you to the WYSIWYG body edit page.
- 4) Right click on the WYSIWYG window. The resultant pop up menu has an item at the bottom that says:
- 'Make a Thumbnail Picture'
- 5) Left click on this 'Make a Thumbnail Picture' and another window will pop up. On this pop up, select a picture from the drop down box (STEP 1). This will be the picture we will be making a thumbnail of.
- 6) Select the desired width of the thumbnail from the drop down box for width selection. The default is 100 pixels (STEP 2).
- 7) Click on the "Show Selected Picture" button (STEP #3).
- 8) The ORIGINAL big picture will show. At the BOTTOM of this picture click on the link saying:
- 'Click here to make a xyz pixel width thumbnail of the above picture' (STEP 4)
- 9) Presto!! You have just made a HYPERLINKED thumbnail. Follow the directions on the pop up window to Copy and Paste into your WYSIWYG window.
- 10) In your WYSIWYG edit page, don't forget to 'Insert Body Data' and then you will be back in the Preview Mode (or Live View). You can then click on the small thumbnail and it will bring up your original big picture. All thumbnail pictures will have '_thumb' appended to the original picture file name. If your want a thumbnail to be a different size, simply right click on the WYSIWYG edit page window and repeat items 4,5,6,7,& 8 and make a new thumbnail. Subsequently made thumbnails of the same big picture will simply overwrite existing named thumbnails.