How do you mark up Collections for #IndieWeb?

So we have had many discussions these past few days on a variety of IndieWeb channels about collections. 

Think about photo galleries, SoundCloud playlists, Youtube playlists, Pinterest pages. All collections.

There is no right way to markup a collection. I often say with #IndieWeb we journey on a path of plurality to a destination of best practice.

Normal people would say, "Throw spaghetti at the wall and see what sticks."

I decided to throw a few noodles in the pot. Let me know if this stirs any thoughts or if you have any ideas bubble up to the top:

Video Playlist

Published by J. Gregroy McVerry on 11^th November 2018

my awesome movies

tag tag tag

1 of 4

Video Name by jgmac1106

Original media

2 of 4

Video Name by jgmac1106

Original media

3 of 4

Video Name byjgmac1106

Original media

4 of 4

Video Name byjgmac1106

Original media

Here's the recipe:

 

<article class="h-entry">
  <h1 class="p-name">Video Playlist</h1>
  <div class="pubinfo">
  <p>Published by <a class="p-author h-card" href="https://jgregorymcverry.com">J. Gregroy McVerry</a>
     on <time class="dt-published" datetime="2018-11-1 08:38:00">11<sup>th</sup> November 2018</time></p>
  <span class="summary">
    <p class="p-summary">my awesome movies</p>
    <p>
      <a class="u-category" href="$url">tag</a><a class="u-category" href="$url">tag</a><a class="u-category" href="$url">tag</a>
    </p>
    </span>
 </div>
    <div class="copy">
  <div class="e-content">
    <div class="h-entry"><data class="p-category" value="1">1 of 4</data><p><span class="p-name">
      Video Name</span> by <a class="u-author h-card" href="https://jgregorymcverry.com">jgmac1106</a>
      </p>
      <video controls class="u-photo" poster="/images/w3html5.gif"><source src="movie.mp4" type="video/mp4" class="u-video" ></video> </div>
    <div class="h-entry"><data class="p-category" value="2">2 of 4</data><p><span class="p-name">
      Video Name</span> by <a class="u-author h-card" href="https://jgregorymcverry.com">jgmac1106</a>
      </p> <video controls class="u-photo" poster="/images/w3html5.gif"><source src="movie.mp4" class="u-video" type="video/mp4" ></video> </div> 
  <div class="h-entry"><data class="p-category" value="3">3 of 4</data><p><span class="p-name">
      Video Name</span> by<a class="u-author h-card" href="https://jgregorymcverry.com">jgmac1106</a>
      </p><video controls class="u-photo" poster="/images/w3html5.gif"><source src="movie.mp4" type="video/mp4"></video> </div> 
<div class="h-entry"><data class="p-category" value="4">4 of 4</data><p><span class="p-name">
      Video Name</span> by<a class="u-author h-card" href="https://jgregorymcverry.com">jgmac1106</a>
      </p><video controls class="u-photo" poster="/images/w3html5.gif"><source src="movie.mp4" type="video/mp4" class="u-video" ></video> </div> 
  </div>
      </div>
</article>

Here the parsing after I throw the url through a strainer:

 "author": [
                    {
                        "type": [
                            "h-card"
                        ],
                        "properties": {
                            "name": [
                                "J. Gregroy McVerry"
                            ],
                            "url": [
                                "https://jgregorymcverry.com"
                            ]
                        },
                        "value": "J. Gregroy McVerry"
                    }
                ]
            },
            "children": [
                {
                    "type": [
                        "h-entry"
                    ],
                    "properties": {
                        "category": [
                            "1"
                        ],
                        "name": [
                            "Video Name"
                        ],
                        "photo": [
                            "https://jgmac1106homepage.glitch.me/images/w3html5.gif"
                        ],
                        "video": [
                            "https://jgmac1106homepage.glitch.me/movie.mp4"
                        ],
                        "author": [
                            {
                                "type": [
                                    "h-card"
                                ],
                                "properties": {
                                    "name": [
                                        "jgmac1106"
                                    ],
                                    "url": [
                                        "https://jgregorymcverry.com"
                                    ]
                                },
                                "value": "https://jgregorymcverry.com"
                            }
                        ]
                    }
                },
                {
                    "type": [
                        "h-entry"
                    ],
                    "properties": {
                        "category": [
                            "2"
                        ],
                        "name": [
                            "Video Name"
                        ],
                        "photo": [
                            "https://jgmac1106homepage.glitch.me/images/w3html5.gif"
                        ],
                        "video": [
                            "https://jgmac1106homepage.glitch.me/movie.mp4"
                        ],
                        "author": [
                            {
                                "type": [
                                    "h-card"
                                ],
                                "properties": {
                                    "name": [
                                        "jgmac1106"
                                    ],
                                    "url": [
                                        "https://jgregorymcverry.com"
                                    ]
                                },
                                "value": "https://jgregorymcverry.com"
                            }
                        ]
                    }
                },
                {
                    "type": [
                        "h-entry"
                    ],
                    "properties": {
                        "category": [
                            "3"
                        ],
                        "name": [
                            "Video Name"
                        ],
                        "photo": [
                            "https://jgmac1106homepage.glitch.me/images/w3html5.gif"
                        ],
                        "author": [
                            {
                                "type": [
                                    "h-card"
                                ],
                                "properties": {
                                    "name": [
                                        "jgmac1106"
                                    ],
                                    "url": [
                                        "https://jgregorymcverry.com"
                                    ]
                                },
                                "value": "https://jgregorymcverry.com"
                            }
                        ]
                    }
                },
                {
                    "type": [
                        "h-entry"
                    ],
                    "properties": {
                        "category": [
                            "4"
                        ],
                        "name": [
                            "Video Name"
                        ],
                        "photo": [
                            "https://jgmac1106homepage.glitch.me/images/w3html5.gif"
                        ],
                        "video": [
                            "https://jgmac1106homepage.glitch.me/movie.mp4"
                        ],
                        "author": [
                            {
                                "type": [
                                    "h-card"
                                ],
                                "properties": {
                                    "name": [
                                        "jgmac1106"
                                    ],
                                    "url": [
                                        "https://jgregorymcverry.com"
                                    ]
                                },
                                "value": "https://jgregorymcverry.com"
                            }
                        ]
                    }
                }
            ]
        },
        {
            "type": [
                "h-card"
            ],
            "properties": {
                "name": [
                    "Greg McVerry"
                ],
                "locality": [
                    "East Haddam, CT"
                ],
                "country-name": [
                    "USA"
                ],
                "photo": [
                    "https://0.academia-photos.com/275850/62912/68932/s200_j._gregory.mcverry.jpg"
                ],
                "url": [
                    "http://jgregorymcverry.com",
                    "https://mastodon.social/@jgmac1106",
                    "https://twitter.com/jgmac1106"
                ],
                "email": [
                    "mailto:jgregmcverry@gmail.com"
                ]
            }
        }
    ],

This may work for an audio and video playlists. We also had a discussion of how to mark up collections of photos when you display thumbnails. How do you tell a reader to load the full image?

Time to head to the kitchen