Images Stopped Displaying in Grid and Now in 1 Column. Should be 3

[braddalton]

I think it's got to do with timing of the hooks.

add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
function enqueue_custom_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('isotope', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js', array('jquery'), '3.0.6', true);
    wp_enqueue_script('imagesloaded', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js', array('jquery'), '4.1.4', true);
    wp_enqueue_script('custom-isotope', get_stylesheet_directory_uri() . '/iso-settings.js', array('jquery', 'isotope', 'imagesloaded'), '1.0', false);
}

And settings :

jQuery(document).ready(function ($) {
    var $container = $('.isotope-container');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.isotope-item',
            layoutMode: 'masonry', // Set layout mode to masonry for a grid
            masonry: {
                columnWidth: '.isotope-item', // Set the column width based on the isotope item
                gutter: 20 // Adjust the gutter between items
            }
        });
    });

    $('.isotope-filter a').on('click', function () {
        var filterValue = $(this).attr('data-filter');
        $container.isotope({ filter: filterValue });
        return false;
    });
});

[braddalton]

Resolved. Doesn't work with display:grid so used different CSS method

[vankishdelfuturo]

May i ask how did you solve this?

[braddalton]

May i ask how did you solve this?

I used display: inline; and display: block; Full tutorial https://wpsites.net/genesis-tutorials/filter-custom-post-type-archive-using-isotope/

[vankishdelfuturo]

Amazed at how this obstacle became motivation for you to provide a refreshing and well documented alternative solution. Cheers man.

I just posted a new issue, would you be able to give it a look?