Masonry Grid with Popup functionality

How To
1

Hey Bricksus,
i have a masonry grid on this page that displays posts of a custom post type. I have now solved the query with PHP and JS, as I couldn’t do it with bricks. Does anyone have an idea how to do it with bricks? The text in the little blue boxes is the post title and the content of the modal is the post text. The most important points are: The display should be masonry and the text should open in a popup. If there is more content, pagination may be added.

Thx for your Ideas :slight_smile:

2

Hi there,
this is actually possible using only bricks core functionality.

I made a video guiding you through those steps:

The necessary HTML Code Structure:

<ul class="isotope bricks-layout-wrapper" data-layout="masonry">
 <li class="bricks-layout-item">
 <!-- YOUT QUERY LOOP HERE -->
 </li>
 <li class="bricks-isotope-sizer bricks-sizer-fix"></li>
 <li class="bricks-gutter-sizer bricks-sizer-fix"></li>
 <!-- Optional Isotope Init Element (li) -->
</ul>

Code for Enqueueing Assets (css/js) and resgistering custom Isotope Element

<?php

add_action('wp_enqueue_scripts', function () {
  if (!bricks_is_builder_main()) {
    wp_enqueue_script('bricks-isotope');
    wp_enqueue_style('bricks-isotope');
  }
});

add_action('init', function () {
  $element_files = [
    __DIR__ . '/elements/isotope-init/isotope-init.php',

  ];
  foreach ($element_files as $file) {
    \Bricks\Elements::register_element($file);
  }
}, 11);

Code for the custom Isotope Element:

<?php

if (! defined('ABSPATH')) exit;

class UF_Isotope_Init extends \Bricks\Element
{
    public $category     = 'layout';
    public $name         = 'uf-isotope-init';
    public $icon         = 'ti-layout-placeholder';
    public $scripts      = ['bricksIsotope'];

    public function get_label()
    {
        return esc_html__('Isotope Init', 'bricks');
    }

    public function set_control_groups() {}

    public function set_controls() {}

    public function enqueue_scripts() {}

    public function render()
    {
        $selector = $this->name;

        $root_classes[] = $selector;

        $this->set_attribute('_root', 'class', $root_classes);

        $output = "<li {$this->render_attributes('_root')}>";

        $output .= "</li>";

        echo $output;
    }
}

Hope this helps!
Cheers Suat

3

Wow, that’s great, thanks for the detailed explanation. I’ll test it.

1 Like