Advanced Galleries

This article will give you an overview of the strategies available for implementing a custom website gallery.

Note that Oncord allows users to drag-and-drop basic image galleries into a page, and is the preferred method for giving users control over a gallery:

However, for more development control you may opt to build a custom solution, or populate the images dynamically.

Populate from Media Folder: Create a media folder (such as "gallery"), and populate the gallery with all images in that media folder.

Populate from Posts: Create a Post Category, and populate the gallery with all images as Posts assigned to that Post Category. 

Populate from Media Folder

Page media can be used to populate an image gallery.

Positives: 

  • It's easier for an administrator to manage this type of gallery.
  • This method is great for galleries with a large number of items because Oncord supports multiple file upload through attached media.
  • The posts section of the dashboard stays neater because it isn't populated with gallery images in addition to blog / news posts.

Negatives:

  • There's no way of linking gallery images to anything other than a larger version of an image.
  • You need to use PHP to generate an image title from the filename.
  • You can't add extra image details such as descriptions, publish dates etc, as these can't be derived from an image in a folder.

Example Code:

The example below shows how to populate a gallery with media from a folder. Using the below example, the <layout:gallery> control could be substituted with your own custom gallery structure. 

<!-- Gets the current page as $page --> <logic:variable value="\Components\Website\Pages::current()" as="page" parsenow="value" /> <h1>Gallery</h1><br /> <layout:gallery spacing="5" sizing="4,6" modalContent="*" modalTheme="light"> <!-- Get each media item from /$pageId/images folder --> <data:repeater as="media" datasource="\Components\Website\Media::getChildren('/media/website_pages' + $page['page_id'] + 'images/')"> <!-- If the media type is 'image' --> <logic:if test="$media['media_type'] == 'image'"> <standard:image title="[? ucwords(str_replace('-', ' ', substr($media['media_name'], 0, -4))) ?]" lazy="true" src="[? $media['media_url'] ?]" /> </logic:if> </data:repeater> </layout:gallery>

Populate from Posts

The posts component of Oncord can also be used to populate an image gallery. Each gallery image will be a post.

Positives:

  • You can have more information associated with your gallery images, such as a title, short description, publish date, author.
  • Better Accessibility - Because you have more data available about the image, the image title and alt attributes will be more accurate for use with blind interpreters (as long as you don't leave fields blank).
  • Better SEO - Again, more data about the images means you can include more details in the title and alt attributes, helping to improve your SEO.

Negatives:

  • Uploading images takes much longer, you'll need to create a post for each image in the gallery.
  • The posts section of your dashboard won't be as neat because it will be populated with blog articles as well as gallery images.
  • This method is slightly harder for admin users to manage, they'll need to be familiar with how Posts work on Oncord.

Example Code:

<layout:gallery spacing="5" sizing="4,6" modalContent="*" modalTheme="light"> <data:repeater as="post" datasource="\Components\Website\Posts::getAll()"> <standard:image alt="[? $post['post_title'] ?]" src="[? $post['post_icon'] ?]" /> </data:repeater> </layout:gallery>