Jasper de Groot

Hi,

I am glad that you resolved it. I am going to mark this topic as resolved for now. You can always open a new one if there is still something to look into.

Off topic: If I were you I would really remove that smooth scroll script. Scroll hijacking is considered a very bad practise! I remember I visited your site before to look into an issue and then I was completely unable to scroll anywhere besides top or bottom, using the trackpad on my Macbook. Now it’s not that bad but it’s still very annoying.

Hi,

Is that “smooth scroll script” still active on your site? Because I don’t notice any problem when I visit it.

hi cecymadero,

Can you post a link to a page on your website that has an image with the responsive image attributes and isn’t resizing as expected? I don’t really know where to look.
Also, on which browser do you see the problem?

Hi zecka1213,

Isn’t this the same question as your previous one? https://www.ads-software.com/support/topic/different-ratio?replies=3

Hi zecka1213,

You can use the picture element for that. See https://responsiveimages.org/. But this is outside the scope of this plugin and responsive images in WordPress 4.4.

It could also be because of the wp-caption wrapper. See https://www.ads-software.com/support/topic/just-installed-plugin-but-images-not-resizing?replies=4#post-8024925

Hi Kathleen,

I looked at your site and your theme already has img { max-width: 100%; height: auto; } in its CSS so there is no need to add this. The problem is that images with a caption are wrapped in a div with wp-caption which has a specific width set to it. Because this width is not limited to 100% it can be wider than the screen and because the image is only limited to 100% of this container div it can also be wider than the screen.
So the solution is the following CSS rule:

div.wp-caption {
    max-width: 100%;
}

This rule should go in a stylesheet (style.css) in a child theme. See https://codex.www.ads-software.com/Child_Themes for more info about this.
I would consider this a bug in your theme so I would report it to the theme author so they can fix it in the theme stylesheet.

Good luck!

Related thread https://www.ads-software.com/support/topic/cdn-doesnt-rewrite-srcset-urls?replies=1#post-7448963

That’s correct. We implemented the code from the plugin in WordPress 4.4. The plugin still offers two features that are not WordPress core.
The plugin adds Picturefill to your site. It’s a small JavaScript file that makes srcset work on browsers that don’t (fully) support that attribute: https://caniuse.com/#search=srcset
Besides that, the plugin offers advanced image compression. See https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/tree/dev#advanced-image-compression.
The plugin doesn’t load the new responsive images functions if you are using WordPress 4.4 and there won’t be any conflicts.

The data-o_* attributes are added by the WooCommerce plugin in case of variable products where each variation has its own image. These data- attributes contain the values for the general product image. JavaScript is used to replace the values of the image attributes by the ones of their data-o_ equivalent in case the general image needs to be shown.

The srcset is added by WooCommerce with a call to wp_get_attachment_image_srcset() so the fact that the 1000px width non-square image is included in there seems to be a bug in WordPress. I have to debug more though to figure out what goes wrong.

Hi AZ WIKI,

The width and height attributes are not added by this plugin. They are added by WordPress when you insert the image in the content. We use the values of those two attributes to get size info of the image and calculate the values for the srcset and sizes attributes.

Adding srcset and sizes attributes to image elements is what responsive images is about. Those attributes make browsers load different image sizes depending on what size the image is actually being displayed and if it’s an HD screen or not.

Your CSS will override the values of the width and height attributes. There is no need to remove them.

Systemaddict,

I opened a ticket for this issue on Trac: https://core.trac.www.ads-software.com/ticket/34810

This is because we accept a difference in ratio up to 0.01.

If you run this test code you will see that the ratio difference (compared to the src image) of all image sources is less than 0.01:

<?php
$src = array(380,256);
$src_ratio = $src[1] / $src[0];

echo nl2br("src dimension: " . $src[0] . 'x' . $src[1] . "\n" .
	"src ratio: " . $src_ratio . "\n\n");

$sources = array(
	array(320,213),
	array(480,319),
	array(690,459),
	array(380,256),
	array(849,565),
);

foreach ( $sources as $source ) {
	$source_ratio = $source[1] / $source[0];
	$ratio_diff = $src_ratio - $source_ratio;
	$use_source = ( abs( $ratio_diff ) < 0.01 ) ? 'yes' : 'no';

	echo nl2br("dimension: " . $source[0] . 'x' . $source[1] . "\n" .
		"ratio: " . $source_ratio . "\n" .
		"ratio diff: " . $ratio_diff . "\n" .
		"use in srcset: " . $use_source . "\n\n");
}

We need to allow a small difference because rounding to whole pixels when the soft crops are created results in slightly different ratios, but maybe we can reduce it to something like 0.005?
I wonder if it’s possible to calculate the biggest possible difference in ratio between two soft crops. Maybe someone who is very good at math has an idea?

===

Output test code:

src dimension: 380×256
src ratio: 0.67368421052632

dimension: 320×213
ratio: 0.665625
ratio diff: 0.0080592105263158
use in srcset: yes

dimension: 480×319
ratio: 0.66458333333333
ratio diff: 0.0091008771929825
use in srcset: yes

dimension: 690×459
ratio: 0.66521739130435
ratio diff: 0.0084668192219679
use in srcset: yes

dimension: 380×256
ratio: 0.67368421052632
ratio diff: 0
use in srcset: yes

dimension: 849×565
ratio: 0.66548881036514
ratio diff: 0.0081954001611804
use in srcset: yes

Hi Melela,

The plugin doesn’t add any settings page, because there are no settings ??

The plugin automatically adds srcset and sizes attributes to images in post content and to post thumbnails, but … the attributes are only added if there are multiple image sources available with the same aspect ratio after excluding images that are wider than 1600 pixels (that value can be configured with the max_srcset_image_width filter hook).

The attributes are added before the page is being displayed. So you don’t see the attributes in the post editor, only when you view the page source or inspect the code in your browser.

Did you change the dimensions of image size “medium” and/or “large” in the settings > media menu? Assuming you use the defaults (300 width/height for “medium” and 1024 for “large”) a srcset should be added to images in post content with at least those two image sizes. If the original image that you uploaded isn’t wider than 1600 pixels it should be included in the srcset as well.

For post thumbnails (featured images) it depends on what size has been set for them and most of all if crop is set to true. But let’s first focus on content images to not make it more complicated.

Let us know if you still think the plugin isn’t working after reading this information.

Hi Donald,

Thanks for testing and great to hear that everything works as expected!