Aleš Sýkora wrote

ACF Masonry Left to right ordered Gallery in Oxygen Builder /w Colcade

Would you like to use ACF masonry gallery with left to right flow of images? Good, let’s do that! But at first, why not to use standard Gallery module in Oxygen Builder?

The problem with Oxygen Masonry gallery

The main problem is ordering of images. Standard masonry layout is made by Flexbox columns. So Your image flow is in the columns where images are loaded beneath themselves.

Standard Oxygen Gallery

Column 1Column 2Column 3
Image 1Image 4Image 7
Image 2Image 5Image 8
Image 3Image 6Image 9
Standard Oxygen Masonry Gallery Order

Today I will show you how to use external JS library called Colcade for creation of ACF Masonry gallery which will enable creation of masonry grids.

Colcade Masonry Grid

Column 1Column 2Column 3
Image 1Image 2Image 3
Image 4Image 5Image 6
Image 7Image 8Image 9
Masonry Order with Colcade

1. Import Colcade script

I am using Advanced Scripts for it. You can grab the CDN link on Colcade Site on GitHub I am using this one:

https://unpkg.com/[email protected]/colcade.js
Importing Colcade script with Advanced scripts in WordPress

2. Create the gallery in Oxygen

Create custom ACF gallery in Oxygen Builder’s code block.

<div class="colcade-grid">
<div class="colcade-col colcade-col--1"></div>
<div class="colcade-col colcade-col--2"></div>
<div class="colcade-col colcade-col--3"></div>
<!--
If you want more columns - uncomment or add them here 

<div class="colcade-col colcade-col--4"></div>
<div class="colcade-col colcade-col--5"></div>
<div class="colcade-col colcade-col--6"></div>
-->

<?php 
$images = get_field('your-acf-gallery-slug');
if( $images ): ?>
        <?php foreach( $images as $image ): ?>
            <div class="colcade-item">
                <a href="<?php echo esc_url($image['url']); ?>">
                     <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                </a>
                <p><?php echo esc_html($image['caption']); ?></p>
            </div>
        <?php endforeach; ?>
<?php endif; ?>
</div>
Colcade HTML structure

3. Add Colcade settings

Open JavaScript section of Code block and add settings:

window.onload = function(){
  var colc = new Colcade( '.colcade-grid', {
  columns: '.colcade-col',
  items: '.colcade-item'
});
}
Add Colcade JS

#TIP: You can create the config script in Advanced scripts and insert it to the page as a shortcode.

Adding Colcade settings as a shortcode in Advanced scripts

4. Add Colcade CSS

/* with flexbox */
.colcade-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}

.colcade-col {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.colcade-item {
	line-height: 0px;
}

/* 2 columns by default, hide columns 2 & 3 */
.colcade-col--2, .colcade-col--3 { display: none }

/* 3 columns at medium size */
@media ( min-width: 768px ) {
  .colcade-col--2 { display: block;} /* show column 2 */
}

/* 4 columns at large size */
@media ( min-width: 1080px ) {
  .colcade-col--3 { display: block; } /* show column 3 */
}

.colcade-grid img {
	width:100%;
	height:100%;
	object-fit:cover;
}
Add colcade CSS to Oxygen Builder Code block CSS settings

5. Test it!

You can see it in action here: https://toolset.wiki/colcade-grid/. I am currently experiencing some bugs with mobile responsiveness. Script do not realize that columns are hidden and only display images from first column. After resizing window to all columns and back to the mobile version, it loads all images. I will update article ASAP as I find solution. If you have any ideas, let me know in comments.

4 comments on “ACF Masonry Left to right ordered Gallery in Oxygen Builder /w Colcade”

Leave a Reply to Alex Gdn Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Auto-populate child content with parent content’s title
11. 7. 2019 in
Code snippet from our fan.
Read More
Aleš Sýkora wrote
Footer at the bottom of page Oxygen Builder
2. 12. 2020 in ,
Push your footer to the bottom in oxygen builder.
Read More
Aleš Sýkora wrote
Custom excerpt lenght in Oxygen and WordPress
28. 5. 2021 in ,
Need to display smaller amount of words in some WordPress excerpts? Use custom function! Put the code below to your code snippets plugin or your custom funcionality plugin and use it in Oxygen Builder. Thanks to https://stackoverflow.com/a/17177847. Custom code: Then go to Oxygen builder and add custom PHP return value, when adding dynamic data field. […]
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram