-
Posts
-
Dear support team, I have a question: Is it possible to load the color for the overlay of a post in a Masonry from within the post itself? I want to use the info of an ACF field of a post in the Masonry Element. I have created a color picker with ACF in the backend and would like to use the color selected there in the frontend for the overlay. How can I implement this? Where do I need to load the field so that the color code uses it in Masonry? I am glad to get some information. Thanks!
Hi Daniel,
You can try to use this CSS to put some overlay color:
#top .av-masonry-outerimage-container:before { content: ''; display: block; position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100%; opacity: 0.5; background-color: blue; } #top .av-masonry-outerimage-container:hover:before { opacity: 0; }Then on the page you’ll need to add this style and use ACF color picker to change blue with the color you selected.
I hope it helps.Best regards,
NikkoHey 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: #efefefAll 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?
Hi,
Unfortunately there is not a way to do this with ACF & Enfold because Enfold doesn’t get the CSS colors from the post. Unfortunately I don’t see a way to do this.
Perhaps you can get ACF to add a custom class to the masonry element that can specify the color, but I didn’t find a way to do this, my ACF knowledge is limited as well as our support of ACF.Best regards,
MikeHi Mike, could I get the color from the category? In the HTML code of a Masonry I can see all categories attached as css-classes? I can set colors for the categories (as enfold does with products for example). Can I load them into the masonry?
And: It is possible to register an field genereted with ACF to use it in the Masonry sorting options (Ismael once provided a code for me). So it is somehow possible to load ACF data from a post. Why not the color?
Hi,
I believe the category class is added to the masonry so you could set the css color via this class. I don’t think that you can add a ACF field to the Masonry sorting options.
Pehaps an expert with ACF has a way to do this, but it’s beyond our abilities here.
I recommend adding css to set the color via the category class, if you need some help with this please link to your example page and let us know what colors you want for each category.Best regards,
MikeHi 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?
Hi Mike,
I altered a filter Ismael once gave me:
add_filter('avf_masonry_entry_content', function($content, $entry, $config) { $color = get_post_meta( $entry['ID'], 'ACF-COLOR', true); $content = '<div class"acf-color" style="background-color:' . $color . ';"></div>'; return $content; }, 10, 3);And added some CSS:
#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content { background: transparent; } #top .av-caption-style-overlay .acf-color { position: absolute; height: 100%; width: 100%; top: 0; left: 0; margin: 0; z-index: -1; opacity: 0.7; }Now I have the color as overlay. Works as intended. I am missing the excerpt, because the filter overwrites it. But I could load it again, if I would want to. No problem. So I think that is proof of concept. Ok?
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,
Glad to hear that you have sorted this out, it looks like your $content or excerpt is replaced with the custom div with the custom class “acf-color”
I believe that you can append the excerpt back into the $content like this:add_filter('avf_masonry_entry_content', function($content, $entry, $config) { $color = get_post_meta( $entry['ID'], 'ACF-COLOR', true); $content = '<div class"acf-color" style="background-color:' . $color . ';">' . $content . '</div>'; return $content; }, 10, 3);but I don’t have a way to test this,
or you might need to do it like this:add_filter('avf_masonry_entry_content', function($content, $entry, $config) { $color = get_post_meta( $entry['ID'], 'ACF-COLOR', true); $acfcontent = '<div class"acf-color" style="background-color:' . $color . ';">' . $content . '</div>'; return $acfcontent; }, 10, 3);otherwise, if you have another way to add the excerpt back in then try that.
Best regards,
MikeHey 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?
- The topic ‘Set masonry overlay color’ is closed to new replies.