search

bridgetownrb / bridgetown

A next-generation progressive site generator & fullstack framework, powered by Ruby
https://www.bridgetownrb.com
MIT License
1.13k stars 114 forks source link

docs: Bundling images #829

Closed wilsonsilva closed 8 months ago

wilsonsilva commented 10 months ago

Motivation

I need my images to be hashed for caching purposes. I read https://www.bridgetownrb.com/docs/frontend-assets#additional-bundled-assets-fonts-images and it does not mention any modifications to the esbuild config.

I have the image in both locations, src/images/folder/somefile.png and frontend/images/folder/somefile.png and I'm referencing it in my liquid index.liquid template as follows:

<img src="{% asset_path images/folder/somefile.png %}">

But I got this error:

[Bridgetown]  esbuild: The `images/folder/somefile.png' asset could not be found.
[Bridgetown]  esbuild: Double-check your frontend config or re-run `bin/bridgetown frontend:build'

Suggestion

I fixed it by following the next chapter: https://www.bridgetownrb.com/docs/frontend-assets#globbing-multiple-assets. It seemed like a completely different use case. My suggestion is to make it clear that unless we import the images in JavaScript, they won't be bundled or found.

jaredcwhite commented 8 months ago

Well it does say in that first section:

in CSS/JS files, you can reference fonts/images saved somewhere in the frontend folder

And I'm not sure what you mean by "completely different use case". This is the use case: if you have images you want pipe through esbuild for hashing purposes, you'll need to use the glob functionality. But if you have some suggestions for better wording, feel free to edit and submit a PR!