Resolving blurred thumbnails on Masonry

Hi,
Thank you for your patience, and the link to your site, when I compare the actual image & it’s thumbnail I see a slight difference, but I’m not sure what may cause this. It looks like you are using the masonry element, please try creating a test page using the masonry gallery element, it seems to offer multiple image sizes on page load that may help.

Best regards,
Mike

Hi,
Thank you for trying the masonry gallery element, I see that the same issue with the WordPress created thumbnails is occuring, I’m not sure why. As I look at your /picturebooks/ page again, I almost believe that the images are correct until you hover over them and then they are blurry, please check again and see if you also believe this, if so we can investigate the css:

.avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
    -webkit-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
}

But if you don’t think this is true, then I wrote this script for the /picturebooks/ page that will replace your thumbnails with the original image that is linked in the lightbox for you to try. Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_masonry_img_script() { ?>
    <script>
(function($){
$("#top.page-id-937 .av-masonry-entry").each(function(){
    var imageUrl = $(this).attr("href");
    $(this).find(".av-masonry-image-container img").attr("src", imageUrl);
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_masonry_img_script');

Best regards,
Mike

Hi,
You would add the function to your child theme functions.php, but please copy the code from the website and not an email and when you paste the code ensure that the arrows in the code are not changing to <
or perhaps there is some other code error in your functions.php, if you include an admin login in the Private Content area I could take a look.
Another way to add the code is by adding a code block element to your page and adding this part of the code:

<script>
(function($){
$("#top.page-id-937 .av-masonry-entry").each(function(){
    var imageUrl = $(this).attr("href");
    $(this).find(".av-masonry-image-container img").attr("src", imageUrl);
});
})(jQuery);
</script>

Best regards,
Mike

Hi,
Thank you for the login, I added the code to a code block element on the /picturebooks/ page and the images are now being replaced on that page, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike