Documentation

Instructions

The tcPhotoGallery package is installed like all other Concrete5 packages through the Add Functionality page in the Concrete5 Dashboard.

Add a new Photo Gallery to a page by simply editing a page and adding the tcPhotoGallery block to your page.  Filtering and search is added by adding the tPhotoGalleryFilter to the same page.  Each block may be added to separate areas of the page.

To configure a photo gallery follow the steps below:

  1. Upload your photos to your Concrete5 site
  2. Assign the photos to one or more file sets.  Each file set becomes a "category".
  3. In the File Manager, click on the "Attributes" tab:
    1. Add one or more "Select" file attribute types.  Each type becomes an attribute available for filtering on. Note: that tcPhotoGallery only supports the "Select" file attribute type. No other types are supported.
    2. Assign a handle, a name, and values for each of the attribute types. (Note: you do not need to check any of the "Searchable" options, tcPhotoGallery automatically searches all of the categories configured for a gallery).
    3. You may check "Allow multiple options to be chosen" if you want to allow multiple values for an attribute.  tcPhotoGallery supports multi-valued attributes.
    4. If you want to support explicit ordering of photos, create a 'number' attribute with the handle "order", the title "Order"
  4. Go to the "Search tab of the File Manager and enter attribute values for each of your photos.  This is done by clicking on a photo and selecting "Properties". You should see your custom attributes in the "Other Properties" area. If you want photos to appear in a specific order, make sure you fill in discrete values for the order attribute for each photo.
  5. Edit or create a page where you want to include a gallery.  Add the tcPhotoGallery block to the page. In the settings:
    1. Choose a name for your gallery.  If present, this value will appear at the top of your gallery in the default template.
    2. Select the categories you want to include in the gallery.
    3. Select the attributes you want to include in the gallery.
    4. If you want to support explicit ordering of photos, enable the Sort By option.
    5. Choose which data you want displayed with the gallery.
    6. Choose an optional "Primary Attribute".  This value will appear in the gallery and can be used to provide information about each photo.  The primary attribute appears above the photo in the default template.
    7. Choose an optional "Secondary Attribute".  This value will appear in the gallery and can be used to provide additional information about each photo. The Secondary attribute appears below the photo in the default template.
    8. Click the "Add" button.
  6. If you'd like your users to be able to search and filter the photos in a gallery add the tcPhotoGalleryFilter block to the page. In the settings:
    1. Choose whether to allow users to filter quickly based on categories, and
    2. Choose whether to allow users to filter and search using full capabilities including by category, attribute, reference number, or keyword

Frequently Asked Questions

Q: I added a custom file attribute.  Why doesn't it appear on the settings page when I add or edit my gallery?
A: tcPhotoGallery only supports "Select" file attributes.  Make sure you did not choose another file attribute type.

Q: I enter a keyword to search on but it's not returning results that I expect.
A: tcPhotoGallery determines which photos display by following the steps below:

  1. exclude photos that don't match the given category
  2. exclude photos that don't match ALL of the specified attributes
  3. exclude photos that don't match ANY of the specified keywords; keywords may match parts of words in the photo title or description (if visible) or any of the attributes.

Q: How many tcPhotoGallery blocks can I have on one page?
A:
At the present time you should only place one tcPhotoGallery block and one tcPhotoGalleryFilter block on each page.

Q: I want users to be able to find links to particular photos, how do I do that?
A: There are two options.  The first is to enable Photo Reference numbers. When photo references are enabled, the reference number is a link that will can be used to return directly to that photo within the gallery.  This may be handy if you want to provide an easy way for users to copy links for adding to emails or for other purposes.  The second option is to enable image links in the gallery block.  When this option is enabled, photos become a clickable link that loads a blank page with only the photo.  This option may also be useful for creating lightbox enabled custom views.

Q: How do I use zoom mode?
A: First, your images need to be larger than the area they will appear in.  If not, zoom mode won't have anything to do.  Zoom mode uses only one version of each image. The image display in the gallery is scaled down using CSS from the full image size. The image that appears in the reticule (zoomed area) is the full size image.

Second, set the maximum width/height and zoom width/height values in your gallery block settings.  This tell's tcPhotoGallery what size to scale the gallery images and how big of a zoom reticule to use.

Third, if you'd like the zoom reticule to appear as a circle (or ellipse), style the tc-photo-gallery-image-zoom class with border-radius values equal to half the zoom width/height values.  This will only work, of course, with browsers that support border-radius.