Excellent

I was excited when WordPress added responsive images and media queries to its core. Loved it even more when Jeff published this simple yet perfect plugin for managing the generated images in WordPress. It does what it says id does.

It disables the extra images generated by WordPress. For my use case I just enabled the thumbnail size.

With some planning

320 -> 539 [ mobile -> l-mobile ] // 1 column -> content: 525px
540 -> 759 [ l-mobile -> tablet ] // 1 column -> content: 703px
760 -> 979 [ tablet -> l-tablet ] // 1 column -> content: 923px
980 -> 1199 [ l-tablet -> desktop ] // 2 columns -> content: 850px
1200 -> 1419 [ desktop -> l-desktop ] // 2 columns -> content: 974px
1420 -> 1639 [ l-desktop -> wide ] // 2 columns -> content: 1139px
1640 -> 1859 [ wide -> l-wide ] // 2 columns -> content: 1139px
1860 -> [ l-wide -> infinity ] // 2 columns -> content: 1139px

some theme support

add_image_size( ‘themename-blog-image-mobile’, 525, 0, false );
add_image_size( ‘themename-blog-image-l-mobile’, 703, 0, false );
add_image_size( ‘themename-blog-image-tablet-l-tablet’, 923, 0, false );
add_image_size( ‘themename-blog-image-desktop’, 974, 0, false );
add_image_size( ‘themename-blog-image-l-desktop’, 1139, 0, false );

some image sizes

$sizes =
(max-width: 539px) calc(100vw – 7px*2),
(max-width: 759px) calc(100vw – 28px*2),
(max-width: 979px) calc(100vw – 28px*2),
(max-width: 1199px) 850px,
(max-width: 1419px) 973px,
1139;

and Jeff’s plugin, you can have WordPress do whatever you want with responsive images. 10/10

• This topic was modified 3 years, 4 months ago by apsuhos.
• This topic was modified 3 years, 4 months ago by apsuhos.
• This topic was modified 3 years, 4 months ago by apsuhos.