i want the images to be displayed in 4 modes !
- 0px - 350px = show image 350*350
- 351px - 767px = show image 768*768
- 768px - 1024px = show image 500*500
- 1025px - up = show image 350*350
i use the following code
function silencio_content_image_sizes_attr( $sizes, $size ) {
return '(max-width: 350px) 350px, (max-width: 767px) 768px, (max-width: 1024px) 500px, (min-width: 1025px) 350px, 350px';
} add_filter( 'wp_calculate_image_sizes', 'silencio_content_image_sizes_attr', 10 , 2 );
displays correctly in all modes except mobile mode which displays the image in full instead of 350*350 size !
<img width="1920" height="1080" src="https://site/wp-content/uploads/2022/03/1372.jpg" class="attachment-full size-full" alt="" loading="lazy" srcset="https://site/wp-content/uploads/2022/03/1372.jpg 1920w, https://site/wp-content/uploads/2022/03/1372-350x197.jpg 350w, https://site/wp-content/uploads/2022/03/1372-500x281.jpg 500w, https://site/wp-content/uploads/2022/03/1372-768x432.jpg 768w, https://site/wp-content/uploads/2022/03/1372-1024x576.jpg 1024w" sizes="
(max-width: 350px) 350px,
(max-width: 768px) 768px,
(max-width:1024px) 500px,
(min-width:1025px) 350px,
">
where is my mistake?