Written by: Aleš Sýkora

The Author of Toolset.wiki. Big fan of Toolset plugins and WordPress.

I am big fan of WordPress and Toolset plugins. I have done many projects based on WordPress. I also have experience with online marketing, PPC advertising and SEO. I live in Czech Budweis – the town of Budweiser Budvar breverage in the south of the Czech Republic – the heart of Europe.

I love skateboarding, snowboarding, frisbee, fitness, healthy lifestyle, tattoos, mountain biking and other sports. I enjoy having time with friends with good beer and good music.

Oxygen Lazy Load Gallery (Working 2020)

Last Update: 08. 04. 2020 , Category:

If you try to figure out why your Oxygen Gallery is not lazy loading like you expect, try this tutorial. Hope it helps you! In my tutorial will be masonry gallery rebuild to 1:1 square gallery, but the layout depends on you. The main thing is changing the rule of loading images and never use Flex gallery.

Many thanks to Alexander Buzmakov from Official Oxygen User Group on facebook who comes with this idea.

Gallery type Masonry vs. Flexbox

Always use Masonry Gallery. If you use the Flex gallery, Oxygen starts to generate images from the gallery as a background for < figure > elements.

Oxygen flex gallery code
Figure with background when using flex gallery in Oxygen
Oxygen gallery settings masonry
Always use Masonry gallery if you need working lazyload

Lazyload plugin which plays well with Oxygen

I tried lot of lazyload solutions – WP Rocket, A3 Lazy Load, Autoptimize lazy load, jQuery.Lazy and others. Best working for me is Flying Images by WP Speed Matters.

I am not using the CDN, so I uncheck everything on other Tabs and just set up this Lazyload settings. I am using Native + JavaScript method. It means if browser have native support for lazyload (from Chrome 76), it will add

loading="lazy"

attribute. If browser do not support it, then javascript is being used. I also dont want to lazyload website logo, so I exclude it.

flying images by WP speed matters settings screen for lazyload
Lazyload settings in Flying Images plugin.

Changing the way Oxygen masonry gallery loads

When you refresh the page now, you will see, that masonry gallery loads column by column. So the lazy load do nothing here, because all images are being loaded automatically. So we need to load the gallery same as flex columns in flex row.

direction of oxygen gallery loading
We need to change loading of Masonry gallery from up-down column by column to left-right row by row.

The CSS

You can play with the CSS to make your own layout. But you will need this definitely for Main gallery container.

.oxy-gallery.oxy-gallery-masonry {
    column-count: auto!important;
    column-gap: 0!important;
    display: flex!important;
    flex-wrap: wrap!important;
}

Gallery item

if you want to make a square images, you need to set up little flexbox hack. Set the width in percentage to set the columns and set the padding-bottom to same percentage. It will make a square layout.

.oxy-gallery.oxy-gallery-masonry .oxy-gallery-item {
    width: 33.33%; /*same*/
    height: 0;
    padding-bottom: 33.33%; /*same*/
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom:0px!important;
}

<Figure>

.oxy-gallery-masonry figure.oxy-gallery-item-contents {
    display: flex;
}

Image

.oxy-gallery-item-contents img {   
    padding: 10px;
    object-fit: cover;
    height: 100%;
    display: flex;
    position: absolute;
    width: 100%;
}

Responsivity

If you want to change the number of columns on mobile or other device, use the @media queries. I set mine to display two columns on mobile.

@media (max-width:768px) {
    .oxy-gallery.oxy-gallery-masonry .oxy-gallery-item {
        width: 50%; /*same*/
        height: 0;
        padding-bottom: 50%; /*same*/
    }
}

You need to put this in your Custom stylesheet and voilá, it works :-).

Complete CSS Code

.oxy-gallery.oxy-gallery-masonry {
    column-count: auto!important;
    column-gap: 0!important;
    display: flex!important;
    flex-wrap: wrap!important;
}
.oxy-gallery.oxy-gallery-masonry .oxy-gallery-item {
    width: 33.33%; /*same*/
    height: 0;
    padding-bottom: 33.33%; /*same*/
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom:0px!important;
}
.oxy-gallery-masonry figure.oxy-gallery-item-contents {
    display: flex;
}
.oxy-gallery-item-contents img {   
    padding: 10px;
    object-fit: cover;
    height: 100%;
    display: flex;
    position: absolute;
    width: 100%;
}
@media (max-width:768px) {
    .oxy-gallery.oxy-gallery-masonry .oxy-gallery-item {
        width: 50%; /*same*/
        height: 0;
        padding-bottom: 50%; /*same*/
    }
}
custom CSS Stylesheets in Oxygen builder for WordPress

Test if oxygen gallery lazy load works in browser

  1. Open chrome developer tools and go to the network tab.
  2. Refresh your page and wait until it loads.
  3. Scroll down and look how it loads new resources with lazyload.
How to check if the Oxygen gallery lazy load works.

Support Us via our Affiliate link!

Toolset logo WordPress

What to do next?

Need a Toolset License?

Buy via affiliate link!

Looking for a tutorial?


Help other users – Add your snippet!


Join the discussion!