[Support request] Recreate the GP site library grid and filters

Hey George,

Yes, this is a super simple custom solution built specifically for the library.

Basically, each box has a unique class with its category slug.

Then, each button has a data-* attribute with the category slug attached to it.

Then the JS is quite simple:

$( '.page-builder-group .builder-links a' ).on( 'click', function( e ) {
    e.preventDefault();

    var _this = $( this ),
        filter = _this.data( 'filter' );

    _this.siblings().removeClass( 'gb-button-primary' ).addClass( 'gb-button-secondary' );
    _this.removeClass( 'gb-button-secondary' ).addClass( 'gb-button-primary' );

    if ( '' == filter ) {
        $( '.site-box' ).show();
        $( '.generatepress-sites' ).attr( 'data-page-builder', '' );
    } else {
        $( '.site-box:not(.' + filter + ')' ).hide();
        $( '.site-box.' + filter ).show();
        $( '.generatepress-sites' ).attr( 'data-page-builder', '.' + filter );
    }
} );

For a more complex setup, something like this would be preferable: https://isotope.metafizzy.co/

Exactly – there’s a blank iframe that gets populated with a URL once a site is chosen, and it’s set to display “fixed” on top of the site.