storage-resize-images: Resize images by specifying only a width

storage-resize-images

This feature request is for extension: \storage-resize-images

What feature would you like to see?

Indicate only a width for the image rather than also specifying the height. This is helpful for mobile and other scrollable formats.

How would you use it?

I would indicate breakpoints for the images based on width and generate a series of images that would be appropriate for different families of mobile devices. For example, Bootstrap uses these media queries

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

I would then create images with each of these widths and utilize them with media queries to grab an image that is big enough for my device and avoid downloading high res images.

[russellwheatley]

Ok, thanks for the feedback. I’m sure the FE team will consider your feature request 😄 . It is possible to pass in just one dimension to sharp: https://sharp.pixelplumbing.com/api-resize#parameters

[chrisjacobs91]

I’m trying to resize an image of any aspect ratio to use in a square (300x300). I have setup my resize function to 300x300, however that (as expected I guess) makes sure no dimension is bigger than 300, whilst preserving the aspect ratio. So I end up with an image that’s either 300x200 or 200x300 for example.

Is it possible to specify that no dimension should be smaller than 300px, whilst maintaining aspect ratio?

Sort of the inverse of this scenario 😃

Update This can be achieved by changing the fit: inside parameter to fit: outside on the sharp function. Docs found here: https://sharp.pixelplumbing.com/api-resize