The photo album widget allows you display one or more photos on the page in a variety of ways:

• Single Photo:  The photo album will display a single photo, scaling it to the width of its column. (See "page layout" for changing column widths)
  
• Random Photo:  Load the photo album with several photos and the photo album will randomly select a photo to display each time the page is loaded.
• Slideshow:  Load several photos and the photo album with cycle through them using a variety of different transitions. This is sometimes called a 'photo carrousel' or a 'slider'.
• Grid of Photos:  The photo album will display a grid of photos based on the number of columns you set.

Configuring Your Photo Album

The following steps describe how to add photo albums to your pages and configure them:

1. Add Photo Album to Page:  To add a photo album to a page click on the "Add Widget" link on the builder bar at the top of the page and drag "photo album" onto the page.
2. Open Edit Dialog:  Move your mouse over the photo album and click on the "edit pencil" that pops up in the yellow edit tab.
3. Add Photos:  In the 'Content' tab of the photo album edit dialog, click on the box that says "Drop Images or Click to Browse."  A 'File Upload' dialog will allow you to browse through the files on your computer and select a single image file. Once you have selected the file, click on the 'Open' button and the image will be loaded. A new "Drop Images of Click to Browse" box should appear to allow you to upload another image file.
4. Album Type:  Select a display method for your photo or photos.
1. Slideshow:  Photos will be displayed one at a time, one after the other, for a specified number of seconds in an endless cycle.
   
2. Slideshow with Selectors:  Slideshow will be displayed with buttons to allow users to select a particular photo and pause or restart the presentation.
   
3. First Photo:  The first picture in the list of photos will be displayed.
   
4. Random Photo:  The photo album will randomly display one of the photos in the list each time the page is redisplayed.
   
5. Grid (1 to 8 Columns):  All of the photos in the album will be displayed in a grid with from 1 to 8 columns. E.G. Select 'Grid (3 Columns)' to display the nine photos you have of the Brady Bunch family.
5. Captioning:  Select whether you want photos to be displayed with text captions at the bottom of each photo, text overlays displayed across each entire photo, or no captions at all.
6. Adding Text to Photos:  To add caption or overlay text to a photo, try the following:
1. Make sure you're in the 'Content' tab of the photo album edit dialog
2. Click on the 'edit pencil' in the upper right corner of the photo to which you want to add the text. A new set of options should appear right below the photos. (NOTE: You might have to scroll down the edit dialog box a bit to see them.)
3. In the Caption or Overlay Text text editor, type in the text you want to add.
4. To add text to other photos, click on the 'edit pencil' for the new image and add the text to the text editor.
   
7. Background Color:  Some photos may have transparent backgrounds or they may not be scaled to fill the entire area. To set the background color for the entire region allotted to the photo, click on the background color selector and choose a color. (NOTE: The slider at the bottom of the color selector controls the opacity of the color and must be somewhat to the right in order for the color to be visible.)
8. Open links in new window:  If you want users to be able to click on a photo to go to another page, you must click on the 'edit pencil' for the photo in question and add the URL of the page to which you want to link (e.g. 'http://www.google.com') using the 'Link URL' text box. The 'Open links in new window' check box, if checked, will cause the link to be opened in a new browser tab. Otherwise the new page will be opened in the current browser tab.

Photo albums of the types 'Slideshow' and 'Slideshow with Selectors' both have the following additional settings:

• Slideshow Speed:  Set the number of seconds you want each slide in the slideshow to appear. We recommend speeds of around five seconds or more to keep the motion from being annoying.
• Transitions:  Select the way one slide changes to the next slide. NOTE: The following is a minimal list of transitions. We'll be adding to this list over time.
  
• fade:  Slide fades out as the next slide fades in (fast: .5 seconds, slow: 1 second)
  
• scroll left:  The current slide moves to the left and leaves the frame as the next slide follows it into the frame (fast: .5 seconds, slow: 1 second)
  
• slide left:  The current photo slides to the left to reveal the next slide which is already underneath. (fast: .5 seconds, slow: 1 second)
  
• Default Scaling:  To keep the size of the photo album from changing as photos of different sizes transition into one another, all of the photos are scaled to be the same size as a reference photo in your album. You can set the 'Default Scaling' to determine how each photo is scaled to the reference photo in the absence of specific scaling information (set using the 'Scaling' selector that come up when you click the 'edit pencil' for an individual photo). 
  

To change the order of the photos in your album:

1. Open the photo album edit dialog
2. Drag photos to arrange them in the desired order.
   

Selecting a Reference Photo:
Grid and slideshow photos are scaled to be the same size as a reference photo in your album. By default the reference photo is the first photo you added to the album, but you can set a different photo to be the reference by clicking on the 'edit pencil' of the new reference photo and selecting 'Scale other photos to this one' in the 'Scaling' dropdown selector that comes up. (NOTE: You may have to scroll the edit dialog down a bit to see the 'Scale' dropdown.)

Changing the Scaling Setting for a Particular Photo:
In the photo album edit dialog, click on the 'edit pencil' for the photo you want to edit. A group of settings specific to that photo will appear right below the last photo (NOTE: You may have to scroll the edit dialog down a bit to see the new settings.) Select an option from the 'Scaling' selector:

• Shrink to fit:  Scale this photo so that it fits entirely within the bounds of the reference photo. If photo is narrower than reference, then gaps will be left on the right and left of the photo. If photo is wider than the reference, then gaps will be left above and below photo.
  
• Scale other photos to this one:  Use this photo as the reference photo.
  
• Top:  Set this photo to be the same width as the reference photo and display it at the top of the bounding box. If this photo is shorter than the reference, a gap will be left at the bottom. If it is taller than the reference, then the bottom of the photo will be clipped.
  
• Fill:  Center the photo in the reference bounding box and expand it until it entirely fills the space. Areas outside of the bounding box will be clipped.
  
• Stretch:  Change the aspect ratio of this photo to make it the same size as the reference photo. NOTE: This will distort the image, making it appear either 'fatter' or 'skinnier' than the original.

Scaling Issues:

• Edit dialog images aren't shown using the selected scaling. Save the dialog settings to see the impact of any scaling changes.

If the image you want to add is publicly available on another page of your website (or another website), you can link to that image directly by doing the following:

1. Open the Photo Album Edit Dialog
2. Click on the 'edit pencil' of the "Drop Images or Click to Browse" box .(NOTE: You may have to scroll down in the Edit Dialog in order to see the new settings that come up after the list of images.)
   
3. Enter the URL of the desired image into the Image URL textbox and then hit the 'Enter' key. E.G. URL of an image on your website:  '/uploads/dev/files/000/001/000001133.jpg', E.G. URL of image on a different website:  'http://upload.wikimedia.org/wikipedia/commons/8/89/X-icon.png'
   

You can add links to your photos so that when users click on the photo, they'll be taken to the page you specify. Here's how to add a link to a photo:

1. Open the Edit Dialog for the photo album.
2. Click on the 'edit pencil' for the image to which you want to add a link. (NOTE: You may have to scroll the Edit Dialog down a little in order to see the settings that appear below the list of photos.)
   
3. Enter your link into the Link URL textbox.
   
   • Internal Links:  A link to a page within your website can start with '/' instead of including the protocol and domain portion of the URL. E.G. '/contact' instead of 'http://ditdat.com/contact'
   • External Links:  A link to an external page should always include 'http://' or 'https://'. E.G. 'http://www.google.com'

If you have already added caption or overlay text to a photo, you don't have to open the photo album Edit Dialog to edit it. You can edit the text right on the page by:

1. Click on the text
2. Type your changes
3. Click somewhere else on the page to save your changes

Notes on editing the text of slideshow photos:

• If you are trying to edit the text on a photo in a slideshow, you might want to set the photo album type to 'Slideshow with Selectors' and then hit the pause button to give you enough time to edit.
• You'll need to refresh the page in order for your edits to appear for later cycles of the slideshow.