Simple Examples of Display Widgets
As an overview of Omni Gallery's capabilities, this page shows each of the display widgets for the same set of 6 images. Further example pages then go on to look at the finer details of some of the display widgets.
For all of these examples, the image title is taken straight from the file manager. The decription is assembled from the description and image dimensions, again straight from the file manager. Any other file property or attribute or even embedded exif data could be selected. An optional link is the image URL, as required for a lightbox overlay. The text and background colours for all information and lightbox overlays is configured to white on an opaque grey.
The images are selected as a fileset. These could just as easily have been selected as a file manager folder or picked as individual images, or assembled from images associated with a User, Page or Community Store Product, or lists of those!
For these examples, all images link to a lightbox overlay. That is not compulsory. You can just as easily have no link, no overlay or even link to another page or URL taken from an image attribute.
All the examples below have a smallbutton to the top right, where you can view the block settings as JSON data and even copy them to paste into your own Omni Gallery blocks as a starting point. To import, use the button in the Support tab of the block edit dialog.
The information list display widget is a simple text/list dump of the images that would be shown in the Omni Gallery (so its not really a gallery or slider). It can come in useful as a diagnostic when working with Image Selectors - use it to see what will be in a gallery or slider without getting distracted with how it is displayed, then swap to the real display widget once you have the list worked out.
Houseshttps://c5magic.co.uk/application/files/1215/2787/3630/houses.jpgHouses on a hillside.
1499px x 1067px
Bridgehttps://c5magic.co.uk/application/files/6115/2787/3631/bridge.jpgThe iconic Golden Gate.
1600px x 1067px
Shoeshttps://c5magic.co.uk/application/files/4615/2787/3632/shoes.jpgIn these shoes? Kirsty MacColl would have approved.
1600px x 1067px
Plantshttps://c5magic.co.uk/application/files/1234/1234/5678/plants.jpgIn amongst the bushes.
1600px x 1066px
Subwayhttps://c5magic.co.uk/application/files/9315/2787/3632/subway.jpgIn London its the Underground or the Tube. In Europe it is the Metro.
1600px x 1067px
Sunsethttps://c5magic.co.uk/application/files/4715/2787/3633/sunset.jpgSunset in the city.
1600px x 953px
Core Image Slider
The core image slider block fronts for a more capable slider implementation than the edit dialog would suggest. This display widget uses the block template from the core image slider to show images and properties selected by Omni Gallery with a few extra display options incorporated.You have complete control over the information overlay content and position. You are not limited to the core block's image picker. With Onmi Gallery and this display widget you can use the same slider with filesets, folders or even system directories of images.
If you have alternate templates for the core image slider block, perhaps provided by your theme, you can select from them within this display widget.
You do need to be careful when preparing images for use with the core image slider. Its fixed aspect ratio and crop from top left can leave some images awkwardly cropped, like the bridge in this example. On a real site you would have uploaded images already cropped to fit your design.
HousesHouses on a hillside.
1499px x 1067px.
BridgeThe iconic Golden Gate.
1600px x 1067px.
ShoesIn these shoes? Kirsty MacColl would have approved.
1600px x 1067px.
PlantsIn amongst the bushes.
1600px x 1066px.
SubwayIn London its the Underground or the Tube. In Europe it is the Metro.
1600px x 1067px.
SunsetSunset in the city.
1600px x 953px.
Core Page List
While on the subject of core blocks, our next display widget for Omni Gallery uses templates from the core page list block. The main page list view template is not very interesting. But the alternate thumbnail grid template is a nice overview for a gallery when used with a lightbox.
You can use any page list template to display images without needing to list any pages! Omni Gallery image selectors are used to select images, these images are then injected into the page list template.
If you want to take this further, you could add page select attributes to the files and use those to link to other pages - a fileset or file folder could become a navigation element!
Glider is a simple and lightweight image slider, capable of displaying a single image or multiple images as a carousel. In this example it has been configured to show the same information as above, with the nice touch of responsive breakpoints so it toggles between showing 1 and 3 images depending on page width. As with pretty much anything in Omni Gallery, this is fully configurable. You can have any number of breakpoints showing different numbers of images.
The other capability this display widget introduces is a choice of how images are displayed. For displaying images you can choose any of:
- Picture element with responsive source set (as used in our examples)
- CSS background image
- Regular image element
- Image using resized thumbnail
Within each of those, image sizing and cropping can be any of:
- None - no resizing
- Cover - scaled and cropped to fill the available area (as used in our examples)
- Contain - scaled down to fit available width or height
- Fill - scaled by both width and height to fill without respect for the original aspect ratio
- Scale Down - as per contain, but never scaled up
Another general capability of many of Omni Gallery's display widgets is to set the height of the images. Any height unit can be used, with the advantage that when a %percentage is used, that fixes the aspect ratio. As all the images in the set used here are landscape, a fixed aspect ratio of 66% works well with a responsive page.
Swiper is a more complex image slider, again capable of displaying a single image or multiple images as a carousel or an infinite carousel. We could have shown 3 images at a time, but that would have looked like Glider above. In this example we have Swiper configured to show 1 image in an infinite carousel looping round our selected fileset. (We could also have done the opposite, and configured Glider to show 1 imnage at a time rather than 3).
Again the image element is selected as a full picture element and sized to cover the element to keep all images the same size.
Swiper has some other neat display modes, so we will show it again with a different display modes below.
Our next example is again using Swiper, this time using the coverflow animation. The animation speed and duration has been deliberately set slightly differently so the two sliders can be seen to be independant. The effects available are:
- Slide (shown above)
- Coverflow (shown below)
When considering an effect, you also need to think about the number of images. For example, fade can be a little bit weird with more than one image. Coverflow works best with 3 images, or at least with an odd number. There are so many variations possible that we have another example page dedicated to Swiper Variations.
The Thumbnail Grid display widget provided by Omni Gallery is a fairly standard grid, but with all of the configuration of Omni Gallery available. The grid can be configured to show responsive numbers of images in a row depending on screen size.
As with Glider and Swiper, you have full control of the image element used and how images are fitted into it. In our example below we use a picture and cover again.
Whilst the imformation overlay with most previous display widgets is fixed, with the information overlay with the thumbnail grid display widget can be permanent or show on hover, with a range of animations available:
- Slide from left
- Slide from right (as used in our second example below)
- Slide down
- Slide up
- Fade in
- Flip image hodizontal
- Flip image vertical
- Flip overlay horizontal
- Flip overlay vertical (as used below)
In addition to selectying the type of image element used, we also have control over 2 levels of wrapper and background. Here these have been used to with the same Thumbnail Grid to wrap the images in frames that look a little like 35mm film slides. We also have changed the grid to be 6 in a row on large displays, with 3 on medium displays and 1 on small displays.
Its not just the Thumbnail Grid that provides this degree of control from the edit dialog. The Glider and Swiper display widgets have similar capabilities.
Thumbnail Grid is also a good choice to configure with pagination to show absolutely massive galleries.