rtmedia problem

Hi Jong Su,

Caspar from WP Rocket here. Sorry to hear you’re experiencing an unexpected behavior with WP Rocket. Let’s fix this!

I’ve visited your site in search of a live example for the behavior you had illustrated with those screenshots. Up to now, the pages I’ve visited seem to work all fine, but that is obvious as LazyLoad seems to be disabled.

However, even with LazyLoad disabled, I can see (for example on this page) that the rtMedia for WordPress, BuddyPress and bbPress plugin seems to cause the issue you’ve described.

That plugin tries to assign a fixed height to an image’s wrapping <div> and

containers. Here’s an illustrating screenshot:



As you can see, the image in this example has a height of 240px, and its wrapping div and ul elements get assigned a fixed height of 275px each.

Carousel scripts often operate like this, calculating a fixed height value from an image’s height and assign that fixed height to the wrapping container. However, that implementation creates a problem with LazyLoad generally, because with LazyLoad enabled the image has not yet been loaded when the script tries to retrieve its height value.

Here’s what’s happening when LazyLoad is active:
When the document is loaded, that rtMedia script tries to calculate the height values for those image-wrapping <div> and

elements.
Because no image has been loaded at this point (thanks to LazyLoad), list items are empty.
Our script doesn’t notice and grabs the height value of an empty list item (35px).
The script applies that height of 35px to said wrapping <div> and

elements: these now both have a fixed height of 35px.
Finally, when the user scrolls down the page, LazyLoad allows images to be loaded into their wrapping containers.
Because those containers already have been set to a fixed height, images appear cut-off as you’ve seen on your second screenshot.
The “bad” news is: This is not an issue caused by WP Rocket, so it cannot be fixed from WP Rocket.

The good news is: It still can be fixed. 🙂

This is what needs to be done, either in a custom plugin, or by the rtMedia plugin itself:
Determine the image ID(s) for a carousel.
(I can’t tell you exactly how to do that, as it depends on how the rtMedia plugin operates, but the developers of that plugin would surely be able to get you going.)
Fetch the height value of the first image in each set (for example via wp_get_attachment_image_src()).
Apply that height value to the markup of the script, so that those image-wrapping <div> and

elements both get a fixed height that would equal the actual height of the first image in the set.
(Again, the plugin developers of rtMedia would be able to help you out with required information here. Maybe they’d even be willing to make this a feature in their plugin?)
Thus, the default height for those wrapping elements would perfectly fit for the first image when it eventually gets loaded by LazyLoad. If there are more than one images in a set, the script itself would take care of adjusting that fixed height when the image changes.