Docs

[Kiki]

Hi,

looking at your demo for integrity (http://demo.theme.co/integrity-1/blog/) I see that all the images have a complete image tag with srcset and sizes. On my site images are instead rendered without srcset and sizes, so the original (biggest) image size is always loaded. How can I change this behavior?

I had a look at https://community.theme.co/forums/topic/responsive-images-9/ but all the mentioned function or hook names seem (still) not to exist in the x-theme folder.

Thanks for your help!

[Kiki]

This reply has been marked as private.

[Christian]

Hey Kiki,

srcset is still not supported in Cornerstone elements. If you need to utilize it, add an image in the text element using the regular image embed button.

Thanks.

[Kiki]

Im not using cornerstone. I used it for the startpage, but not for the articles. I’m using the WP default WYSIWYG-editor and featured image on posts. So cornerstone or any other editor is not the problem.

[Rad]

Hi there,

Please check this other related thread https://community.theme.co/forums/topic/enable-srcset/

Cheers!

[Kiki]

The Thread seems to be private or deleted… “It seems we can’t find what you’re looking for. Perhaps searching can help.”. Can you paste the important facts here? Thank you!

And one more related question for my understanding: What solution did you choose to get the images in your own http://demo.theme.co/integrity-1/blog/ right?

[Joao]

Hi there,

The responsive srcset feature from WordPress was disabled with intent and much decision weighing things out as we have had our own responsive image calculations in place for X that take into account things that WordPress cannot due to the nuances of the theme. That being said, we can understand that you may wish to utilize this feature, even though we do not currently support it. For now, you will need to leave your fix in place in the core files of the theme, but in the next release we have made this function “pluggable” so that you can overwrite it via your child theme. When the next release is out, if you go to /functions/global/admin/thumbnails/setup.php you will see at the bottom of the file this block of code:

if ( ! function_exists( 'x_disable_wp_image_srcset' ) ) :
  function x_disable_wp_image_srcset( $source ) {
    return false;
  }
  add_filter( 'wp_calculate_image_srcset', 'x_disable_wp_image_srcset' );
endif;

Again, this will be in the next release, not this current one. To overwrite this when the update is out, you can add your own x_disable_wp_image_srcset() function to your child theme’s functions.php file, which will keep this one from disabling the responsive srcsets. That might look something like this in your child theme:

function x_disable_wp_image_srcset( $source ) {
  return true;
}

Simply overwriting the function should also remove the add_filter call from X as that is also wrapped inside the if statement.

Do keep in mind that this is not a feature we support in X, so enabling responsive srcsets again means that we will not be able to assist in any formatting or functional issues that might arise because of this, but we want to make sure that you at least have a clean way to do this via your child theme if desired. Hopefully this helps and don’t hesitate to let us know if you have any further questions.

[mateoserendipia]

Hi,

X has disabled the Responsive Image functionality that is in the WordPress core. I have switched it back on as per the instructions in this thread. I have set-up a simple test page, with set of images that allow to check which is size of image is being used when viewed at different screen sizes (dimensions are shown in the image).

All images are inserted in a text box (so not as a cornerstone image element)

http://www.roodlof.wp/resp

This simple testpage uses six columns, and six images ranging from 1 to 6 columns wide. What becomes clear is that the responsive image functionality only works partially:

The original image is 2488 px wide.

In Imac 27″ (screen = 2560 pixels wide):
– 6/6-column image: 2488 px wide served => correct size is served
– 1/6 column image: 2488 px wide served => wrong size; should have been 724 px wide (also available)

On MacBook Air 13″ (screen = 1440 pixels wide)
– 6/6-column image: 1484 px wide served => correct (smaller) size is served
– 1/6 column image: 1484 px wide served => wrong size; should have been 500 px wide (also available)

Conclusion: the responsive images only adjust to the view width of the screen, and not to width of the container they are in, which means images far to large are still being served when the image is in any smalleer than a 6/6 column. This is not how the core functionality was intended to work, so it must be something related to X. My question would be: is there something I can do to improve this conduct?

Cheers!

[Christian]

Hey Mateo,

WordPress’ responsive image feature adjusts to the screen and not the container by default. It looks like you have tried the 2016 theme because that is an exception because it has a responsive image enhancement feature. If you need it, you can try implementing it in X. That would be outside the scope of our support though as it might cause conflicts.

Thanks.

[mateoserendipia]

Hi Christian,

You are right, I did some digging and the responsive image feature adjusts to the screen width (vw) and not image container – I always assumed it would take the next largest image necessary for the specified container, but this unfortunately is not true. Weird – it still means that an image of say 1/6 column width takes up 3500% more band with than needed, even if the responsive feature is switched back on (of course you can still choose another size in the insertion dialogue, but that wasn’t the idea…). It seems then that the responsive feature is especially usefull for mobile screens, because there normally all images are made full width, and thus would benefit from adapting all to the same (smaller) vw.

I hadn’t looked at the WP 2016 theme, so I wasn’t aware of any enhanced features there. But it’s good to know at least that the core feature’s function is not changed by X (when switched back on).

Thanks!
Mateo

[Christian]

You’re welcome. Yes, responsive image feature was primarily built for mobile.

[Author]

Posts