-
Posts
-
Hello,
I’m trying to create a Masonry Gallery that I can set up with product images. In the caption, I’d like to include the company, the product name, and the price. I also want to use a button as the clickthrough link in the caption on hover. Is that something I can do with the theme? The links will be directly to the 3rd-party product page rather than our site, so using a portfolio layout won’t help.
I’ve included an example of a similar layout from another website. Thank you for your help.
Hey Orenishii,
Thank you for the inquiry.
It’s possible to add a Custom Link to each item in the Masonry Gallery, then use this filter to create product button which links to the external URL:
function avf_view_product_button_to_masonry_entry($content, $entry, $config) { $custom_link = get_post_meta($entry['ID'], 'av-custom-link', true); $product_link = !empty($custom_link) ? $custom_link : get_permalink($entry['ID']); $view_product_button_html = "<div class='view-product-button'> <a href='" . esc_url($product_link) . "' class='button' title='" . esc_attr(get_the_title($entry['ID'])) . "'> View Product </a></div>"; $content .= $view_product_button_html; return $content; } add_filter('avf_masonry_entry_content', 'avf_view_product_button_to_masonry_entry', 10, 3);Best regards,
IsmaelHI Ismael,
Thank you for replying! I’d add this to the functions.php file, and the option align properly, is that correct? I’ve done so, but the layout isn’t quite right.
Also, could you advise on:
– How to show a second image on mouseover, and
– How to set a custom color for the button?I appreciate your help.
Hi,
Thank you for the update.
Did you create a test page? Please provide the page URL so that we can inspect it.
— Unfortunately, there is no option to display a second image on hover. Implementing this feature would require custom modifications, which fall outside the scope of our support.
— To set a custom color for the button, you can add this css code:
.view-product-button a { color: red; background: blue; }Best regards,
IsmaelHI Ismael,
Sure, the test page is below. As you can see, I’m attempting to use the ‘title and excerpt’ option to display on my products (the grey squares). The other images are just placeholders from other articles. The option works for those, but the images I’m trying to set up in the masonry aren’t showing properly. I want all that info (designer name, product name, and price) in the bottom of the image on mouseover, with a Shop Now button.
The SupportAcct info remains the same. Thanks for your help.
Hi,
Thank you for the info.
We may have found the issue with the filter above. Please try this again:
function avf_view_product_button_to_masonry_entry($content, $entry, $config) { $custom_link = get_post_meta($entry['ID'], 'av-custom-link', true); $product_link = !empty($custom_link) ? $custom_link : get_permalink($entry['ID']); $view_product_button_html = "<div class='view-product-button'> <span href='" . esc_url($product_link) . "' class='button' title='" . esc_attr(get_the_title($entry['ID'])) . "'> View Product </span ></div>"; $content .= $view_product_button_html; return $content; } add_filter('avf_masonry_entry_content', 'avf_view_product_button_to_masonry_entry', 10, 3);We simply replace the a (link) tag with a span tag to prevent the masonry items from breaking.
Best regards,
Ismaelthats nice – and if we set those “buttons” to display : none. – we can make a light box from that masonry to show first the images – with a button link in the bottom bar:
see: https://webers-testseite.de/portfolio-raster/
the trick is in the magnific popup script inside callback :
elementParse: function(item) { var bgImage = item.el.find('.av-masonry-image-container').css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,''); item.src = bgImage; },that i look for the background-image of that image container – and get the url – and declare it to the item to open in lightbox.
because by that snippet of ismael – there is now additional info on the masonry item – this href i use for an avia button in the lightbox (just a little bit upgraded by some custom css )
- You must be logged in to reply to this topic.