That makes sense. Thanks, Mike! You may close this.

Hey Mike, the second version is the one I already used. I wrote: “I could load it again, if I would want to. No problem.” But thanks anyway.

My question is: Do I have to use this filter and make changes to the excerpt? Is there a filter to alter the Masonry overlay directly? Without my detour? Couldn’t find any more filters to check or try. Any ideas?

Hi Mike, the described functionality with the sorting function via a field registered with ACF is definitely possible. I use this on several websites, I got the code for it from Ismael. So as I said, I assume that I could basically get to ACF content to use it in Masonry. Or is that only possible with the blog post element?

I know how your mentioned solution is implementable with CSS and the categories. But it would not be the optimal solution for me, because it is just too rigid. Changes can then only be made in the CSS code …

Is there no other idea to get to a stored color info than with hard coded CSS?

Hey Nikko, I know how to set the color with CSS. But what I want to achieve is that the color for the overlay is loaded from the respective post. Here is an example:

Post 1: ACF color picker: #000
Post 2: ACF-Color-Picker: #fff
Post 3: ACF color picker: #efefef

All posts are loaded and displayed in a masonry. Now the overlay of post 1 should have the color #000, the overlay of post 2 the color #fff and so on.

I use the Masonry element with the title as overlay setting. How do I get the color to use it automatically for the overlay?

Hey Günter,

thank you for getting back to me and thanks for the code snippet.

So instead of if( $query->is_search ) I would somehow check if it is a certain post type archive instead of is_search – correct? The rest of the code is the same? Could I write something like if( $query->is_tax('test') and later on define which post type is the only one to query in this archive?

Best regards,
Daniel

Hey Mike,

I have done some additional testing. The problem has nothing to do with the archive template. Your code brings the submenu on the archive page – my change to the archive.php too, nothing wrong with that.

If the submenu is generated with a shortcode it comes to styling problems. On archives but on normal pages too. If I place the submenu element from within the ALB onto a page everything works finde. If I place the submenu as shortcode on a page (for example with a codeblock element) the CSS breaks and the HTML structure looks different if you compare both variants.

Any idea why? How can I use a submenu with a shortcode?

All the best, Daniel

Hi Ismael, thank you for your answer.

I was already thinking about building the gallery with the masonry element. Last year I built a masonry element which opens the posts in lightboxes (see here: https://kriesi.at/support/topic/lightbox-for-blog-post-element/). I had a helping hand from @Guenni007.

All this solution is missing is the navigation from one in a lightbox opened post to the next with some arrows < > as in a normal lightbox gallery. Any idea on how to achieve that?

All the best, Daniel

Hey Ismael,

I have flexible masonry and large gap enabled but there is no gap. Even if I choose the 1px gap. I found the code you mentioned in line 243:

.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
 position:relative;
 margin-right:15px;
 margin-bottom:15px
}

But the code on line 153 with the #top is stronger and therefore the gap is missing. On line 153 it says:

#top .av-inner-masonry {
 overflow:hidden;
 background-color:transparent;
 margin:0
}

So shouldn’t the code on line 243 be like:

#top .av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
 position:relative;
 margin-right:15px;
 margin-bottom:15px
}

Or the code on line 153 should be without the #top in the beginning.

Or am I wrong?

Thanks for your fast response!

Nice, that does the trick! Why do you just remove it temporarily?

Hey Ismael, thanks for letting me know but I tried to add several iterations already:

.av-masonry-image-container
.av-masonry-entry a
.av-masonry-image-container img
.av-masonry-entry a .av-masonry-image-container img

And more stuff like that. Nothing worked. Image title is still displayed on hover. Any other idea or solution?

• This reply was modified 1 year, 7 months ago by spooniverse.

Hi Ismael,

thank you for your code. It does the trick! Everything looks fine in the frontend now. Need to add it to my other shop pages.

In the backend however you can still see the different image sizes the products originally refer to (see image in private) while your filter loads the correct size for the frontend. Nothing to worry about, or am I wrong?

All the best, Daniel

Exactly what I needed. Thanks a lot!
Best regards, Daniel

So the $_GET would need to pull the request from the URL – or am I wrong?

Hey Ismael, I appreciate your help. And the code works like charm – as always. So thanks a lot!

All the best,
Daniel