Image Galleries/Collections, Do Not’s

Masonic Image Gallery

As seen below, masonic image galleries are a popular web design technique used to display images in an aesthetically pleasing, non-uniform grid. Unlike traditional image galleries with rows and columns of equal size, masonry layouts fit images together like a puzzle, optimizing the use of space and creating a visually interesting arrangement.

Responsive Layout 1 (Please Zoom In and Out to see how the gallery responds to different screen sizes. Link to instructions on how to zoom in and out in your browser.

Blue Sky with Sun Shining from Behind the Clouds Representing Sky is the Limit

Sail Boats on the Ocean Representing the Wind Element

Forest Fire Representing the Fire Element

Butterfly on a Branch Representing Flight

Fish in the Ocean Representing the Water Element

UNC Chapel Hill Sign Representing UNC Chapel Hill

Responsive Layout 2

NOTE: Remember to always provide descriptive alt text to each image to adhere to digital accessibility standards and most importantly to provide users with disabilities the same experience as everyone else.

Requirements

Toolset (Content Templates)

Directions

Add the CSS and JavaScript to a Toolset Content Template and add the template to a widget in the Footer. Add the HTML on the page where you would like to have a Masonic Image Gallery. Look at the comments in the code to see how to manipulate and adjust the masonic gallery to your liking.

Code

HTML


<div class="img-gall-cont">
    <div class="img-gall-item"><img src="/wp-content/uploads/sites/4/2023/12/sky-414199-scaled.jpg" alt="Blue Sky with Sun Shining from Behind the Clouds Representing Sky is the Limit"></div>
    <div class="img-gall-item"><img src="/wp-content/uploads/sites/4/2023/12/sailing-boat-1593613-scaled.jpg" alt="Sail Boats on the Ocean Representing the Wind Element"></div>
    <div class="img-gall-item"><img src="/wp-content/uploads/sites/4/2023/12/forest-fire-432870-scaled.jpg" alt="Forest Fire Represinting the Fire Element"></div>
    <div class="img-gall-item"><img src="/wp-content/uploads/sites/4/2023/12/fish-1839706-scaled.jpg" alt="Fish in the Ocean Representing the Water Element"></div>
    <!-- More images -->
</div>

CSS


/* Masonic Image Gallery CSS */
.img-gall-cont {
    width: 100%;
}

.img-gall-item {
  	max-width: 280px;  /* Adjust this using % for the desired number of columns and px for responsive number of columns based on screen size */
  	width: 100%; 
}

.img-gall-item img {
    width: 100%;
    height: auto;
    display: block;
}

CSS


/*Masonic Image Gallery JavaScript*/
document.addEventListener('DOMContentLoaded', function() {
    // Function to dynamically load the Isotope script
    function loadIsotope() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.js'; // Updated URL
        script.onload = initializeIsotope;
        document.head.appendChild(script);
    }

    // Function to initialize Isotope
    function initializeIsotope() {
        var grid = document.querySelector('.img-gall-cont');
        new Isotope(grid, {
            itemSelector: '.img-gall-item',
            percentPosition: true,
            masonry: {
                columnWidth: '.img-gall-item',
                gutter: 0 /*Spacing in between columns*/
            }
        });
    }

    loadIsotope(); // Load and initialize Isotope
});