Generate images for srcset (theme)

sage
,
1

For a background in a theme, images for srcset should be generated from a large original image in the assets.
a webpack loader can’t be used because the look up happens at run time (PHP).

What is the best approach for adding a webpack task(?) that runs when watching and when building (and building for production?

2

I don’t understand your question. You say webpack can’t be used, but then ask how to use webpack. Can you give us some more details on what you’re trying to accomplish?

3

A webpack loader can’t be used in the blade template file because the blade template is rendered on the server. I still want to be able to somehow tell webpack to create resized images from an asset source image which can be used in the blade template.

Edit: I want to run some tasks before build/watch, currently I have to cheat by using url() in SCSS.

4

Sounds like you need something like this: https://github.com/herrstucki/responsive-loader

You can define your default image sizes (kinda like you do in WP) but it seems that you will have to require your images in the JS or CSS somewhere for it to run and create the images.

I guess you could just put them in a dummy JS file, don’t include it but reference the new file paths in blade.

1 Like
5

Right, currently a loop in SCSS is used for setting background-image and
with last background-image: none; for preventing download.

6

Not sure if it’s useful for your use case, but couldn’t you just make a new SCSS file, add your image imports, add the file to config.json and just don’t enqueue it? Saves writing the background-image: none hack in places.

7

Yes, this seems to be better.

Using a grunt/gulp-style task file in webpack doesn’t seem to be the right way as webpack uses loaders. Ideally webpack could process the (blade) PHP files and treating the URLs differently by keeping them in place (for server-side usage on runtime).

8

If the image is in the media library wouldn’t you want to use something likewp_get_attachment_image_srcset?

9

The image is used by the theme as background,
it should not be content, hence it isn’t WordPress media.