photo grid

From IndieWeb


photo grid is a visual display of a series of photo posts, typically 3 in a column, where only the photo of the post is visible, omitting the text.

IndieWeb Examples

manton.org

Manton Reece publishes a photo grid on his website at https://manton.org/photos

martymcgui.re

Marty McGuire publishes a photo grid on his website at https://martymcgui.re/photos

  • on hover, the text of the photo post appears with a translucent background over the photo
  • multi-photos are indicated with a little stacked icon in the top right corner

aaronparecki.com

Aaron Parecki publishes a photo grid on his website at https://aaronparecki.com/photos

  • multi-photos are indicated with a little stacked icon in the top right corner
  • some of the photos in the grid are from checkins, and there is no indicator of whether a post is a photo or checkin
  • Aaron Parecki: sometimes my post sorting includes a photo here that I don't want displayed in the grid, so I remove it from this page manually. (e.g. screenshots, some not so interesting photos in checkins)


christian.hockenberger.us

Christian Hockenberger publishes a photo grid on his website at https://christian.hockenberger.us/photo

  • All images from the Post Type Image are displayed in the grid; images that should not be in the grid are posted via Post Type Note.
  • Images are lazy loaded and the grid displays 50 image on one page. Pagination is active
  • multi-photos are displayed with an icon like on an Instagram.

jgregorymcverry.com

Greg McVerry publishes photo grids at https://jgregorymcverry.com/photos

  • Each photo in the grid is an h-entry to allow for licensing on a per photo basis
  • A small note is added and available on hover with the date the photo was published

Tantek

Tantek Çelik implemented a mini photo grid in the sidebar on his home page and demonstrated it on 2020-02-23.

338px-2020-054-tantek-photo-embed.png

Silo Examples

Instagram

Instagram profiles display a media grid (not just photo posts!)

Note the tiny icons / affordances in the top right of the two rightmost thumbnails.

  • 🎥 video camera icon: indicates that the thumbnail is a still from a video post
  • ◻️rounded square with a square underneath: indicates that the post is a multiphoto post

See Also