Hey guys,

Another horizontal gallery related question sorry….

Getting very different layouts in Chrome, Safari and Firefox for the same CSS code on mobile only (below 768px).

Link provided below.

Notice the image sizing and cropping in each browser.

I added in the margin-top: 45px purely to get some image showing in Safari, as without it it was barely even visible (but happy for that code to go).

Any suggestions please?

Thanks a lot

Tim

Hey Ismael,

Yes, using the ALB Video Element.

I can see itemtype=”https://schema.org/VideoObject” in the code on the page, (you can check using the link I posted in the opening post) but my question relates to schema validators not registering the page as having any video content. Again, if you use the link I posted you can see there are no elements detected that contain video (unless I’m missing it somewhere?).

Could you take a look at what’s going on please?

Thanks a lot

Tim

Hey Gunter,

Thanks for taking a look and sorry to waste your time, I should have mentioned that the live site has been fixed (by turning off Enfold’s merging).

I will try and see if I can replicate it on a dev site for you soon, will let you know.

Thanks

Tim

Hi Gunter,

Ok, v5 sounds really interesting! Thanks for adding it to the repo, it’s not a deal breaker but would be nice to have fixed at some point when you can manage.

Thanks for all your work

Tim.

Ok thanks Gunter, I appreciate you taking a look at it.

Regards,

Tim

Great, thanks Ismael, I appreciate the update and the fix.

Regards

Tim

Thanks Yigit!

Have a great day.

Tim

Thanks a lot Gunter, have a great weekend.

Tim.

Hi Gunter,

We briefly tested the dev version and it seems to have fixed those issues, thank you very much.

If you can think of any other element or feature that may be missing image sizes in a similar way that these ones were, please add them in also. If I spot any more I’ll be sure to let you know.

Thanks again,

Tim.

Hi Gunter,

Sounds great, thanks so much.

Tim

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

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 3 years, 2 months ago by 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, 3 months ago by THP Studio.

Hey Gunter,

That’s brilliant, thank you, really appreciate it.

Tim.