Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 17, 2021 at 1:21 am #1333185
    THP Studio

    Hey Gunter,

    I know you did a lot of work implementing srcset across the theme a while back, but I’ve just noticed an area that seems to have been skipped.

    If you look on the front end of an ALB gallery element displayed with Big image with thumbnails below it such as in the example link I’ve given, the first big image is loaded nicely and has srcset meaning a retina image can be displayed for HiDPI screens. Perfect.

    But if you hover over the thumbnails and then look at the big preview image that gets swapped in you’ll notice that the subsequent big previews don’t get srscet, and thus no retina images.

    On hover, it seems you have code that swaps things out and just ends up with one simple src tag instead of srcset.

    Could this be improved to include srscet please?

    If you have any questions please let me know, and thanks for your hard work.

    Tim

    December 17, 2021 at 3:22 pm #1333269
    Günter

    Hey Tim,

    Yes, you are right. We missed it.

    I have added a fix for it – but the release 4.8.8.1 was already out. So it will be in next release.
    If you want I can send you a copy including the fix (based on 4.8.8.1, no other changes) so you can check, if it is working as expected.

    Best regards,
    Günter

    December 17, 2021 at 5:02 pm #1333275
    THP Studio

    Hey Gunter,

    Amazing turn around time on that fix, thanks so much!

    Yeah I would love a copy to try out if I can please.

    Thanks again

    Tim

    • This reply was modified 3 years ago by THP Studio.
    December 18, 2021 at 1:01 pm #1333354
    Günter

    Hi,

    I hope you’ve seen that with 4.8.4 the following files have changed due to post css file support (in case you modified them in child theme):

    enfold\config-templatebuilder\avia-shortcodes\masonry_gallery\masonry_gallery.php
    enfold\config-templatebuilder\avia-shortcodes\masonry_entries\masonry_entries.php
    enfold\config-templatebuilder\avia-shortcodes\av-helper-masonry.php

    The attachment url for the image is set by following code in av-helper-masonry.php line 1330:

    
$this->loop[ $key ]['attachment'] = ! empty( $this->loop[ $key ]['thumb_ID'] ) ? wp_get_attachment_image_src( $this->loop[ $key ]['thumb_ID'], $img_size ) : '';

    This is a default WP function.

    I hope this helps you to locate the problem.

    In case you need a filter that would help let us know.

    Best regards,
    Günter

    January 4, 2022 at 2:09 am #1334111
    THP Studio

    Hi Gunter,

    Hope you had some time off!

    Wanted to get back to you on the issue mentioned above that we need your help with.

    We seem to have tracked down where the problem occurs with Imgix images and any masonry style ALB element (since they use the same core files). In the av-helper-masonry.php file it calls the make_image_responsive function and passes this string to it:

    $img_html = '<img src="'. $attachment[0] . '" title="' . $img_title . '" alt="' . $alt . '" />';

    Eventually the WordPress function wp_filter_content_tags attaches a width and height HTML attribute to the string because it’s not in the string. Because the way Imgix works (server.com/imgname.jpg?w=123&h=456), and every other image proxy service, WordPress looks up the details for imgname.jpg which it gets the full size width and height, it then adds these dimensions to the HTML rather than the width and height it’s requesting.

    By comparing the code in other elements such as the easy slider or the image element (which work fine) we noticed that the difference in the way they works is that when these functions call the make_image_responsive function they pass in the width and height into this function. Eg.

    $img_tag = "<img src='{$img[0]}' width='{$img[1]}' height='{$img[2]}'

    This then stops WordPress later on looking up of the attachment details and adding the width and height. So how ever you pre-lookup the width and height in these other elements works fine.

    So can you see the best way for us to get around this so that we can use Imgix and others can use other image proxy services without issue? We are not experts but thought of a few ways:

    1. Should a lookup of the width and height happen and it be add to the HTML string before calling make_image_responsive like the other elements do?
    2. Should we intercept the function that WordPress makes ( these is a hook there) and extract the width and height from the string Eg (server.com/imgname.jpg?w=123&h=456)
    3. Some other better way that you think it should be done?

    The first option seems the best as this problem only seems to be effecting the masonry element and option 1 is specific to masonry code.

    Option 2 I worry will impact other unforeseen things and is unnecessary for all other elements as they work fine.

    • This reply was modified 2 years, 11 months ago by THP Studio.
    January 4, 2022 at 5:44 pm #1334259
    Günter

    Hi Tim,

    Thanks for digging into this.

    I think the best way is to use a filter and limit the changes right in av-helper-masonry.php.

    For the next release I added the following filter:

    
							
/**
 * Allows to add width and height attribute to supress WP filters for responsive images
 * (can be used to server optimized images from an image proxy service like Imgix
 * 
 * @since 4.8.9
 * @param string $img_html
 * @param array $attachment
 * @param array $entry
 * @param array $this->config
 * @return string
 */
$img_html = apply_filters( 'avf_masonry_flex_image_html', $img_html, $attachment, $entry, $this->config );

    right before (around line 481)

    
$img_html = Av_Responsive_Images()->make_image_responsive( $img_html, $thumb_ID, $this->config['lazy_loading'] );

    and this is an example how to use it:

    https://github.com/KriesiMedia/enfold-library/blob/master/actions%20and%20filters/Images%20and%20Lightbox/avf_masonry_flex_image_html.php

    Best regards,
    Günter

    January 5, 2022 at 12:55 am #1334288
    THP Studio

    Hey Gunter,

    That’s brilliant thank you so much! lifesaver!

    There was one problem with the code provided. It threw this fatal error:

    PHP Fatal error: Uncaught TypeError: custom_avf_masonry_flex_image_html(): Argument #4 ($config) must be of type array, null given, called in /wp-includes/class-wp-hook.php on line 303 and defined in /wp-content/themes/enfold-child/functions.php:16

    Because $this->config doesn’t exist. We just removed the $config from both functions and it works.

    January 5, 2022 at 10:01 am #1334337
    Günter

    Hi,

    Great it solved the problem.

    Sorry for the wrong code. In the next version av-helper-masonry.php is deprecated and a modified code is moved to config-templatebuilder\avia-shortcode-helpers\class-avia-masonry.php and there $this->config exists – and I tested it in this version.

    Best regards,
    Günter

    January 5, 2022 at 4:24 pm #1334392
    THP Studio

    Ah I see, thanks for the explanation Gunter, and thank you so much again for helping us work through these two issues, it really has been a big help.

    I haven’t gotten around to test the gallery retina tweaks, but will look out for it in the next version.

    Thanks again Gunter.

    Tim

    January 6, 2022 at 1:08 pm #1334518
    Mike

    Hi,
    Glad Günter was 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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Missing scrset in ALB gallery’ is closed to new replies.