Hi everyone,
I am not a specialist in web technologies, and I am not sure if I am pursuing the right path or not.
Here is the situation: I am generating media queries for images using a homemade component (I am not even sure what you call this :D) <.image> that generates the <picture> tag:
attr :src, :string, required: true
attr :alt, :string, required: true
attr :class, :string, default: nil
attr :rest, :global
def image(assigns) do
~H"""
<picture>
<source srcset={srcset_by_screen_size(@src)} />
<img src={@src} alt={@alt} class={["", @class]} {@rest}/>
</picture>
"""
end
When generating the assets, I added a mix task that read the priv/static/images and ImageMagick to the magick to create different image size (img.webp: img-sm.webp, img-md. web,…) so that srcset can find the resource.
This works ideally in dev mode, but not so nicely in production. I generate the different digest files, and of course I have digest file per images, something like img.webp → img-abcdef...webp, img-sm-122345...webp, img-md-122345...webp, …
But the src attribute that is passed to my component is now img-abcdef....webp and it can find the associated img-sm-122345...webp, img-md-122345...webp.
So what I did, is that I when I launch the server, I read the priv dir and generate a map to find back the goo file that looks like :
%{
"img-abcdef....webp" => %{ sm: "img-sm-122345...webp", md: "img-md-122345...webp"}
}
I find this a bit “overkill / not so nice” (call it as you wish), and I have no idea if there is a better way to do it. So, I am posting here to see if someone has some advice on how to do this, maybe a better way.
Thanks, community!!
