Thumbnail - XSitePro Website Design

Home Previous  Next


Brought to you by XSitePro Website Design Software

professional website design made easy      




The Thumbnail Widget allows you to insert a thumbnail version of an image. You can specify the size of the thumbnail and XSitePro will resize the image for you. You can also give the image a link to an XSitePro page or an external Web page.





Selecting this script from the list of scripts (how), and clicking the button_widget_wizard_edit_settings button loads the following screen:





In this screen we need to set the following things:



1. Image


Image - This is the image that you would like to use to create your thumbnail from. To set this image, browse to your image file by clicking the button_application_image_browse button and then by selecting your image file (by double-clicking it) from the file explorer window.


Alt text - This is the text that is associated with the image, and is a useful way to search engine optimize your image when it's on your site. Therefore, alt text can be anything that best describes the image, using '-' to replace any spaces. For example, if you had an image of The London Eye you wanted to use, the best alt text would be 'london-eye' or 'the-london-eye'.


Width and Height - Here you can specify the size of the thumbnail you would like to be inserted. Use the arrow buttons provided or simply type in the pixel width and height you wish to use to create your thumbnail. To keep the original size ratio, check the constraint boxes for width and/or height.



2. Link


Link - This is the URL that you would like your thumbnail to link to upon a visitor clicking it. Check the 'Include a link with thumbnail' box to include a small image next to the link. Check the 'Open link in new window' box to force a new browser window to open when a visitor clicks the thumbnail. Remember that the URL can be anything you like; it can be to another page of your XSitePro website, or an external Web page.



When you are happy with your thumbnail settings, simply click the OK button to insert the script into your Web page at the cursor-point.

Home  Previous  Next