4.7. The Image Gallery Content Type

The Image Gallery content type provides a simple way to display a grid of clickable thumbnails in Perforce Chronicle. Images can be added to the gallery via drag-and-drop (for a supported web browser), or selected from any previously added Image content entries. Clicking on an image shows a larger or full-size version in a "lightbox" presentation.

4.7.1. Creating an Image Gallery

  1. Please refer to Section 3.3, “Adding Content” to see the process for choosing a content type. Choose the Image Gallery content type. The new Image Gallery is displayed:
    [Note] Drop Files Here — the gallery area

    For browsers that support drag-and-drop file operations, the area where images appear is labelled "Images (drop files here)"; otherwise the label is "Images".

  2. Choose an approach for adding images:
    1. Using Drag-and-Drop

      Note: this only works with a supported web browser.

      1. Drag one or more images from outside your browser onto the gallery area. An upload dialog appears:
      2. Click Upload to upload the images. A progress dialog is displayed while the images are uploaded:
        When the upload completes, thumbnails of the images are displayed:
    2. By Selecting Content
      1. Click the gallery area. A tooltip dialog appears:
      2. Click Browse. A content selection dialog appears:
      3. Select one or more images. Click Select. The tooltip dialog is updated with your selection:
      4. Click off the gallery area. Thumbnails of the images are displayed:
  3. Complete any other changes, then click Save.

4.7.2. Using an Image Gallery

After the content entry is saved, clicking on an image thumbnail causes a "lightbox" presentation of the image — a dark page overlay reduces attention on the page while viewing images.

While the lightbox presentation is active, hovering the mouse over the left or right side of the image will display an arrow if, respectively, there are previous or next images available. Clicking on the image when the arrow is visible will present the previous or next image.

Click the X at the top right of the image, or anywhere off the image, to exit the lightbox presentation.

4.7.3. Removing Images from the Gallery

  1. Click Edit in the Perforce Chronicle toolbar to begin editing.
  2. Click the gallery area containing thumbnails. A tooltip dialog listing all the images in the gallery appears:
  3. Click Clear beside an image you wish to remove. The image is removed from the list of thumbnails in the tooltip dialog, and its thumbnail is removed from the gallery area.
  4. Click Save to complete the removal of the image(s).
Perforce Chronicle - Release: 2012.2/486814