Display Widgets

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 ]

Display Widgets Plugins

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.

[ Omni Gallery ]

Core Image Slider

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 alternate block templates. Nevertheless, we cannot guarantee that all third party block templates for the image slider will be fully compatible with all Omni Galley settings provided by this display widget. Please test the use of any alternate template thoroughly.

[ Omni Gallery ]

Core Page List

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 and alternate block templates such as the thumbnail grid. Nevertheless, we cannot guarantee that all third party block templates for the page list will be fully compatible with all Omni Galley settings provided by this display widget. Please test the use of any alternate template thoroughly.

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.

[ Omni Gallery ]

Glider

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:

  • Picture element with responsive source set
  • CSS background image
  • Regular image element
  • Image using resized thumbnail
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:
  • None - no resizing
  • Cover - scaled and cropped to fill the available area
  • 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
Each image element has two levels of configurable background and border, enabling (for example) images to be formatted with a border and background to look like film slides.

Images can be linked to a lightbox overlay, to other pages or to URLs

[ Omni Gallery ]

Information List

A list of file information.

A simple list of file information, often useful when developing Image Selectors or as a starting point for new Display Widgets.

[ Omni Gallery ]

Swiper

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 spead of images across the window which slide or fade, Swiper provides animations for coverflow, cube and flip 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:

  • Picture element with responsive source set
  • CSS background image
  • Regular image element
  • Image using resized thumbnail
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:
  • None - no resizing
  • Cover - scaled and cropped to fill the available area
  • 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
Each image element has two levels of configurable background and border, enabling (for example) images to be formatted with a border and background to look like film slides.

Images can be linked to a lightbox overlay, to other pages or to URLs

[ Omni Gallery ]

Thumbnail Grid

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:

  • Picture element with responsive source set
  • CSS background image
  • Regular image element
  • Image using resized thumbnail
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:
  • None - no resizing
  • Cover - scaled and cropped to fill the available area
  • 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
Each image element has two levels of configurable background and border, enabling (for example) images to be formatted with a border and background to look like film slides.

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. Thus display of a large list of images can be divided into a number of pages.

Images can be linked to a lightbox overlay, to other pages or to URLs