[Resolved] Is it possible to set some custom sizes to images so to have a scrset display?

[Author]

Posts

[Franco Calcagni]

We need to know if in toolset is possible to identify some custom sizes (like thumbnail, full parameters set in WordPress) so to get particular sizes of images that can be served with the scrset attribute based on screen resolution defined in media queries.
Those images shall be automatically resampled and created various instances when uploaded in the media archive.

Thanks.

[Christian Cox]

Hi, you can define custom image sizes and dimensions by adding this snippet to your theme or Custom Code settings:

// FILTER TO ADD CUSTOM IMAGE SIZES
add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
  return array_merge( $sizes, array(
    'size_1' => __( 'Size 1 name' ),
    'size_2' => __( 'Size 2 name' ),
    'size_3' => __( 'Size 3 name' ),
  ));
}

add_image_size ('size_1', 600, 300, true);
add_image_size ('size_2', 800, 345, true);
add_image_size ('size_3', 1000, 420, true);

Modify the names of the sizes and the dimensions of each size, then add or remove rows as needed.

[Franco Calcagni]

Hi Christian,
thanks for your prompt reply.
I suppose that adding this custom code it will create automatically the instances of that image in the media archive. But how to "call" the correct image size depending on the screen resolution?
I mean, we need to serve the "medium-size" image if the user views the page on a tablet, the "small-size" image if he's on a smartphone and "full-size" if on desktop.
How can this be achieved in toolset layout/views?

Thanks
Franco

[Christian Cox]

But how to "call" the correct image size depending on the screen resolution?
There's nothing built-in to Layouts or Views to do this for you. You'll have to write the necessary HTML markup in a View or template. More information about responsive images here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

[Franco Calcagni]

Hi Christian,
thenks for the reply we already know the scrset way to serve resposive images, but is there in Toolset a way to attach in the single scrset value the correct image taken from the custom size image we generated?
i.e.
<img srcset="img-small.jpg 320w,
img-medium.jpg 480w,
img-large.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="img-large.jpg" alt="Elva dressed as a fairy">
How the scrset value can populate the image .jpg with the correct one?

Thanks
Franco

[Christian Cox]

There's no built-in way to generate this type of img tag. You must write the img tag, and use the Types field shortcode to insert the correct resized image URLs. For example:

<img srcset="[types field='your-field-slug' size='size_1' url='true'][/types] 320w,
[types field='your-field-slug' size='size_2' url='true'][/types] 480w,
[types field='your-field-slug' size='size_3' url='true'][/types] 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="[types field='your-field-slug' size='size_3' url='true'][/types]" alt="Elva dressed as a fairy">

More information about customizations to the Types image field shortcode:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image

[Franco Calcagni]

Thanks Christian, great support as always 😉
I will set this issue as resolved but I forst wanted to thank you because then our messages are not viewed by you.

Best,
Franco

[Franco Calcagni]

My issue is resolved now. Thank you!