Questions & Problem Solving

Answers to questions and solving problems with Omni Gallery.

Why provide multiple slider and gallery widgets?

What is the point of providing multiple sliders and multiple galleries in one package, surely any site will only need one of each?

With all these display widgets available, we don't think any site should try and use them all. The only reason we use them all in the examples here is so you can see them, compare them, and copy example configurations to use on tour own sites.

Some of our display widgets are similar, or at least are capable of being configured to look similar. But they can also be configured to behave very differently. Different arrangements. Different navigation. Different transitions. Different interactions and different degrees of theme integration.

Consider the hassle and expense of working through a number of different addons looking for the one you like. Each needs to be installed, configured to show the images you want with the information overlay you need. Then you can finally evaluate what it actually looks like. Then you repeat the entire process for the next addon. Then once you have found what looks best for your site you need to clear up the debris from all the unwanted sliders and galleries that didn't quite make the grade.

With Omni Gallery you only install one addon. You only configure one addon to show the images you want and the information you need. Then you can quickly swap between display widgets to find the slider and gallery that looks right on your site.

Having found what looks right for you, as well as images listed from the file manager you can re use the same display widgets with different image sources to show galleries or sliders of page lists, user lists, calendar events, express objects, store products and more. Omni Gallery solves many more functional problems than simply picking images to show.

Using theme CSS

Omni Gallery provides many options for generating gallery styles. These are normally generated for each specific gallery block and injected into the page header as <style> elements.

If you would rather build such styling into a custom theme, output of Omni Gallery generated styles can be suppressed by selecting Suppress style output in the Advanced tab of the edit dialog.

A useful trick may be to initially use Omni Gallery to generate the styles, capture them from the page, then copy and edit the stles into your theme, removing block instance specific selectors.

Suppress style output is an all or nothing setting. Once selected, you will need to provide all styling through your theme css.

Can I have a different Description in the Lightbox?

With v1.2.0, Omni Gallery supports two description groups in Image Selectors.

  1. Description
  2. Extended Description

Each of these descriptions can be configured independently in the Image Selector and then selected independently in the Display Widget and Lightbox. For example, use Description in the Display Widget and Extended Description in the Lightbox. Or use Description in the Display Widget and both Description and Extended Description in the Lightbox.

Lightbox is not showing

Showing a lightbox overlay requires 2 complimentary settings

  1. A Lighbox Overlay is selected. ie., Magnific, not None.
  2. Images in the gallery link to an image. In most cases this is a matter of setting Link to in Image Selection and selecting Image URL, though other image properties or attributes may also be used to create a link to an image.

Gallery takes a long time to load

The usual loading problems for any gallery block are caused by inappropriate selection of image sizes and the elements used to display images. In general, make sure images uploaded are big enough for your purposes and no bigger.

Within Omni Gallery, there are some further settings you can take advantage of to optimise the galleries and sliders generated.

In Image Display and Lighbox, select an appropriate image element. For example, a picture element with source set and optimal selection of thumbnail types will usually be better for a site that has mixed mobile and desktop view.

If you anticipate the Lightbox being used a lot, it can sometimes be better to select image elements and sizes appropriate to Lightbox within Image Display, so reducing diversification of files loaded.

In the Advanced settings, experiment with Lazy Loading settings.

In Image Selection, slow loading could be the consequence of prefetching large lists of images. Using an Infinite Dynamic variant of an Image Source will limit the images prefetched to those needed for the current Pagination in Image Display.

 

Gallery doesn't show or shows empty

If a gallery or slider does not show or is showing but empty, the most likely reason is that there are no images in it!

That situation is easy to detect when listing a fileset or folder, but a little more complex when creating a gallery from page or user lists. With a page or user list, Omni Gallery lists images for the pages or users from their attributes. Attributes for Associated Images are selected in the edit dialog based on their association with the page or user object - not on their actually pointing to image files. Hence it is entirely possible to have a page or user with no associated images, and that page or user is then omitted from the gallery.

If that situation applies to all pages or users listed, the gallery will be empty.

If you want items without associated images to show in the Omni Gallery display, the image source may have an option for a default image.

Page or User listed multiple times or missing from a gallery

This is related to the above consideration for galleries built from images associated with pages or users.

The point to always remember is that Omni Gallery works with images. Anything else as a source is merely an indirect means of listing images. Hence a gallery built from a page list where a page provides 3 images will list 3 images, and while the image attributes will be different, the page attributes associated with each of those 3 images will be identical.

Related to this, Omni Gallery can be configured to only show an image once. Continuing with our page list scenario, if 3 pages have the same thumbnail image and that is the only image for those pages, with this option set only one copy of the image will be shown in the gallery with only one of the pages. The other 2 pages would then be superfluous.

When a page or user does not have associated images, you can force the Omni Gallery image source to list it by specifying a default image.

Gallery of File Folder image source not showing for Guests

An Omni Gallery listing a File Manager Folder image source could show images for logged in users, but not for visitors/guests. This arises as a quirk of file folder listing. The concrete core permissions when listing are combined from both the permission to view the individual file - which is what you would expect; and permission to search the folder - which is not what you would expect.

A consequence is that even though a visitor has permission to view a file, when a folder is searched they won't see the file because they don't have permission to search the folder the file is in!

There are two possible solutions

  1. Change permissions of the folder to allow searching by Guest.
  2. Check the Omni Gallery option to ignore permissions.

Both of these could have unanticipated consequences, either allowing further searching that is not intended, or a gallery showing files that are not supposed to be visible to guests. Take care over which permissions you configure when using a folder image source.

Whoops after sorting File Folder A-Z

One of the options on sorting a list of images sourced from a file folder is A-Z. 

Behind the scenes, the A-Z list also picks up sort options from the dashboard file manager advanced search/sort. That is built into the way file folder listing works within some concrete CMS versions.

The consequence is that sometimes a folder image source sorter A-Z or Z-A will whoops and show an error screen about incompatible options in a MySQL database query. This arises from the dashboard advanced search and saved search settings. Those settings don't actually change what is listed by Omni Gallery, but they do result in the file folder list using a more complex than needed query and hence run into the conditions that cause the whoops.

The immediate solution to try is to go to the dashboard file manager and remove any saved advanced searches. That alone may be enough to enable A-Z sorting of folders to work again!

If that doesn't work out, if you can get the page with the Omni gallery into edit mode, you can cancel the A-Z sort, delete and re-create a block or revert the page version. From v.9.0.0, Omni Gallery also has a Panic Mode option. This is a configuration option you need to set manually at application/config/generated_overrides/jl_omni_gallery.php. When the key 'panic_mode' is set to true all Omni Gallery blocks on a site will show the edit mode marker. This will allow you to get pages into edit mode and make changes. Remember to reset 'panic_mode' to false afterwards! 

Since version 9.0.0 Omni Gallery also provides options for Additional Sort on any attribute or property, including the image title and image name. These options are only available for some image sources, including Folder List Dynamic/Static (but not infinite). When selected, additional sorting is applied to intermediary lists of images before display and after images have been listed and paginated. If used with pagination you will get sorting within a page of images, but not across pages.

Can I configure Omni Gallery to get images from a 3rd party attribute?

When building galleries from list of pages, users, calendar events, express entries or products, Omni Gallery retrieves images from their attributes. Omni Gallery is already configured to work with a selection of core and 3rd party attributes and will automatically detect them where installed to a site.

Currently supported attribute types for images are:

If you have another image selecting or listing attribute type installed, you can configure Omni Gallery to use it by editing the config file at /application/config/jl_omni_gallery.php. Details are provided at Attribute Sources.

How do I make a slider fill the width of a page?

What we are looking at here is often called a Hero Slider. There are essentially three aspects to achieving a full width slider or gallery:

  1. A theme that provides a full width template.
  2. A theme framework that manages width using a grid container (such as Bootstrap or Foundation).
  3. Using the block design option to Disable the grid container.

Other considerations such as managing the height of the slider and position of information overlay are discussed in the notes for creating a Hero Slider.

How do I make a slider fill the height of a page?

Filling the height of the page is often associated with filling the width of the page, so we have a full page hero slider.

If what you really require is for the slider to be the background for the entire page, first consider Full Page Background with Vegas.

However, when you actually need a slider with information overlays for each slide, you can simply add a slider, full width or otherwise, and set the image height to 100vh. The vh units are a percentage of the viewport height. So 100vh is translated to 100% of the height of the viewport.

Can an overlay scroll?

Suppose you have a Magnific overlay that needs to show a large amount of text. That works OK on a large screen, but on a smaller screen it gets truncated by the bottom of the modal. You need a vertical scroll bar.

The trick is to set the position bottom of the overlay to none/ignore and the height to either Auto or a big number. The position of the overlay is now governed by its position top and, where necessary, extends down from the window. The entire overlay will now show a vertical scroll bar.

You can use this with any variation of left, right, and top position for the overlay. As long as you don't set a bottom position, it can extend down below the window and the entire overlay will scroll vertically where necessary.

 

JavaScript Interference

If a gallery does not work, it could be that something is interfering with the gallery display widget's JavaScript. Galleries attach themselves to DOM elements. A typical problem scenario is that after a gallery has attached itself, something else manipulates the DOM and breaks that attachment. 

The solution is to manipulate the order in which the scripts initialise, so that the gallery display widget initialises after the interfering JavaScript has finished messing with the DOM, or to forcibly re-initialise the gallery display widget after the DOM messing has completed. This is a bit too complicated to provide a generic solution. If you need help, please contact me for support and we can discuss your problem and possible solutions.

Another scenario is an over-enthusiastic smooth scroll script hijacking controls in the gallery display widget. Here the solution is easier, just make the smooth scroll less greedy about what it selects.

The opposite is also possible. In particular, the Vegas display widget manipulates the DOM about the element it is attaching a background to. This can break the attachment of other JavaScripts to elements within that DOM element. Unfortunately the vegas.js is not as well behaved as we would have liked, so it can be neccessary to delay the initialisation of the other JavaScript until after Vegas has finished messing about! 

Artifacts and distortions during image transitions

What we mean here are things like visual ripples or tearing as one slide transitions to another. Transitions in any slider or gallery are managed by creating a rendered object for the next slide, then transitioning out the existing slide while transitioning in the next slide. This can involve CSS transitions or discrete movements in JavaScript, but underneath it all the underlaying mechanism is the processor or graphics card shuffling bytes about until the new slide is in place and the old slide is out of view.

With that underlaying constraint in mind, such transition artifacts are usually a sign of the browser rendering engine or device graphics hardware not being able to keep up with what is going on. The more bytes that need to be shuffled, the harder the browser and hardware will be working. Hence small sliders rarely show artifacts, whilst big sliders are more likely to show artifacts.

If you are seeing unwanted artifacts in your image transitions, what can you do about it?

  1. View your site on different browsers and hardware. Do the artifacts noticeably change between devices?
  2. Experiment with the different Lazy Load options (including None) on the Advanced tab.
  3. At the top of the Image Display tab is an option for the Preferred image element used. [picture / background / simple image / image using thumbnails] Experiment with different image elements.
  4. Experiment with different transitions such as fade. When images do not slide they cannot tear, hence why so many sites with big hero sliders use a fade between images. 
  5. Experiment with transitions that deliberately distort (such as coverflow or cube in Swiper). The distorting effect will mask the perception or ripple and tear artifacts.
  6. Experiment with making the transitions faster. This is somewhat counter-intuitive. Will making everything faster make the browser and processor work harder? Not necessarily, because graphics works at a frame rate, so transitions are fitted into so many frames per second. Meanwhile faster transition can actually look better because any artifacts are less visually perceptible to us humans.
  7. Also experiment with making transitions slower. At some point a transition is slow enough that movement between frames is visually so small that artifacts are not perceptible.
  8. Experiment with increasing, reducing or disabling any parallax effects. Parallax is effectively an additional object layer the processing has to move, so can have noticeable effect on some devices.
  9. Experiment with different image compression, formats (jpeg vs png) and sizes.
  10. Experiment with different Image Display widgets. This is a big advantage of Omni Gallery that isn't available with other slider and gallery addons. 
  11. The Vegas background Image Display includes overlay masks whose primary purpose is to visually distract from image and transition artifacts.
  12. When experimenting with transition speed and image sizes, The maths involved in the hardware may also have sweet spots and rough spots for particular speeds vs image sizes, but...
  13. Any solution needs to be tested at various screen sizes and different devices. What looks good for one browser at one screen size on one PC will not necessarily look good on another. 

While experimenting, you can record current settings using the Export button on the Support tab, so you can always get back to or replicate a previous slider independently of page versions.

Setting "Replace with marker in edit mode" to "Off" makes no difference

In the Advanced tab of the edit dialog, Replace with marker in edit mode will normally decide whether the Omni Gallery block shows as an edit mode placeholder or a static view of the gallery or slider.

However, some display widgets are unable to partially render in edit mode. Those widgets will always replace with a marker and ignore this setting.

For example, trying to display a Vegas background in edit mode would interfere with the concrete5 editing process. Similarly, the Swiper JavaScript is just too complex to run in edit mode.

Omin Gallery or Universal Content Puller?

There is some overlap between the capabilities of Omni Gallery and Universal Content Puller. Both can create lists of things and display them.

  • Omni Gallery creates lists of images and displays them in ways optimised for images.
  • Universal Content Puller can create lists from pretty much anything, but the displays are optimised for lists and tables. These lists and tables may contain images, but they are not galleries or sliders.

The Elements selector in Omni Gallery Elements shows too many elements

Omni Gallery Elements searches for elements in all packages and in /application/elements. It then filters out some packages and elements and highlights elements declared as compatible because they are in an /omni_gallery_elements/ subdirectory.

You can set some configuration lists in /application/config to customize what gets filtered on your site, see Fine Tuning the Element Selector.

Panic Mode

From v.9.0.0, Omni Gallery has a Panic Mode configuration option. This is a configuration option you need to set manually by editing the file application/config/generated_overrides/jl_omni_gallery.php.

When the key 'panic_mode' is set to true all Omni Gallery blocks on a site will show the edit mode marker. This will allow you to get pages into edit mode and make changes such as reverting a page version or adjusting anything that is causing an Omni Gallery block to whoops the page.

Remember to reset 'panic_mode' to false afterwards! 

Whoops on install

What we mean here is an internal code exception in an addon or the core when you click the install button from the Add Functionality dashboard page or when you visit a page after installing an addon package. 

If you experience such an issue, here are a few things you can check that may resolve the problem.

  1. Php Version. Check your php version is compatible with the addon, For example, check if you are running php5.6 when an addon requires php7+. You can find the php version in the report at /dashboard/system/environment/info. As a general guide, if your site is ConcreteCMS version 8+ then aim to run on at least php7.2. (It will run on lower versions, but less efficiently)
  2. Database Entities. ConcreteCMS uses a database abstraction layer called Doctrine. Doctrine works by creating proxy classes that map between php data and the database and sometimes these get out of step or muddled into a chicken and egg dilemma. The dashboard page at /dashboard/system/environment/entities has a switch to control when the proxy classes are regenerated. Try placing this into Development mode when installing an addon package (but remember to disable development mode to speed up a live site)
  3. Cache. ConcreteCMS makes extensive use of a number of different caching mechanisms to speed up web pages. When installing a package, sometimes outdated cached data causes issues with the install. Try disabling all the caches at /dashboard/system/optimization/cache when installing an addon package (but remember to re-enable the caches for a live site).
  4. Theme. Most marketplace themes are well behaved. Nevertheless, sometimes a theme can interfere with an addon package, so try switching the site theme back to Atomik using /dashboard/pages/themes. You won't loose any content on the front of your site, but some page areas may not be shown until you swap back to your theme.
  5. Middleware. Some addons implement middleware layers that manipulate pages before and/or after the main rendering of each page. If such addons are installed, there is a possibly they could interfere with the dashboard and other addon installation. Most such middleware implementations include condition checks to ensure they don't mess with the dashboard, but perhaps you can switch them temporarily off just to be sure.

If you experience a code error on or immediately after install and need assistance, please use the Get Help link from the addon marketplace page to report the problem. On the Whoops report, click the [copy] button immediately below the error message. That will provide a stack trace you can paste into the help request and save time having to request that report later.

Cache path exceeds...

A windows system can throw an exception about cache path length. The full message will be something like "Cache path exceeds Windows PHP MAX_LENGTH of 260 characters" and the name of the exception is WindowsPathMaxLengthException.

This arises as a combination of ConcreteCMS and php internal issues. From JtFResources v2.19.32 we have a work-round for this by introducing the configuration value max_key_length in the file application/config/generated_overrides/jtf_resources.php. On windows, this will be automatically set to a value suitable for most windows installations.

If you experience the above exception:

  1. Check the version of JtFResources is v2.19.32. If not, update this addon.
  2. Check the value of max_key_length. It may not be configured for your installation if it has been copied from another site.
  3. Reduce the value of max_key_length until you cease experiencing the WindowsPathMaxLengthException.

In general, keep the value of max_key_length as high as practical for your installation. The ConcreteCMS core applies a hashing algorithm to all cache keys and a longer value for max_key_length reduces the (already extremely small) probability of cache key collisions.

Manually Installing or Updating an Addon or Theme

Perhaps you are unable to connect your site directly to the ConcreteCMS marketplace to install an addon or theme. This manual process works for all addons and themes - not just mine.

  1. In your concrete account, find the addon/theme in your Purchase History > Licenses and download. Make sure to scroll down to the most recent version before downloading.
  2. Then copy the zip to your site /packages/ directory and unzip (not /concrete/packages !!!). This is usually easiest using your host cPanel file manager.
  3. In your site, visit the Dashboard > Extend page and the theme package will be ready to install or update

The process is exactly the same for addons and themes, except themes have an extra step of activating the theme after installing.

Sometimes step 3 above can run out of PHP execution time. This is most likely when installing an addon or theme that installs a large amount of sample content. You should not run into such an issue with any of my addons or themes.

If you do run into such issues, you can run the install manually from the shell command line.

$ concrete/bin/concrete5 c5:package-install my_package_handle

or

$ concrete/bin/concrete5 c5:package-update my_package_handle

When updating, be sure to replace the previously installed package directory rather than adding to it. If not, you could end up accumulating obsolete debris from a previous version of the package.

If you find yourself needing to install or update many addons or themes manually, consider my Package Magic addon.

Once Package Magic Starter is installed, through the marketplace or manually, all further installs can be handled from the site dashboard using Package Magic.

Easy Setup

  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 a block. On the Support tab click the button to Import settings, paste the settings JSON and import,
  3. Edit the settings to what you require. 

Most sites have just one, or maybe a few, gallery and slider formats. So once you have your gallery and slider formats configured, you can do similar for all galleries and sliders within your site. See Simplifying Omni Gallery.