Using this gadget, you can display images from multiple photo albums, or a single folder, in a scrollable gallery.

For example, you could display a gallery of images from events held this year, drawing the images from separate photo albums for each event.

Images will appear in the gallery in order by file name. Visitors to your site can click the thumbnail within the gallery to view a full sized version of the image.

Using the gadget's settings, you can control its appearance and content. 

For instructions on adding gadgets and displaying gadget settings, see All about gadgets.

The following gadget settings are available for photo gallery gadgets.

Images to display

Choose the location of the images you want to display. You can display demo images from the current theme, images from a particular folder in your Wild Apricot account, or images from one or more photo album gadgets on your site. You cannot choose photo albums that appear on admin-only pages. 

Regardless of the location of your images, they will appear in the gallery in order by file name.  

Number of rows

The number of rows in your gallery.

Number/size of thumbnails

You can either specify the number of thumbnails per row, or else the size of the thumbnails in pixels.

Background color

The background color of the gadget. To specify a background color, click Automatic and choose a color from the color panel that appears. 

You can pick a color from the theme palette at the top of the panel, or enter RGB values or a hexadecimal value for the color you want to use.

If you choose both a background color and a background image,  the background color will show through if the background image has a transparent background or doesn't occupy the entire gadget background.

Background image

An image to be displayed as the background for the gadget. To choose a background image, click the Select button beside Background image.

You can choose from the theme-specific image library, or click the Files tab and choose an image file from your Wild Apricot account.

After you've chosen your background image, you can control the horizontal and vertical alignment, and choose how your image appears within the available space.

Within the Behavior dropdown, you can choose from the following options:

  • Tile – the image will be repeated horizontally and vertically to completely fill the available space.
  • No repeat or scaling – the image will displayed as is, and will be not be repeated or scaled.
  • Repeat horizontally – the image will be repeated horizontally to fill the width of the available space.
  • Repeat vertically – the image will be repeated vertically to fill the height of the available space.
  • Fill – the image will be stretched to completely fill the available space, and may therefore appear distorted.
  • Cover – the image will be proportionally resized to cover the available space, and may therefore be cropped.
  • Scale by height – the image will be proportionally resized to fit the height of the available space. Depending on the dimensions of the space, the image may be cropped, or may not fill the entire width of the space.
  • Scale by width – the image will be proportionally resized to fit the width of the available space. Depending on the dimensions of the space, the image may be cropped, or may not fill the entire height of the space.

To remove the existing background image, click the Remove link. To replace the image with a different image, click the Change button.

Margins

The amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately.