Publishing images for CSS in DXA HTML Design zip

Question

I need a few images as background images for my CSS being published from the HTML Design in DXA. However, adding images to the assets folder of my zip file doesn't seem to add anything to my web application when I publish the HTML Design. In fact, if I add these images to the file system manually in the appropriate location (..\system\assets) they are removed when I hit my website.

I realize there are ways to manually deploy the images to other locations, but I'd prefer to manage these images in the same location as my CSS, in the zip file. Is this possible?

It seems like there's an unresolved issue reported on the DXA project for this functionality: https://github.com/sdl/dxa-html-design/issues/1, which suggests it is not possible at this time, but this questions seems to suggest it may be possible: Is it possible to publish binary files with same name to multiple directory by DXA?

Answer 1

There is a component which is linked to in the HTML design component called build-files. It points to the Modules/Core/Admin/Build Files component. This component's zip file contains a gruntfile that defines exactly what grunt does on the presentation server. Specifically the gruntfile by default contains instructions to remove almost everything from the assets folder with a "clean" command. Then the gruntfile specifies that the appropriate asset files should be copied back to the presentation server (by default the JS and CSS are included). Additionally, you can include images by updated the "copy" command in this gruntfile to include your specific image folder.

By default you'll see the lines:

// ignore all images (unless we really need some)               
//'system/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}',

By removing the comments on the second line you will include all the images in your your zip file linked to in the Modules/Core/Admin/HTML Design component under the field HTML design.

I would also recommend that you nest your specific images within another folder and point to that folder in the gruntfile, something like assets/images/theme. That way you don't include any of the default DXA placeholder images as well. In the gruntfile you would then have

// ignore all images except those in the theme folder
'system/assets/images/theme/**/*.{png,jpg,jpeg,gif,webp,svg}',

After this has been completed you'll need to make certain that the _system/assets/images/theme structure group exists as well so that the images have a place to land.