Responsive Images - Third Time Lucky

Support
#1

Hi Themeco,

Trying yet again to the get a clear answer, if you do not know - please do not respond pass up to developers.

I asked here earlier to renanble responsive images. Initially I’m told no native WP image functionality not is changed in X6/Pro2.

I provide a code block within X / Pro which uses brute force to disable native responsive images.

This followed up be a “you’re welcome” response without answering the issue.

This is followed up by something more useful but not clear

The fact this in earlier versions of X including my live X5 site (previously in X4 too), responsive images were disabled across the whole X4/5 theme and in also native WP image. They were disabled gracefully without brute-force. Gracefully coded allowed for them to reenabled if I wanted. It reenabled only the native WP img tags, X5 image elements remain unresponsive, which is fine. I was provided the code to do this 2/3 years ago on old forum.

I’ve then provided further information

I followed the steps provided in https://xthemetips.com/size-matters-the-x-image-guide/730/ and it did not work on X6/Pro2.

Later, on closer inspection of the code provided it is the exact same working code I’m using in X5. I know does not work in X6/Pro2, its the whole reason I raised the first ticket.

To say is method in xthemetips is not reliable demonstrates a lack of product understanding, the code works perfectly in X4/X5, not in X6/Pro2. However I’m telling you, the support staff, rather than you telling me.

To be clear, I am not confused. I’ve have provided the code block which disables responsive images in X6/Pro2 to no acknowledgement. I get the impression I’m being provided information from people who are trying to help but do not know the answer, the blind leading the partially sighted.

Why are responsive images important? Speed. I know I can use the X6/Pro2 builders to hide images at different breakpoints. However, this completely ignores and overrides plugins like WooCommerce where its native responsive images are disabled by X6/Pro2.

A quick google search returns countless articles with #1 reason for website bounce rate, speed. The many articles highlight the biggest factor to a page speed - file size of images. They also highlight the $$$,$$$ impact of slow sites. Why would I display a desktop image to a mobile if I do not have?

I understand there was a design decision to disable. I hope it is understood this is a to detriment themeco’s customer websites speed and ultimately looses us potentials of $$,$$$s through slow theme performance. A WooCommerce page with 33 products (fairly reasonable), is infinitely slower on a mobile rendering desktop size images when it does not need to.

I’m not asking for the whole rewrite to use srcset. I understand this is not feasible in the short term.

However, it has been demonstrated in X5 which I currently use that responsive images can be disabled gracefully that allow them to reenabled for native WP img tags.

Im aksing to re-introduce this graceful disable responsive image code in X6/Pro2 for native WP images added with the Classic/Gutenberg editor in the very short-term.

Why? As said we are potentially loosing $$,$$$s in customer bounce rate. As with X5, the X6/Pro2 image elements can remain disabled and use visibility breakpoints, understanding these cannot be changed quickly. It puts the choice and flexibility back in our (customers) hands rather having it dictated to us.

If I’ve missed something I’m more than happy to corrected by someone who know what they are talking about, not by someone trying to be helpful - and failing.

All said, X2/Pro2 are in a class of their own compared with others out there, nothing compares. I know you understand, creating websites that look amazing but do not optimally perform loose value.

#5

Hi @strobley,

Thank you for your patience here. This has been brought to my attention from our support team. I appreciate your commitment to X and Pro, and desire to see our products improved. Let’s see what we can do here.

Quick bit of history: The reason we added the filter to disable the WordPress feature was because when WordPress 4.4 was released it broke how images were being presented on people’s sites. We’re fully committed to backwards compatibility so the first step was to make sure our customers could continue with the same predictable experience without these images breaking.

I agree with you 100% that responsive images are important. We intend on bringing this functionality in a more modern way, but it’s not lined up with the focus of any of our recent release cycles. We will be making a Layout Builder (to make blog layouts) this year and that would likely be a good time to revisit this. Our backlog already has notations about this to make sure it’s part of those conversations.

In the meantime, let’s see what we can get working for you. You mentioned gracefully disabling our implementation. This code will “unhook” what we did to disable the WordPress srcset code.

add_action( 'after_setup_theme', 'remove_x_srcset_filter', 11 );

function remove_x_srcset_filter() {
  remove_filter( 'wp_calculate_image_srcset', '__return_false' );
}

Could you try adding that to a child theme? Let me know if that produces what you expect or if we need to dig deeper.

#7

Hi @alexander,

Thanks ever so much - I received the same code in a follow up ticket. When I applied it did not work… however I believe it as problem with that test site - lots odd behaviour.

I’ve just re-tried on a clean install and it does re-enable responsive images for WordPress / WooCommerce :smile:

However, I want to check - it does not work when inserting an image using the X6/Pro2 Text Element or Content Element.

To test, I copy/paste the <img tag as HTML directly from a WordPress page and ensure with the class=“wp-image-NN”

Should responsive images word using this method in the X6/Pro2 builders?

Thanks again.

#9

Hi @strobley

I’ve tested this out and it’s working ok for me. Could you try again and this time make sure you select “Full Size” when adding the image? I think if you’re using the default size it will enforce that one instead of allowing WordPress to supply the other sources.

You shouldn’t need to modify any HTML directly. I just used the TinyMCE toolbar button to add an image while editing a text element.