Reponsive images resizing

sage
,
1

What is the best practice approach for resizing static theme images to
different dimensions (for srcset/sizes). In previous sage 8.x I would use a gulp plugin
(GitHub - mahnunchik/gulp-responsive: gulp-responsive generates images at different sizes).

sage 9.x is webpack based, what loaders/tools are good for resizing a
single input image to different dimensions so it can be used for srcset?

The images are large and belong to the theme itself, treating them as media would
violate the separation of content and presentation (theme decoration),
hence I cannot use the WordPress integrated thumbnail generation for this.

For a header image, the theme static image can be specified as default image -
however, WordPress also doesn’t generate thumbnails for it - it doesn’t seem to
support responsive images/thumbnail generation for header default-image at all.

2

I found this but I’m not sure if it’s what you’re looking for :slight_smile: hope it helps!

3

And now this has to be integrated into blade somehow :slight_smile:.
Or I have to add the srcset myself.

4

Apparently this loader can only be used with JavaScript - not in PHP/Blade/HTML:

5

Yes that is a webpack loader so it only works within the javascript side of things.
You can either reference the new assets manually in your blade templates, or if you have experience with the html injector plugin, you could potentially plugin to that and make it write a partial you can then include somewhere else?

1 Like
6

An example for using the HTML injector plugin with the responsive loader would be great!

7

Doesn’t look like the plugin actually generates any template so that’s probably not a viable option.
The best solution I could come up with is using a lazy loading library such as lazySizes or whichever you prefer and then request the image with the proper image sizes from your scripts like the documentation says.

8

Thank you for your answer.
I will now try to integrate some extra task into webpack or the build script.
Even though with lazySizes I would still need to (automatically) resize
the original image to different sizes.