How to Use the Photo Gallery as a Content Rotator


This tutorial demonstrates how to use the "Photo Gallery" module as a content rotator.  Please note that SiteWizard CMS also includes a dedicated "Content Rotator / Slideshow" module.  These are two different modules with different benefits.

Comparison of Photo Gallery and Content Rotator Modules:

  Photo Gallery Module Content Rotator Module
Difficulty Complicated to set up initially, but easy to administer after setup. Simple to set up and administer, but may be difficult to produce the desired result.
Intended Use The Photo Gallery module works well as a content rotator if your slides will be a large photo with a small caption. The Content Rotator module is the best choice when your slide will be mostly text or HTML.
Backgrounds No backgrounds are included. Includes 100+ built-in backgrounds.
Photos No photos are included.  You must provide your own. A limited selection of photos is included, and you can add your own custom photos.
Slide Design Limited control over slide design.  A simple caption can be added to each slide. Provides a full HTML editor to customize each slide.  This is good for power users but may be complicated for those unfamiliar with HTML.

Photo Gallery Module Setup

Start by logging into your website with an administrative user account.  Please note that your username is not "admin" or "administrator".  You created a unique username when you set up your new website.  Contact our support department if you do not remember your username.

After you have logged in, the Photo Gallery module can be added to an existing page, or you can create a new page for your Photo Gallery. 

Creating a New Blank Page (Optional):

To create a new blank page, click on "Page" in the control panel and choose "Add Page (Basic)":

You will see a dialog box labeled "Add New Page".  You must provide a Page Name, then click the "Add Page" button.

Adding the Photo Gallery to a Page:

Now that you have a page for your Photo Gallery, you can add the Photo Gallery module.  From the control panel, click the "New" button in the Module section:

You will see a dialog box labeled "Add New Module".  Select "Photo Album" from the Module drop-down (found under Audio/Video > Photo Gallery):

Enter a Title for your Module, then click the "Add Module" button.  The Photo Gallery module will be added to the page.  You will be presented with the New Gallery Wizard.  Choose "Sliders & Rotators", then choose "Translucent":

Click the Next button.  You will see Step 2 of the New Gallery Wizard.  This step prompts you for Width and Height of your photo gallery.  The size depends on your website's layout, and it can be adjusted later.  For now, just leave the default settings (Width: 800px, Height: 400px) and click Next.

On Step 3 of the New Gallery Wizard you can choose the source of your photos.  Choose "Web Upload" and click Next.

After the New Gallery Wizard is complete, you will be prompted to create a new Album.  Every Photo Gallery must have at least one Album.  Click on the "Create Album" button.

After you click "Create Album" a default album named "My first album" will be created for you.  You will be redirected to the Upload screen.  However, before uploading we should make some changes to the Settings.  Click the "Settings" icon at the top of the module.

Most likely, the images you upload will not perfectly match the size of your Photo Gallery.  If your photos do not fit the exact proportions of the Photo Gallery, the module will compensate by showing a margin around the photo.  To correct this problem, we will allow the Photo Gallery to crop our photos to fit the gallery.

From the Settings screen, check the box next to "Crop Images".  Also make sure "Crop Thumbnails" is selected.  Click the Update button at the bottom of the Settings screen.

After you save your Settings, you can begin adding photos to your Photo Gallery content rotator.

Changing the Photo Gallery Size

Before uploading photos, you should preview the Photo Gallery's size to make sure it fits correctly within your web page.  This should be done before uploading photos because the photos are resized during upload.  If you resize the Photo Gallery after you upload photos, your photos will not match the size of the Photo Gallery, and you will need to re-upload them to fix the display.  Hence, it is best to establish the optimum Photo Gallery size before uploading a large number of photos.

Important Note:  The Photo Gallery does not hide its control panel in Page Preview mode.  The only way to see the "true" size of your Photo Gallery is to log out of your website.

To change the size of your Photo Gallery, two settings must be changed:  (1) the Photo Gallery size setting and (2) the Album resize settings.  To change the Photo Gallery size, click the Settings icon.

Choose the Presentation tab, then change the size in the Gallery Size section.  Save your changes by clicking the Update button. 

It is recommended that you log out of your website to see the "true" size of your Photo Gallery.  If you are not satisfied with the size, log back in, change the Gallery Size setting again, and log out to preview.  Finding the perfect gallery size may take multiple tries.

After you have perfected the size of your Photo Gallery, you should adjust the size of the Album.  Click on the Albums icon.

On the Albums screen, place your mouse over the album that you previously created ("My first album").  Icons will appear in the upper left corner of the Album box.  Click the pencil icon to edit the Album.

When you are in the Album Edit screen, look for the Advanced Options section.  Click the link that says "Click here if you understand this section and wish to change it."

After you click the link, the Auto Resize option will be available.  Change the height and width to match the dimensions you previously set in the Gallery Size section of Settings.  Click Update to save your changes.

Adding Photos and Captions

To add a new photo to your Photo Gallery, click the Upload icon in the module's control panel:

On the Upload screen, click the Add Files button.  Select a file from your computer and continue.  Repeat this process for each photo that you want to upload (click Add Files, then select a file on your computer).

After all of your files have been selected, click the Upload button.  You will see all of your photos being processed.

Now that your photos have been successfully uploaded, you can arrange them in order and add captions.  From the module's control panel, click the Manage icon.

You will see a list of the photos that were previously uploaded.  To reorder the photos (optional), place your cursor over the photo's title.  Your cursor will change to show that the photo can be moved.  Click and drag the photo into a different position.

To edit the caption for a photo, place your cursor over the photo.  You will see icons appear in the upper left of the photo box.  Click on the pencil icon to edit.

After clicking the edit icon, you will see the title and descriptions for your photo.  Edit the title and description.

Helpful photo description (caption) tips:

  • The "Basic" editor is sufficient for most captions.  However, selecting the "Html" option provides additional formatting options (fonts, colors, bulleted lists, etc).
  • If you select "Html", you can expand the editor.  To resize, click and drag the icon at the bottom right corner of the Html editor.
  • Your photo can link to a web page.  In the "Link to" section, choose the appropriate link type.

After you have entered your title, description and link options, click the "Update" button.  Your caption and and options will be saved.  You can preview your Photo Gallery / content rotator by clicking the Gallery icon.

Add Feedback