Some problems

Hi pincopallo!
I’m so sorry…but I don’t understand what the problem is and what you want to do?
When you say “imageclass”, is it really CSS classes you are talking about?

First of all thanks for the quickly answer and i’m sorry beacuse i was not able to explain me better, i don’t know anything about informatics, i want only build my own website and i’m having some problems with my template.
It`s fully responsive and i was thinking it means that it serves different sizes for different resolutions. But it’s resized using css or html.
For imageclasses i mean imagesize.
In my theme for every featured image exists different sizes and every size is linked with a particular item. I have different kind of carousels and thumbnails and everyone has different dimension.
The imagesize used by my theme are used to show different size of carousels and thumbnails and when the resolution changes the images are resized with css or html.
I spoke about classes because i set the Custom media queries without using the default settings, but I personalized it like in this example:

USE WHEN – IMAGE -CLASS – barcelona-md-vertical (336×450)
Maybe it was better use:
USE WHEN – IMAGE -SIZE – 336px
And adding a breakpoint linked with new sizes, only for the class or the size indicated.

In any case it doesn’t work.
– Every image takes the new breakpoints, and previous selection with class or size looks unuseful.
– I set 4 breakpoint but it reads only 2.
– The image size doesn’t change with different resolution, the only thing succeds is that it changes image and the new one is the smallest, changing resolution the image remain always the same, the smallest.
But the width and the height remain the original one. (336×450 Sizename: barcelona-md-vertical)

<img srcset=”https://localhost/…/…/A9-300×401.jpg 300w, https://localhost/…/…/A9-336×450.jpg 336w” sizes=”(min-width: 992) 336px, 300px” width=”336″ height=”450″ class=”attachment-barcelona-md-vertical size-barcelona-md-vertical wp-post-image” alt=”A9″>

<picture >
<source srcset=”https://localhost/…/…/A6-229×152.jpg&#8221; media=”(min-width: 1025)”><source srcset=”https://localhost/…/…/A6-220×145.jpg&#8221; media=”(min-width: 768)”><img srcset=”https://localhost/…/…/A6-170×112.jpg&#8221; width=”336″ height=”450″ class=”attachment-barcelona-md-vertical size-barcelona-md-vertical wp-post-image” alt=”A6″></picture>

Obviously i’m not an expert, but i think the plugin works good. I think I’m doing something wrong or It must be something strange in my theme and I was thinking was linked with the attributes width and height.
I had a look in every css file, php file and javascript and in no place the width and the height are setted in pixel, only adding the imagesize using set_post_thumbnail_size and add_image_size.

Do you have some idea? Am i doing something wrong?

Thks again.
PP

USE WHEN – IMAGE -CLASS – barcelona-md-vertical (336×450)
Maybe it was better use:
USE WHEN – IMAGE -SIZE – 336px

You should only write the classname (barcelona-md-vertical) and not the dimensions (336×450).
In the USE WHEN – IMAGE -SIZE scenario, it’s the name of the image size you should write, not the size in pixels.

– I set 4 breakpoint but it reads only 2.

One explanation might be that it’s not the full size image you’re inserting in the editor. Let’s say that you’re inserting a medium size image into the editor, media queries for large and full will be ignored then.

You can add a filter like this in order to get rid of the width/height attributes on the images.

Thks for advice me the width/height filter. It works! But it wasn′t the problem…and thks to explain me how use the media query scenario.
The linking works with both possibilities, calls and imagesize.

How i wrote you in the last comment, I was thinking the problem was linked with my theme, but it′s not so.
I try to download an other theme and i test the plugin but it works in the same way.

The bigger problem is that the srcset is injected rightly in the source code, but the served image is always the same, the smallest. With picture ans span-mode is the same.
When i change resolution the served image is always the smallest.
I tried to read something online, i red that many people with other plugin had the same problem and one possible reason it could be the browser.
I used Chrome and Firefox but the problem was always the same.

Here is the source code:

Largest size that should be used: https://localhost/…/A9.jpg
Media queries:
– Use thumbnail when min-width: 800,
– Use 200×200 when min-width: 1000
–><picture ><source srcset=”https://localhost/…/A9-200×200.jpg&#8221; media=”(min-width: 1000)”><source srcset=”https://localhost/…/A9-150×150.jpg&#8221; media=”(min-width: 800)”><img src=”https://localhost/…/A9-100×100.jpg&#8221; class=”attachment-post-thumbnail size-post-thumbnail wp-post-image” alt=”A9″></picture></div>

I have an other question.
Can i use the plugin inserting in the media query something like this? :

original image-size: 500×500

min width 800, imagesize 300×300
min width 1024, imagesize 200×200

Because in my responsive layout some thumbnails are showed in 4 columns when the resolution is 1024, and with a 800 resolution only in two columns so that the image-size is bigger than with a 1024 resolution.

Thanks
PP

The bigger problem is that the srcset is injected rightly in the source code, but the served image is always the same, the smallest. With picture ans span-mode is the same.
When i change resolution the served image is always the smallest.

The srcset is supposed to be in the source code ?? Are you sure it’s the smallest image that the browser loads? If the srcset and sizes attributes is correct, it’s up to the browser to handle things in the right way.

Can you post the source code again as code so it’s printed correctly?

I have an other question.
Can i use the plugin inserting in the media query something like this? :

original image-size: 500×500

min width 800, imagesize 300×300
min width 1024, imagesize 200×200

Yes, you can do it with the custom media queries-builder on the settings page or programmatically like this.

Yes i’m sure it’s the smallest.
The image is always the image i indicate like smallest in media queries.

Media queries:
– Use sm-170×112-1024px-m2 when min-width: 800,
– Use sm-229×152-1280px-m3 when min-width: 1024

–><img srcset=”https://localhost/…/0000004151-150×150.jpg 150w, https://localhost/…/0000004151-170×112.jpg 170w, https://localhost/…/0000004151-229×152.jpg 229w” sizes=”(min-width: 1024) 229px, (min-width: 800) 170px, 150px” class=”attachment-barcelona-sm size-barcelona-sm wp-post-image” alt=”0000004151″>

The text editor in this forum is still removing bits of the source code you’re posting. Can you paste it again, then select it and click the code button in the toolbar? It has to be formated as code since it contains HTML comments.

One thing I noticed now is that the media queries in the sizes attribute is missing the px unit.

sizes="(min-width: 1024) 229px, (min-width: 800) 170px, 150px"

It should look like this:

sizes="(min-width: 1024px) 229px, (min-width: 800px) 170px, 150px"

Great, may be you understood what’s wrong …you are a magic ??

Have I to write directly in media queries? I wrote only the number thinking that it can be only pixel.
Have I to write in the breakpoint “1024px” and not only “1024”? Is this right?

Here the media queries:

– Use sm-170×112-1024px-m2 when min-width: 1024,
– Use sm-220×145-991px-m1 when min-width: 800

Here the source code:

<img srcset="https://localhost/.../0000004151-150x150.jpg 150w, https://localhost/.../0000004151-170x112.jpg 170w, https://localhost/.../0000004151-220x145.jpg 220w" sizes="(min-width: 800) 220px, (min-width: 1024) 170px, 150px" class="attachment-barcelona-sm size-barcelona-sm wp-post-image" alt="0000004151">

I add in the breakpoint the unit “px” in media queries and something succeds.
Now it doesn’t take always the smallest, but always the 200×145 for every scenarios.

Media queries:
Largest size that should be used: https://localhost/…/0000004151-384×253.jpg
– Use sm-170×112-1024px-m2 when min-width: 1024px,
– Use sm-220×145-991px-m1 when min-width: 800px

Source-code:

<img srcset="https://localhost/TgSardinien.com/wp-content/uploads/2016/05/0000004151-150x150.jpg 150w, https://localhost/.../0000004151-170x112.jpg 170w, https://localhost/.../0000004151-220x145.jpg 220w" sizes="(min-width: 800px) 220px, (min-width: 1024px) 170px, 150px" class="attachment-barcelona-sm size-barcelona-sm wp-post-image" alt="0000004151">

Using Picture mode:

- Use sm-170x112-1024px-m2 when min-width: 1024px,
- Use sm-220x145-991px-m1 when min-width: 800px
--><picture ><!--[if IE 9]><video style="display: none;"><![endif]--><source  srcset="https://localhost/.../0000004151-220x145.jpg" media="(min-width: 800px)"><source  srcset="https://localhost/.../0000004151-170x112.jpg" media="(min-width: 1024px)"><!--[if IE 9]></video><![endif]--><img srcset="https://localhost/.../0000004151-150x150.jpg" class="attachment-barcelona-sm size-barcelona-sm wp-post-image" alt="0000004151"></picture>

It looks like if it works better because
With resolutions smallest than 800px it shows 150×150
with resolutions bigger than 800px it shows 240×145

If I try to change the media queries like here, using bigger image-sizes for bigegr resolutions than it works perfectly, but only with picture mode:

– Use sm-170×112-1024px-m2 when min-width: 800px,
– Use sm-220×145-991px-m1 when min-width: 1024px

It shows 150×150 for resolutions smaller than 800px
170×112 for resolutione between 800px and 1024 px
and for bigger resolutions than 1024px 200×145

With srcset mode it shows always the 200×145 with any resolution.

I think min-width 800px will override min-width 1024 since it’s declared after.

Even on screens larger wider than 1024px, the 220px image will be used.

sizes="(min-width: 800px) 220px, (min-width: 1024px) 170px, 150px"

This would work better:

sizes="(min-width: 1024px) 170px, (min-width: 800px) 220px, 150px"

HI, thank you for your answer. I think the support team works really good.

Have you an idea why using the “image-srcset mode” doens’t work for me? …but only the picture mode.

I have tried to do what you adviced me and unlucky it did’nt work.
At the moment it works only using “picture mode” and only if I link smaller image-sizes to lower resolutions.
If I try to put an image-size bigger than the following one linked to a bigger resolution than the previous, using the debug mode I can’t see it between the media-queries.
It’s like if it doesn’t exist.
I know it’s stupid what I need to do, because the plugins like this one exist because it’s smarter use lttler images for lower resolutions, but in my theme some thumbnails become bigger whith a lower resolution. What it was showed with resolutions bigger than 1024px in 5 columns, it’s showed in 2 columns and bigger than before with some lower resolutions.

It would be great use perfect image-sizes, for every resolutions.
Are you sure is it possible do what I need?

I have also an other problem.
If i don’t create a media-query to link some image-sizes to a particular size or class,I don’t why the plugin put old media-queris to all images that has’t a specific media-query.
These queries I think they are the old ones I wrote to try to learn how the plugin works, but now and since much time I canceled them.
Using the debug mode I can still see them, and they are really many, something like 20.
I have tried to uninstall the plugin, but it did’nt work and they are always there, they must be memorized in some place and I dont know where.

Does exist a method to cancel them?

Thank really much for your attention and patience
PP

I think the support team works really good.

Haha, I which I had one! ??

At the moment it works only using “picture mode” and only if I link smaller image-sizes to lower resolutions.

Do you have a retina screen? When using srcset, the browser can pick a larger image than you might have expected. The reason is that your screen wants an image with higher resolution. This doesn’t happen with the picture element.

If I try to put an image-size bigger than the following one linked to a bigger resolution than the previous, using the debug mode I can’t see it between the media-queries.
It’s like if it doesn’t exist.

I’m sorry, but I don’t understand this.

I know it’s stupid what I need to do, because the plugins like this one exist because it’s smarter use lttler images for lower resolutions, but in my theme some thumbnails become bigger whith a lower resolution. What it was showed with resolutions bigger than 1024px in 5 columns, it’s showed in 2 columns and bigger than before with some lower resolutions.

It would be great use perfect image-sizes, for every resolutions.
Are you sure is it possible do what I need?

Yes it’s possible. If I understand you correctly, the scenario is exactly the same as in this example?

I have tried to uninstall the plugin, but it did’nt work and they are always there, they must be memorized in some place and I dont know where.

All data that the plugin saves in the database is removed when you uninstall it. Are you sure that you haven’t forgotten any code in functions.php or in a template?

Sorry if i answer only now.

The example you linked me was right, i have exactly the same situation, but with your example works good, with mine not.

Th only difference i saw is hat in your example sizes are indicated like below:
‘sizes’ => ‘(min-width: 992px) 320px, (min-width: 720px) 480px, 320px’

First the bigger resolution and relative image size, and then lower resolution and realtive sizes.

In my situation, even if I try to change the order in mediaqueries the string is always the same like below:

‘sizes’ => ‘(min-width: 720px) 480px,(min-width: 992px) 320px, 320px’

Is it possible is this the problem?
If yes, how can i changed it?

Thks

It’s like if in your example the string is ordered by the resolution and in mine by the image sizes, first the bigger and then the smaller.