Add picture example.

[sheeeng]

Fix #743.

[wbamberg]

Thanks for your contribution! this is a nice example! I did have some comments:

• Ideally the rendered HTML in the "output" window all fits without the user needing to scroll. So I think the image should fit in the pane.

• I don't think you need two <picture> elements - I think one is enough, and using media="(min-width...> is a good choice. But, I think 600px is too narrow. 900 or even 1000 would be better. (At a browser window width of 600px, the interactive example gets so small it's hardly usable).

• I'd recommend you use real images, just because it will look better. In some of the other examples we've used images from unsplash.com, and acknowledged them in the output pane: https://interactive-examples.mdn.mozilla.net/pages/tabbed/datalist.html

• So I think you could choose a couple of real images, one which works better in a landscape aspect and one that works better in portrait, and use media="(min-width...> to select one or the other.

• I don't think you need to blockquote the instructions, you could just use a p. And I would word it something like "Change the browser window width to see the image change.".

• I don't think you need most of the CSS you are currently using. But I think you might want to have some to make sure the image is appropriately sized for the output.

I hope that helps!

[sheeeng]

Thank you for the feedback, @wbamberg. Appreciate them very much.
I have updated the example. Please review them.

[wbamberg]

This looks great! Thanks for the updates.

I had a few formatting suggestions:

• it's going to be more readable if you have a line break in the <source> element:

    <source srcset="/media/examples/picture-wide.png"
            media="(min-width: 1000px)">

• the footer overlaps the image at narrower widths:

The simplest fix for this is just to remove the <br/> elements. Also, I don't think you need to link to the unsplash images - AIUI we don't need to have any attribution, but it's polite to do so, but there's no need to link back to either the images or the photographer, and I'm worried that the footer HTML distracts from the main point of the example. Having said that, it would be nice to link to the photographer, so perhaps we could compromise with something like:

<footer>Images by <a href=https://unsplash.com/@davidclode>David Clode</a> on Unsplash</footer>

(I also think you can omit the period "." in the footer.)

But I would also like to know if @schalkneethling has opinions on attribution for Unsplash images. In other cases we haven't included any links (<datalist>, <select>), and it would be good to be consistent.

[schalkneethling]

@wbamberg @sheeeng The license on Unsplash does not require a link back, merely attribution. I do think it is the right thing to link back to the artist/image.

With that said, I am thinking we should have a standard piece of HTML you can use to add these to an example which is consistent. And with regards to linking, linking to both Unsplash and the creator is not required. Just linking to the creator is sufficient.

Any thoughts @wbamberg

[sheeeng]

Updated the example with the feedback. Please review them.

[wbamberg]

@schalkneethling , here's what I suggest:

For this PR, let's add a footer like:

<footer>Images by <a href=https://unsplash.com/@davidclode>David Clode</a> on Unsplash</footer>

That means @sheeeng is able to finish this PR without having to wait for us to decide on a general policy.

Separately I'll file an issue to decide what to do about attribution in general, and we'll use the resolution of that to update all relevant examples.

[wbamberg]

Thanks for your contribution @sheeeng , this looks great!

[welcome]

Congrats on merging your first pull request! 🎉🎉🎉