BLOCKS

Tutorials

Overview Images Banners Features News Events People Videos Photo Gallery Other Blocks Example Page

Overview: Photo Gallery

↪ Notes on using the photo gallery:

The photos must all be in the same folder.
Only .jpg and .png images will be displayed.
Image files will be automatically renamed if necessary, replacing spaces with dashes, and adding "-web" at the end of the name if the name does not contain "-web" or "-thumbnail".
If you don't supply both full-size ("-web") and thumbnail ("-thumbnail") images with filenames that are identical apart from the "-web" and "-thumbnail" identifiers, the images will be renamed with "-web" appended just before the file type extension, and a thumbnail image will be automatically generated. ("My fine image.jpg" would become "My-fine-image-web.jpg".)
Only .jpg images will get automatic thumbnails—because .png images can have transparency that would be lost when the .jpg thumbnail is created, we leave it up to you to create .png thumbnails. (They're not necessary, but can speed up the load time for the page.)
Captions are taken only from the "-web" image; if there is a description property containing text on the image, that will be used, otherwise the title will be displayed as the caption.
Caption text can contain HTML, but double quotes will break things; use single quotes only.
When specifying the filename of the initially selected image, remember that the filename may change when the page first loads—spaces will become dashes, and "-web" will be added if it wasn't found in the name.

Q: How do I add a photo gallery?

What do I need?

A folder reference (the full path from the root to the folder) for a folder containing one or more images. To control what appears as the thumbnail, create your own thumbnails and be sure to give the thumbnails and full-size images identical filenames that differ only in the "-web" and "-thumbnail" identifiers.
The filename of a photo in the folder reference to be used as the starting photo.

What do I do?

Add the following code to the your index_html page in the section where you would like the gallery to appear:

<tal:PHOTO_GALLERY
  define="DATA python: REQUEST.set('DATA', {
    'SELECTED'  : 'DEA-alumni-with-poster-web.jpg',
    'SOURCE'    : '/ChE/people/alumni/controls/images/DEA-2018',
    'TEMPLATE'  : MASTER.ptPhoto});"
  content="structure MASTER/ptPhotoGallery" />

Replace /Che/people/alumni/controls/images/DEA-2018 with the reference.
Replace DEA-alumni-with-poster-web.jpg with the filename (as it will be after any automatic renaming) of the image you want to have initially selected.

Add the following code to the 'foot_content' property of your index_html page.

<script type="text/javascript" src="https://engineering.purdue.edu/Engr/controls/JS/PG.js"></script>
<link href="https://engineering.purdue.edu/Engr/controls/CSS/PG.css" rel="stylesheet" />

What should I see?
In this example, the "Flowers at the DEA 2018 Reception" photo and all thumbnail photos found in the 'ChE/people/alumni/controls/images/DEA-2018' folder.

Distinguished Engineering Alumni 2018

DEA alumni with poster

Thumbnails