2019/Berlin/pictures

All Things Pictures was a session at IndieWebCamp Berlin 2019.

Watch: ▶️56:16s

Notes archived from: https://etherpad.indieweb.org/pictures

IndieWebCamp Berlin 2019
Session: All Things Pictures
When: 2019-05-04 15:20

Participants

Jan - facilitator
Tantek Çelik
Rosemary Orchard
Chris Adams
David Shanske
Calum Ryan
Jack Jamieson
Add yourself here… (see this for more details)

Notes

photos

https://github.com/microformats/h-entry/issues/14

Example article with a featured photo

<article class="h-entry">
  <h1 class="p-name">My china trip</h1>
  <p>My post text.</>
  <img class="u-featured" src="/photo-badb3c4ec2bd.jpg" title="Shanghai Bund" alt="Shanghai Bund at night">
  <p>more text</>
</article>

featured

Shoebox

  <div>
    <img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ..." title="Shanghai Bund" alt="Shanghai Bund at night">
    <picture>
      <source type="image/webp" sizes="(max-width: 600px) 100vw, 600px" srcset="/photo-cd77fa21c8f6.webp 150w,
                                                                                /photo-cd77fa21c8f6.webp 300w,
                                                                                /photo-cd77fa21c8f6.webp 600w,
                                                                                /photo-cd77fa21c8f6.webp 900w,
                                                                                /photo-cd77fa21c8f6.webp 1200w,
                                                                                /photo-cd77fa21c8f6.webp 1800w,
                                                                                /photo-cd77fa21c8f6.webp 4580w">
      <img sizes="(max-width: 380px) 100vw, 380px" srcset="/photo-badb3c4ec2bd.jpg 95w,
                                                           /photo-badb3c4ec2bd.jpg 190w,
                                                           /photo-badb3c4ec2bd.jpg 380w,
                                                           /photo-badb3c4ec2bd.jpg 570w,
                                                           /photo-badb3c4ec2bd.jpg 760w,
                                                           /photo-badb3c4ec2bd.jpg 1140w,
                                                           /photo-badb3c4ec2bd.jpg 2242w"
        src="/photo-badb3c4ec2bd.jpg" title="Shanghai Bund" alt="Shanghai Bund at night">
    </picture>
  </div>

You may want to comment: https://github.com/microformats/microformats2-parsing/issues/7

person-tag

Participants

Notes

Example article with a featured photo

See Also