Phoenix HTML Tag - create a child in a tag

Phoenix Forum Questions / Help
,
1

Hi, I would like to render the <picture> html tag in my templates and filled using dynamic data. One use of the <picture> tag is to show different images depending on the browser size (desktop vs mobile). To do this it requires a <source> tag and of course the <img> tag:

<picture>`
    <source media="(min-width: 800px)"
            sizes="100vw"
            ... >
    <source media="(min-width: 600px)" 
            ...>
    <img src="..."/> 
</picture>

I looked at Phoenix.HTML.Tag macro but this only seems to be able to render attributes for one tag only, such as img. Is there a way to add all the children <source> and <img> using this macro, or another macro that can do this?
Thanks.

2

I’m not aware of any, but I just wrote one in Ruby that I was thinking of porting over to Elixir. If you don’t find one, then I can help out.

3

Hi @dbern, sounds good - not coming from Ruby, I’d be interested to see how that would even look like.

I think my question is about nested tags, so I’ve done more googling on this and it seems I can do this with

    content_tag(:picture, class:"some-class") do
        [content_tag(:source, ...) do 
             .... 
        end
    end
3 Likes
4

Yep! That’s how I would approach it!