Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 10, 2021 at 9:47 pm #1316149
    jaimemerz

    Hi there,
    We’re having some trouble with images not appearing in a masonry gallery on our site. The images appear to be there when inspecting it, however, it does not show up. We have updated our themes and purged our cache, but still can’t seem to find a solution. Can you please let me know what the best solution to resolve this is? Thanks!

    • This topic was modified 3 years ago by jaimemerz.
    August 13, 2021 at 12:16 pm #1316602
    Mike

    Hey jaimemerz,
    Thank you for your patience, the links to the background images on your page for the masonry items do not point to images, they point to pages. Please see the screenshot in the Private Content area.
    The featured images for your portfolio items, when you try to change the featured image from the portfolio page backend, points to a .jepg image but if you go to the link and try to download the image it is actually a .webp image. From the same featured image dialog box, you can not choose any other existing images you can only upload new images.
    I believe these issues are related to your SiteGround Optimizer plugin but deactivating it doesn’t stop the site from linking to .webp images in the featured image dialog box or start linking to the actual .jepg images in the masonry element.
    I exported your portfolio items to my test site and none of the images were included, this was my first clue, on my site if I add a new featured image your masonry portfolio items show correctly, this was my second clue.
    So I don’t believe this is related to the masonry element or the latest version.
    I tried adding a new image to one of your items but it didn’t work, even with the SiteGround Optimizer plugin deactivated perhaps this is only a frontend for your server settings, can you disable all caching and optimization on your server? I see the WordPress Importer plugin is activated, did you build this site here or imported it somehow?
    I can not view your child theme functions.php, is there any functions or scripts that are related?

    Best regards,
    Mike

    August 13, 2021 at 10:12 pm #1316681
    jaimemerz

    Hi Mike,
    We recently added this code to our functions.php in response to this support thread.

    function custom_script() { ?>
    <script>
(function($){
  $(".av-masonry-entry").each(function(){
      var imageUrl = $(this).attr("href");
      $(this).find(".av-masonry-image-container").css("background-image", "url(" + imageUrl + ")");
  });
  })(jQuery);
  </script>
    <?php
}
add_action('wp_footer', 'custom_script');

    I’ve tried removing it and see that it resolves the background-image issue, but then some of our images in other masonry galleries on the site appear blurry again (as mentioned in the previous thread I linked). Is there something we can do differently to address both issues?

    August 14, 2021 at 11:30 am #1316730
    Mike

    Hi,
    Glad to hear that you remembered that and was able to test it by removing it. So it would seem that I didn’t write the script strict enough to only apply to the masonry gallery, as on the /preschool-kindergarten/ page, but as I go back to rewrite I find that you are no longer using the lightbox linking to the images, thus there is not a larger image for the script to use. I then realize we should have changed the image size option to No Scaling (Original Width X Original Height) to solve that thread instead of using the script, I made this change for you.
    2021-08-14_001.jpg
    Since the masonry element on the /community/ page is using the full size images this solves both issues. Sorry for the round-about solution and the extra headache.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.