Display Widget plugins determine how Omni Gallery displays selected images. You can see examples of many of these in action at Simple Examples of Display Widgets.
Omni Gallery can use a range of display widgets to display images.
Functionality can be extended by adding plugin classes for additional Display Widgets. Display Widgets plugins are simple classes that provide the functionality to display a list of images, suach as in a gallery or slider. They should inherit from DisplayWidgetPluginBase. Details are provided by comments in the code.
A vertical background scroller.
Shows a vertical scroller of background images with options for scrolling or fixed background attachment.
An optional information overlay shows name and/or description provided by the image selector with overlay position, padding, text colour, background colour and transparency fully configurable.
Element height can be set using any css unit. When a %percentage is used this fixes the aspect ratio and is hence ideal for responsive display. Further inputs set responsive breakpoints for the number of elements in a row.
Image sizing and cropping may be selected from:
Slider using the Bootstrap Carousel component.
Adapts Omni Gallery to display using the Bootstrap Carousel component.
Boostrap Carousel is a lightweight and responsive slider using a component of the Bootstrap grid framework. To use the Boostrap Carousel display widget the site theme or page theme needs to be Bootstrap 5+ and to include the carousel component within the theme's build of Bootstrap.
An optional information overlay shows name and/or description provided by the image selector with overlay position, padding, text colour, background colour and transparency fully configurable.
For displaying images you can choose any of:
Display thumbnails and information as cards in a grid.
Thumbnails, names, details and link buttons laid out in cards, all nicely aligned in a grid. Options range from simple image display through to fully responsive picture elements with retina support. Column breakpoints can be set for each theme breakpoint.
Items shown on each card are the image, heading, description and a button to link. All but the image can be enabled individually.
For displaying images you can choose any of:
An image gallery as with the core image gallery block.
This display widget interfaces to the block view and templates for the core Image Gallery block, but using images selected using Omni Gallery Image Selectors and provides greater flexibility for how the image information is displayed.
The core Image Gallery provides its own lightbox. Any lightbox option configured within Omni Gallery will be ignored. The core Image Gallery does not use Omni Gallery lazy load options.
When a pagination value is set, display will be limited to that number of images at a time and a pagination control shown above or below the display widget to show the previous or next page of images. Further pagination options depend on the image selector.
IMPORTANT: this display widget requires an Image Selector that uses the core file manager.
This display widget is compatible with the default template for the core Image Gallery and many alternate templates. Nevertheless, we cannot guarantee that all block templates for the Image Gallery will be fully compatible with Omni Galley. Please test the use of any alternate template thoroughly and be prepared to revert page versions in the dashboard sitemap if a template breaks fatally.
An image slider as with the core image slider block.
This display widget interfaces to the block view and templates for the core Image Slider block, but using images selected using Omni Gallery Image Selectors and provides greater flexibility for how the slides are formatted.
When a pagination value is set, display will be limited to that number of images at a time and a pagination control shown above or below the display widget to show the previous or next page of images. Further pagination options depend on the image selector.
IMPORTANT: this display widget requires an Image Selector that uses the core file manager.
This display widget is compatible with the default template for the core Image Slider and many alternate templates. Nevertheless, we cannot guarantee that all block templates for the Image Slider will be fully compatible with Omni Galley. Please test the use of any alternate template thoroughly and be prepared to revert page versions in the dashboard sitemap if a template breaks fatally.
Images, text and links as with the core Page List block.
Presents a list of images with associated titles, descriptions and links as if it were using the core Page List block view or a Page List view template, except it is Omni Gallery images being listed. It works particularly nicely with the thumbnail grid template.
When a pagination value is set, display will be limited to that number of images at a time and a pagination control shown above or below the display widget to show the previous or next page of images. Further pagination options depend on the image selector.
This display widget is compatible with the default template for the core Page List block and many alternate templates such as the thumbnail grid. Nevertheless, we cannot guarantee that all block templates for the Page List will be fully compatible with Omni Galley. Please test the use of any alternate template thoroughly and be prepared to revert page versions in the dashboard sitemap if a template breaks fatally.
Also beware that it is only the block view that is being rendered. This display widget will not integrate with filtering blocks such as Topic List or Date Navigation as a Page List can.
Slider using the Cycle2 JavaScript widget.
Adapts Omni Gallery to display using the Cycle2 JavaScript widget.
Cycle2 is an older slider with some unique transition options. In addition to a conventional slider of images which slide or fade, Cycle2 provides animations for tile, blind and flip effect transitions between images.
An optional information overlay shows name and/or description provided by the image selector with overlay position, padding, text colour, background colour and transparency fully configurable.
For displaying images you can choose any of:
Slider using the Glider JavaScript widget.
Adapts Omni Gallery to display using the Glider JavaScript widget.
Glider is a fast, lightweight and responsive slider that can show single or multiple images. Unlike a strict carousel Glider doesn't infinitely loop, but can be set to rewind when it reaches the end. This enables glider to use native scrolling while still providing the basic functionality.
An optional information overlay shows name and/or description provided by the image selector with overlay position, padding, text colour, background colour and transparency fully configurable.
For displaying images you can choose any of:
A list of file information.
A simple list of image file information, often useful when developing Image Selectors or as a starting point for new Display Widgets. This is deliberately as simple as possible while remaining useful as a diagnostic. Image links remain direct links - this display widget does not show a lightbox overlay.
Display thumbnails and information as cards in a masonry layout.
Thumbnails with names and details arranged using a Masonry layout. Options range from simple image display through to fully responsive picture elements with retina support. Column breakpoints can be set for each theme breakpoint.
Masonry provides a tiled view of images of dissimilar sizes and aspect ratios. In its purest form, this can result in many discontinuities in the tiled effect unless image sizes are carefully configured. To mitigate such discontinuity in layout, this implementation is based on configurable aspect ratios for portrait, landscape and square images, with images contained or covered within those sizes. Images are scaled to a common width across all aspect ratios. The width of hero images is increased by a configured percentage.
Hero images are identified by any or all of:
Carousel or slider using the Owl JavaScript widget.
Adapts Omni Gallery to display using the Owl JavaScript widget.
Owl is highly configurable touch compatible carousel and slider using CSS transitions.
An optional information overlay shows name and/or description provided by the image selector with overlay position, padding, text colour, background colour and transparency fully configurable.
For displaying images you can choose any of:
Slider using the Swiper JavaScript widget.
Adapts Omni Gallery to display using the Swiper JavaScript widget.
Swiper is a fully responsive touch compatible slider and carousel using CSS transitions. In addition to a conventional spread of images across the window which slide or fade, Swiper provides animations for coverflow, cube, flip and cards transitions between images.
An optional information overlay shows name and/or description provided by the image selector with overlay position, padding, text colour, background colour and transparency fully configurable.
For displaying images you can choose any of:
Thumbnails listed in a grid.
A list of thumbnails, names and details, all nicely aligned in a grid. Options range from simple image display through to fully responsive picture elements with retina support. Column breakpoints can be set for each theme breakpoint.
An optional information overlay shows name and/or description provided by the image selector with overlay position, padding, text colour, background colour and transparency fully configurable. The information overlay can be fixed or configured to show on hover with animations including fade, slide in, flip and spiral/grow.
For displaying images you can choose any of:
Background slider using the Vegas JavaScript widget.
Adapts Omni Gallery to display a background slider using the Vegas JavaScript widget.
Vegas creates a slideshow as a background to another block, area or to the entire page. As such, images are only rendered as background elements and there are no links, information overlay or lightbox. Furthermore, there are no pagination options, bullets or arrows. The show just continues to play as configured.
Vegas does a remarkably good job of hiding compression artefacts when upscaling images smaller than the display by using an overlay pattern.
Themes may set backgrounds and borders that prevent the Vegas images from showing. As a consequence, styles may be necessary to override theme backgrounds and/or borders with transparency. If only transparency is needed, this can be done within the display widget by listing selectors for application of transparent backgrounds and borders. If more complex opacity is required, styles should be provided by theme CSS or with header extra content attributes.
To lift text or other content from the background images, background colour, borders and padding should be added to blocks or areas using Block Design or Area Design.
Slide transitions may be selected between:
Slider using the Glider JavaScript widget to display a selected element.
An adaptation of the Glider display widget where each slide is rendered using a concrete5 element.
Glider is a fast, lightweight and responsive slider that can show single or multiple images. Unlike a strict carousel Glider doesn't infinitely loop, but can be set to rewind when it reaches the end. This enables glider to use native scrolling while still providing the basic functionality.
Data for each image is passed to a concrete5 element. Whilst Omni Gallery Elements provides some basic elements, these are mainly for demonstration purposes. It is up to you, as a site developer, to code your own element to format images and information and then select your element in the edit dialog. Omni Gallery will then use your element to build the Element Glider display.
Slider using the Glider display widget to display an element in a box.
The Element Glider display widget is extended to render each element into a sized box.
An adaptation of the Glider display widget where each slide is rendered using a concrete5 element.
Glider is a fast, lightweight and responsive slider that can show single or multiple images. Unlike a strict carousel Glider doesn't infinitely loop, but can be set to rewind when it reaches the end. This enables glider to use native scrolling while still providing the basic functionality.
Data for each image is passed to a concrete5 element. Whilst Omni Gallery Elements provides some basic elements, these are mainly for demonstration purposes. It is up to you, as a site developer, to code your own element to format images and information and then select your element in the edit dialog. Omni Gallery will then use your element to build the Element Glider Boxed display.
Use an element to render each item in a grid.
An adaptation of the Thumbnail Grid display widget where each item is rendered using a concrete5 element.
For a grid to work, you will need to provide styling so that all your elements have similar height.
Data for each image is passed to a concrete5 element. Whilst Omni Gallery Elements provides some basic elements, these are mainly for demonstration purposes. It is up to you, as a site developer, to code your own element to format images and information and then select your element in the edit dialog. Omni Gallery will then use your element to build the Element Grid display.
Thumbnail Grid to display an element in a box.
The Element Grid display widget is extended to render each element into a sized box.
Data for each image is passed to a concrete5 element. Whilst Omni Gallery Elements provides some basic elements, these are mainly for demonstration purposes. It is up to you, as a site developer, to code your own element to format images and information and then select your element in the edit dialog. Omni Gallery will then use your element to build the Element Grid Boxed display.
Slider using the Swiper JavaScript widget to display a selected element.
An adaptation of the Swiper display widget where each slide is rendered using a concrete5 element.
Swiper is a fully responsive touch compatible slider and carousel using CSS transitions. In addition to a conventional spread of images across the window which slide or fade, Swiper provides animations for coverflow, cube and flip transitions between images.
Data for each image is passed to a concrete5 element. Whilst Omni Gallery Elements provides some basic elements, these are mainly for demonstration purposes. It is up to you, as a site developer, to code your own element to format images and information and then select your element in the edit dialog. Omni Gallery will then use your element to build the Element Swiper display.
Slider using the Swiper display widget to display an element in a box.
The Element Swiper display widget is extended to render each element into a sized box.
An adaptation of the Swiper display widget where each slide is rendered using a concrete5 element.
Swiper is a fully responsive touch compatible slider and carousel using CSS transitions. In addition to a conventional spread of images across the window which slide or fade, Swiper provides animations for coverflow, cube and flip transitions between images.
Data for each image is passed to a concrete5 element. Whilst Omni Gallery Elements provides some basic elements, these are mainly for demonstration purposes. It is up to you, as a site developer, to code your own element to format images and information and then select your element in the edit dialog. Omni Gallery will then use your element to build the Element Swiper Boxed display.