ImageCaster
Tips
Release Notes Webcam


Creating a Webcam Gallery Page


Setting up and displaying an Image Gallery web page linked from your main cam web page provides your visitors with the ability to review a history of the latest activity captured by your webcam. Typically, configuring and running an Image Gallery can be a daunting task. You need to manage multiple image files and ensure that each image gets rotated through the Gallery as it ages. This can mean moving or renaming image files on your web server each time your webcam image updates. The great thing about ImageCaster is that with a few changes to your Web Page Panel and Destination Panel document settings, you can be running an Image Gallery web page in minutes. This Tip shows you how!

Understand Webcam Basics. You need to be familiar with the basics of setting up a webcam. If you haven't already done so, checkout "Tip - Webcam Basics." This will take you through the necessary steps to get your webcam up and running with ImageCaster.

Preparation. To setup a webcam gallery page for your website, you will need to configure ImageCaster to generate and upload a webpage and setup filename permutations to match the number of gallery images.

Choosing the Template. To begin, click the "Generate Web Page" checkbox on the Web Page Panel. From the "Template:" popup, choose one of the gallery templates. In this example, we'll use the "Gallery - Standard + 16" template. Gallery templates are different from the other templates in that they contain two web pages: a "Main Page" and a "Gallery Page." You can use the popup next to the template selector to choose either page when editing your web pages.


Use the Web Page Panel to configure ImageCaster to automatically create and deliver a webpage, along with your camera images, to your website.

Choose your template using the popup menus at the top of the panel. Change the "name as:" field to a name appropriate for your website.

Customizing the Main Page. To customize your "Main Page" you will need to name the page, add or remove page elements, and customize the page elements. Name your "Main Page" by entering a name in the "name as:" field. If you are using this page in an existing website, choose a name appropriate to your website. If this is the first page in a new website you are creating, then use the name "index.html." This is a default name that web servers automatically recognize as the first page to display to a new visitor.

NOTE: You should always make sure your ImageCaster document is 'Offline' by un-checking the "Online" checkbox in the lower left corner of the document window. This prevents partially created or incomplete web pages from being periodically delivered to your destination.
Adding and Removing Page Elements. The "Page Options:" list enables you to add and remove individual page elements. Use the checkboxes next to each listed item to display or hide it.

Customizing the page elements is simple. The pencil icon is used to modify page elements. Highlight the "Headline" item and then click the pencil icon. Use the page element editor that is displayed to change the headline to something appropriate for your website. Here, we're changing the headline to "Joe's Office Cam." Click the OK button to save the change and dismiss the editor. We'll also change the "Caption" item to something more appropriate.

You can also customize the "Page Settings:". Highlight "Refresh Interval" and click the pencil icon. Change the interval to 15, causing the page to refresh every 15 seconds. Click OK. It's a good idea to set the page refresh interval to something similar to the upload interval that is set on the Schedule panel.


Use the "Page Options:" at the right to hide and show page elements. Click the pencil icon to edit an item such as the "Headline".

Customize the "Gallery Page" to match your "Main Page".

Customizing the Gallery Page. Now it's time to customize the Gallery Page. Begin by choosing "Gallery Page" from the template page selection popup menu.

To customize the Gallery Page, use the same steps we used to customize the "Main Page." First, remove the Sub-headline by un-checking the checkbox in the "Page Options:" list. Now edit the "Main Headline" by highlighting it in the "Page Options:" list and click the Pencil Icon. Add, remove or edit the other page elements as you choose. We'll also modify the "Gallery Refresh Interval" in the "Page Settings:".

Note: One of the more powerful features of the Web Page templates is the ability to add your own HTML code to the page. This feature can be used to add additional elements to the web page, such as additional links. Visit the ImageCaster manual to see the details of how to add your own code to the webpage.

Filename Permutations. Now we need to setup filename permutations to match our gallery. Notice that the gallery template we selected contains 16 images. Combine that with the image on the "Main Page," and we will need a total of 17 images to fill all the image positions.

Go to the Destination Panel. Under "Filename Permutations:" click the "Type:" popup menu and select "Shift." Next, enter 0 (Zero) in the "From:" field and 16 in the "to:" field. Zero to sixteen will result in seventeen separate image names being created, matching our needs for the webcam main page and gallery.

A shift name permutation will cause each new image file that is delivered to your website to be named 0. Each of the previously delivered images (one through sixteen) will be renamed to the next-higher number, 'shifting' the images. The sixteenth image will be removed, so the group is always limited to 17 total images.


Use the "Filename Permutations:" controls to configure ImageCaster to deliver the seventeen images necessary to support the Main Page and Gallery Page.

Now place your ImageCaster document online by checking the "Online" checkbox in the lower-left corner of the document window, and the newly created webcam page and gallery page will be delivered to your website with the next scheduled image file delivery. Give your new pages a test by opening your web browser and surfing to your website. Note that it will take 17 image deliveries before the gallery is complete. Until then, some images will be missing.

That's it!

If you have any problems while using our products, contact us by using our support form.
If you wish to share a tip with us, post it on our comment form.


Back to Tips Index
All content is Copyright 2001-2008
Econ Technologies, Inc.
All rights reserved
Valid HTML 4.01 Transitional