How to show "No items" if a certain portfolio tag is empty in Masonry Gallery

Hey Jason,
To show no items when the category is empty instead of all posts the Dev Team has provided this filter:
add_filter( 'avf_masonry_query_no_entries_fallback', true, $terms, $valid_terms );
Then we should be able to display a message with jQuery if no masonry elements are showing, but the script will need to be adjusted for your page.
Can you link to your page where this element will be used with the filter applied but not the script so we can test?

Best regards,
Mike

Hi,
Thank you for your patience and the login, the portfolio tags are listed as classes in the masonry items so to ensure that only the correct tags are shown and if there are none show a message we need to know what tag the masonry is going to show, so you will need to add a custom class to the masonry element for the tag that you want to show.
This will allow us to use one script for your whole site instead of writing a different script or css rule for every page.
So for the test page the tag class you want to show was tag-trellis-ice

the portfolio tag slug for this is trellis-ice so you see that you just add tag- to the beginning, this should explain how to adjust your other pages.
you will add this class to the developer settings custom class field:

as you see, if you already have a custom class there add the second class after a space.
I then added this script to your child theme functions.php:

function empty_masonry_message_script() { ?>
    <script>
const allCategoryClasses = [];
const elementsWithCategoryClasses = document.querySelectorAll("#av-masonry-1[class*='tag-']");
const elementsCount = elementsWithCategoryClasses.length !== null;

for (let i = 0; i < elementsCount; ++i) {
  Array.prototype.push.apply(
    allCategoryClasses,
    elementsWithCategoryClasses[i].classList
  );
}
const presentClasses = {};

var tagClass = (allCategoryClasses
  .filter((classname) => {
    const present = presentClasses[classname];
    presentClasses[classname] = true;
    return classname.indexOf("tag-") === 0 && !present;
}));

(function($) {
var nocat = $('<div class="nocat">No Current Projects</div>').css({'text-align':'center','font-size': '20px'});
$('#av-masonry-1 .av-masonry-container.isotope a').each( function() {
if ($(this).children(tagClass).length =! 0) {
  $(this).css({'display':'none'});
  
}
});
if($('#av-masonry-1 .av-masonry-container.isotope a').is(':hidden')){
	$(nocat).appendTo('#av-masonry-1');
}
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'empty_masonry_message_script');

and now a message No Current Projects shows instead of the wrong items:

Try adding the tag classes to other pages that have no matching products to display the message.

Best regards,
Mike

Hi,
Thanks for the login, Wood Chevron Oak doesn’t have any items, please see the first screenshot in the Private Content area.
But in testing other pages I did find an error on a different page.
I think that since each of your items have multiple tags this script is not filtering them correctly, perhaps a better solution would be to create a dummy No Current Projects portfolio item with an image that says this and apply the tags for empty portfolio items, so these items show this instead of all of the items.

Best regards,
Mike

Hi,
It looks like you have 207 portfolio tags with no items, are you in the process of adding items or assigning these tags to items?
Once each of these tags are assigned to at least one item the No Current Projects solution will not be used.

Best regards,
Mike