9. Other Features

As well as all the features we have outlined in this document, the SiteWizard Content Management System allows you to add extra elements that can help customise your website even further to your requirements.

9.1 Creating A Custom 'Thanks For Your Submission' Page

If you have a submission form on your website, and a user hits the Submit button, an automatically generated web page will appear saying 'Thanks for your submission'. SiteWizard gives you the option of changing the standard page to contain any amount of text you wish. This page won't show up on your menu system and can only be viewed after a submission is made from your site.

1. In the Page Names editor select a blank page and enter thanks into the Page Description box.
2. Enter a meaningful name into the Alternative HTML Filename box. e.g. thanks or thankyou.
3. Click on the Save Changes button.
4. Open the Page Editor and select the thanks page to edit.
5. Add the text you wish to appear on the thanks page and then save your changes.

By giving the page a name of thanks, the SiteWizard system will recognise that you would like this page to appear automatically after a form has been submitted from your site. An idea for the text on this page would be:

Thanks for requesting a quote. We will get back to you within 2 working days.

Alternatively you can use it to get your best sales point across one last time before the client leaves the site.

Thanks for your query, before you leave our site do remember that we're the only web design company to offer a money back guarantee.

Back to top

9.2 Adding Photographs To Your Lightbox Image Viewer

The Lightbox system is an excellent attachment for anyone who wishes to show a portfolio of images. By using animation, this system will open a large version of any thumbnail image clicked on whilst darkening the rest of your website, thus making sure that the viewer's focus is purely on the image. It also includes previous, next and close buttons to the image, as well as the ability to add a relevant caption of your choice.

If you are interested in the Lightbox system then please visit our website to view a working example, then contact your Customer Account Manager for a quote.

Editing images for use in your Lightbox system

Before you can add images into the system you'll need to adjust them so they are in the same dimensions as the rest of the pictures on your website. This will need to be done for both the small (thumbnail) and large image. We recommend that you use an image editor such as Adobe Photoshop, or for a cheaper alternative try Gimp (GNU Image Manipulation Program).

We recommend that your large images should be no more than 650 pixels wide or 440 pixels high. The size of the thumbnails used will vary depending on the characteristics of your website. Follow the instructions below to find out the specific dimensions to use.

Finding the size of the thumbnails on your site

1. Visit your website and open the page that the contains your Lightbox image viewer.
2. Right click your mouse over one of the thumbnails and select Properties.
3. This will then bring up all the information about this image. Make a note of the Dimensions as you will need to make all your thumbnails this size.
4. Click Cancel to close the window.

Adding images into your Lightbox system

Once you have resized your images to the correct dimensions you'll then need to upload them into the SiteWizard system before they can be used on your website. Instructions on how to do this can be found in the Image Store [link] section of this guide.

1. Open the page you wish to add the thumbnail images too.
2. Click on the page where you would like the image to appear.
3. Click on the Insert/Edit Image button on the toolbar.
4. In the pop-up menu that appears click on the Browse Server button which is to the right of the URL input box.
5. This will open the Image Library in a new pop-up window.
6. Find the image you would like to insert and click on its filename.
7. This will now take you back to the original pop-up window. In the preview window, you'll now see the image you selected along with some sample text.
8. Click Ok and the image will then be inserted on to the page.

Adding a link and title to the image

Now that the thumbnail image has been inserted you'll need to add a link to the larger image and a title tag, which will eventually be the images caption.

1. Right click your mouse over the image and select Image Properties, then the Link tab.
2. Because you'll be linking to an image, which isn't located in the File Store, you'll need to type the path in manually. This should be done in the following way:
   
   http://www.[your websites url]/images/[imagename].jpg
   
   It's always good practice to name the larger image of the two the same as the thumbnail but with the word 'large' or 'big' after it. e.g. For your first image the thumbnail would be named image1.jpg and the large image will be image1large.jpg.
3. Click on the Advanced tab and in the Advisory Title box enter the caption you would like to appear under the large image when it is displayed.
4. Click Ok to add the link.

Editing the html code of your page

The last thing that needs to be done is for a small piece of code to be added to the link on the picture. This code will be used by the system to determine whether a next and/or previous button will need to be included with the image.

1. Click on the Source button to view the html code of the page.
2. Using the Find option in the tool bar to locate the image you have just inserted. The code that contains the image should look something like this: <img src="[imagename].jpg" />
3. Inside the starting anchor tag to the right of the image, copy and paste rel="lightbox[roadtrip]". Once this has been done the code for the link to the larger picture and your thumbnail image will look something like the following code:
   
   <a title="[caption goes here]" href="[large image]" rel="lightbox[roadtrip]"><img src="[small image]" /></a>



4. Click the Source button again to return to the graphical version of your page and then click Save.

Back to top