Questions about isotope plugin

[stefwilliams]

Hi,
I got the isotope plugin yesterday and have some questions. Basically wondering if I can do what I need to with the shortcodes and filters or whether I need to generate something with JS...
My requirements are as follows for, lets says, a main 'categories' page and for the term pages within the categories

1. A top level tab-type layout to include:
   About (taken from a custom field), Latest (All post types with given category selection), Reports, Blog Posts, Events, etc (custom post types filters)
2. Within each tab except 'About', an isotope filter for each category (excluding 'Uncategorized')

I was initially thinking of using standard Bootstrap tabs for the top level, with an isotope shortcode under each Post type, but I see the docs talk about being able to load an isotope as content for the isotope to filter? So I'm wondering if the whole thing can use Isotope.

Also, if someone were to select a category link from another page, is there any way to intialize the shortcode with a filter preselected, so for example on the home page, they click a 'Category 1' badge on a post and it goes direct to the 'Latest' tab on the Categories (or the 'Category 1' page, with the 'Category 1' filter pre-selected.

Hope this makes sense and someone can suggest the best way to do it, either as a combination of shortcodes and filters or as direct use of isotope without shortcodes.

Cheers

[crftwrk]

Hi,

thank you for purchasing the Isotope plugin. Unfortunately you can't do that in a simple way, let me explain:

I was initially thinking of using standard Bootstrap tabs for the top level, with an isotope shortcode under each Post type, but I see the docs talk about being able to load an isotope as content for the isotope to filter? So I'm wondering if the whole thing can use Isotope.

Isotope is calculated by JS height and Bootstrap Tabs have height 0 by default. So, Isotope cannot calculate the height if it's inside a Tab panel. In short, Isotope cannot be used inside Tabs by default.

Following example fixes Isotope if it's inside a Bootstrap Accordion. Try to modify it to Tabs using tab-pane instead collapse. You can also try something like this https://stackoverflow.com/questions/19214362/making-a-jquery-isotope-layout-initialize-inside-a-bootstrap-tab, but in general, this is not a good idea, Isotope is not made for that.

_bootscore-custom.scss:

.accordion-collapse {
  opacity: 0;
  transition-delay: .35s; // Show collapse content if Isotope is loaded 
	
  &.show {
    opacity: 1;
  }
}

_custom.js:

jQuery(function ($) {

  // Fix Isotope inside Bootstrap Accordion
  var $grid = $('.grid').isotope({
    // your isotope options
    itemSelector: '.item',
  });

  $('.accordion').on('shown.bs.collapse', function (e) {
    $grid.isotope('layout');
  });


});

Also, if someone were to select a category link from another page, is there any way to intialize the shortcode with a filter preselected, so for example on the home page, they click a 'Category 1' badge on a post and it goes direct to the 'Latest' tab on the Categories (or the 'Category 1' page, with the 'Category 1' filter pre-selected.

Yes, that is possible with some additional code to add a hash navigation. Note that this can only be used if you have just one Isotope on a page or unique filter classes. Add following to your child-theme's custom.js:

jQuery(function ($) {
  function getInitialFilter() {
    const hash = window.location.hash;
    const params = new URLSearchParams(window.location.search);
    if (hash.startsWith('#filter=')) {
      return decodeURIComponent(hash.replace('#filter=', ''));
    } else if (params.has('filter')) {
      return params.get('filter');
    }
    return null;
  }

  const initialFilter = getInitialFilter();
  if (!initialFilter) return;

  // Wait a moment until all isotope instances are initialized
  setTimeout(function () {
    $('.equal-height, .masonry').each(function () {
      const $container = $(this);
      const $grid = $container.find('.grid');
      const $buttons = $container.find('.filter-buttons');

      if (!$grid.length || !$grid.data('isotope')) return;

      // Try to find a matching button and simulate a click
      const $button = $buttons.find('button[data-filter="' + initialFilter + '"]');

      if ($button.length) {
        $button.trigger('click');
      } else {
        // Fallback: manually apply filter and update buttonFilter (needed for your setup)
        $grid.isotope({ filter: function () {
          const $this = $(this);
          return $this.is(initialFilter);
        }});

        // Optionally mark active button if you want
        $buttons.find('.active').removeClass('active');
      }
    });
  }, 100); // slight delay ensures Isotope is ready
});

Now you can use a preselected filter in the URL

https://mydomain.com/page/#filter=.filter-slug

See it in action: https://dev.bootscore.me/plugins/isotope-with-hash-nav/#filter=.cars

Let me know if there is something else ;-)

[stefwilliams]

Thanks for the reply.
A couple of other things:

1. Can I fetch multiple post types through the shortcode? I've just tried a list, eg, type="post,event,report,project", but I get nothing back. If I put each post type individually, it's fine.
2. Rather than tabs, I see the documentation talks about being able to filter 'isotope' as the post type, category, etc. Does this mean I can create one isotope for the post type filters and a different one for the category filters and load one in the other? Or am I misunderstanding what loading 'isotope' means in this context?
   Alternatively, can I use isotope to include two different filter types (post_type AND category?)

[crftwrk]

Can I fetch multiple post types through the shortcode? I've just tried a list, eg, type="post,event,report,project", but I get nothing back. If I put each post type individually, it's fine.

No, you cannot mix different post types or taxonomies like type="post" or type="my-custom-cpt", tax="category" or tax="post_tag".

Alternatively, can I use isotope to include two different filter types (post_type AND category?)

As above: No

Rather than tabs, I see the documentation talks about being able to filter 'isotope' as the post type, category, etc. Does this mean I can create one isotope for the post type filters and a different one for the category filters and load one in the other? Or am I misunderstanding what loading 'isotope' means in this context?

You can filter any post type by taxonomy. But each Isotope shortcode is only able to filter one. Means you can for example filter posts by category taxonomy or post_tag taxonomy.

[bs-isotope-equal-height type="post" tax="category" terms="cats, dogs, birds"]

or

[bs-isotope-equal-height type="post" tax="post_tag" terms="iorem, ipsum, left-sidebar"]

Conclusion: You can load as many shortcodes in a page as you want, but not mix different post types or taxonomies inside a shortcode.

Does this clear this up?

[stefwilliams]

Ok, thanks again for your response...

I do need to filter multiple post types, so guess I will need to use my own query and filter buttons, but presumably I can just over-ride the templates in my child theme and make my own query and filter buttons in there?

If I do that instead of using the shortcode, will all the above be possible? ie, one filter for post types, and one for categories? Will they work together on the same page (assuming I give them different IDs)? Or would I need to try and get isotope to work in tabs and use tabs for the post types?

Sorry for so many questions, I just want to make sure I start off down the right path.

[crftwrk]

Hi,

I do need to filter multiple post types, so guess I will need to use my own query and filter buttons, but presumably I can just over-ride the templates in my child theme and make my own query and filter buttons in there?

You can't use multiple post types inside a query, you have to clear choose which post type you want to use. But of course, you can override the template and code your own.

You can even create your own Isotope as well, just add equal-height or masonry (depends what you want to use) class to init Isotope.

If I do that instead of using the shortcode, will all the above be possible? ie, one filter for post types, and one for categories?

Same as above, only one taxonomy is possible in a shortcode. The taxonomy in the shortcode is added as a class to the card items and the filter buttons.

In conclusion, Isotope is designed to filter a huge amount of items such as a photo gallery, products or a directory. But it's not made for hiding it in tabs or using different post types/taxonomies in one shortcode.

If you want to do filter different post types or taxonomies inside a query, it is not possible with the shortcode. Code it with plain HTML instead. The official documentation https://isotope.metafizzy.co might be helpful here ;-)

[stefwilliams]

Ok,
Thanks. I've pasted the demo of multiple filters from Metafizzy at https://codepen.io/desandro/pen/eYNEpQ into a template, and that works, so I'll use that a base for making my own.
Cheers

[crftwrk]

Great 👍