User and User List image selectors

Application of image selectors that source directly from the concrete5 File Manager is reasonably intuitive. You have a slider or gallery in mind and need to show some images.Decide how you want to manage image selection - by selecting images, folders or filesets. Decide when the selection is made - static, dynamic or infinite dynamic. You now have a list of images to display and access to their properties and attributes and you can show them withany Omni Gallery display widget.

The directory crawler image source is also pretty straight forward - just point it system directory within the web space and it works through the images.

Here we will look at use-cases for image selectors that may not be so obvious in their application. Selected User Dynamic and User List Dynamic. These are the user equivalents of Selected Page Dynamic and Page List Dynamic image selectors.

Both of these are dynamic image selectors - they build a list of images as the Omni Gallery block is rendered. That means you need to be a little bit careful how they are used. They are not 'infinite dynamic', so a dynamically built user list on a site of 1,000 users will try and list all 1,000 users in one big bang.

Both selectors identify a user or a list of users, then identify images by picking from one or more compatible image attributes. 

Currently supported attribute types for images are:

Using just the core image/file attribute, you could configure your users with a single image/file attribute such as a 'mugshot' or attach further image/file attributes such as 'left profile' and 'right profile'. These attributes will then be available to be picked as checkboxes in the Selected User and User List image selectors.

Going beyond the core, installing a third party fileset attribute or one of the multiple files attributes makes it easier to attach many images to a user with a single attribute. All of the listed attribute type addons are free.

Selected User Dynamic

The Selected User Dynamic attribute builds a list of images for a single user. That could be a specified user, the current user, or the user associated with a profile page.

You could do similar with file picker, fileset or folder image sources. The key difference here is that the images are listed from the user's attributes and a user can edit their attributes from their profile. They don't need permission to actually edit the Omni Gallery block. User attributes can also be required, so become compulsory at registration.

The Mugshot Gallery

Sticking with our concept of 3 mugshots. Create these three user attributes and make them required. Add an Omni Gallery to the public profile page and configure it to use the Selected User Dynamic image source with no user selected and the three attributes checked. For display you could stick with our mugshot theme and use a thumbnail gallery display widget with 3 images in a row, that is essentially what you could do with a 3 column layout and an attribute display block for each image.

However, unlike a layout, the thumbnail gallery is fully responsive and further image and user properties and attributes are available. The images can be automatically connected to a lightbox or even linked to other pages through image attributes. The mugshots could be overlaid with the username or a full name drawn from another user or file attribute. If you want to add more mugshot attributes, the Omni Gallery block easily adapts. 

There is nothing limiting this to mugshots. It could be any images a user picks to populate their user attributes.

Profile Gallery

For more than just a few images, rather than connect to individual image attributes you could install one or more of the image multi-select attributes or a fileset attribute and the Omni Gallery can connect to those as well, something you can't do with a core attribute display block and layouts.

Display isn't limited to just a thumbnail grid. You can swap the display widget to a slider such as Swiper or even a Vegas background slider display widget.

Through all of this, users don't need edit access to the blocks on the page. As long as they can upload files to their user attributes, the Omni Gallery can display them. A user is free to curate a list of images using the file manager and they can automatically appear on their profile page. With potentially unlimited images, you may want to limit the number of images listed here. 

The only thing you shouldn't do on a profile page is try and use pagination within the display widget (such as on a big gallery of thumbnails). Pagination could get confused with the user ID in the profile path - user profiles in the core are not coded to deeply integrate with Omni Gallery.

User List Dynamic

A user list image selector takes what we already have for a selected user and applies it to a user list. Within that list it can be configured for a single image per user or multiple images. 

With the volume of images in mind, we now have two limits on selection. A limit on the number of users listed and a limit on the number of images listed per user. Hence a user list image selector can list one image per user, a limited number of images per user or any number of images per user.

Most Wanted

Continuing with our mugshot theme, your site could present a most wanted page. Create a user group for most wanted and filter on that group in a User List image selector. Adding or removing users from that group now automatically adds their mugshots to the most wanted list.

Here you probably want to differentiate between the individuals listed, so adding their name to the information overlay becomes more important. Rather than link to a lightbox overlay, the link can be configured to point to the individual profile pages.

Variations

Whilst discussion has been light heartedly about a rogues gallery, the same principle can be used to generate and manage any kind of user-related list of images. More conventional applications would be galleries of company directors, key staff and employees of the month. 

These are all galleries you could build in a more conventional way, but by building the pages usinga an Omni Gallery listing users it is so much easier to maintain. Set up a User List image source filtering on a directors user group, add a user to the'directors' group and your directors gallery will automatically shows their image and supporting information from user properties and attributes.

The Photo Competition

With our previous uses a deciding factor between an Omni Gallery implementation and a more conventional user list or page list implementation is how important the images are. Is the list primarily about the images, or primarily about other information supported by the images?

Suppose you are running a photography competition. Here we have an application that is completely about the images. Having registered, each user (competition entrant) uploads their entries to image attributes associated with the user. Those attributes are displayed on their profile page with a Selected User image selector.

A page for a collection of entries can then have an Omni Gallery with a User List image selector, though take care here to keep control of the overall volume of images.

As the competition progresses, users can be added to a finalists group and their entries automatically filtered to be shown on a finalists page, just by copying the Omni Gallery settings and changing the group the user list image selector filters on to finalists.

With the winners chosen, individual Selected User image selectors can then be used to build a page showing winner, runner up and bronze.

Getting Started with Selected User and User List image selectors

This site doesn't have multiple users or public profiles, so we can't show any complete examples. The easiest way to get started is to pick an example with a Display Widget that is close to your use then change the Image Selector to a Selected User or User List.

  1. On this site find an example similar to what you require, click the View settings button, copy the settings JSON.
  2. On your page, add an Omni Gallery block. On the Support tab click the button to Import settings, paste the settings JSON and import.
  3. On the advanced tab, clear the radio button that enables the export button with the gallery. You probably don't want to show that on the front end of your site!
  4. Edit the settings to what you require. Most importantly, in the Image Selection tab, change the selector to Selected User or User List, check image attributes and select properties and attributes for Link URL, Name and Description.

If you need to present a similar gallery on other pages, you can use the settings tab to Export the settings and Import them on a new Omni Gallery block, or even import them to the default settings for all Omni Gallery blocks.

You can even use this Export/Import of JSON settings to copy gallery designs between sites. Though take care to make sure filesets and folders are adjusted as per (4) above.