Anyone made a <picture> view component they’d like to share?

[tysongach]

The HTML <picture> element seems potentially ripe for being wrapped up as a view component…

• I often have to look up the syntax to get it right
• The syntax feels fairly repetitive, especially things like the filename (e.g. name-of-image) and the type (e.g. webp) if you’re providing fallbacks for newer formats

Has anyone made a component(s) around this they’d share?

[boardfish]

I'd recommend doing this by making sources with a renders_many lambda slot, e.g.

renders_many :sources, ->(**params) { tag.source(**params) }

I imagine params passed to the initializer for the component would dictate how the img gets rendered. I also think that you'd probably pass the result of an asset_path call to your sources — I wouldn't recommend using that helper directly inside the component to keep it isolated from the view context.

I haven't actually seen the picture docs until now, but your mention of it has me curious as to how a component for it could look. Hopefully my suggestions can give you a few pointers on implementing it yourself, should you wish to, but I'd also like to give this a shot myself if I find the time.

[boardfish]

Finally got around to this, apologies for the wait! Here you go.

The sources and the img are lambda slots that generate the corresponding tags. Note that the interface for this implementation is pretty liberal - any params you specify will be passed to the tag helpers. If you wanted to have a more advanced implementation that validates the srcset param among others, you may want to make components for source and img to allow for that.