For example on https://nicolas-hoizey.photo/portraits/studio/strobe/

See https://github.blog/2021-06-22-framework-building-open-graph-images/

• Home
• Gallery
• Photo
• Tag
• Blog root
• Blog home
• Contact
• Gear home
• Gear brand
• Gear piece

https://nicolas-hoizey.photo/galleries/misc/sports/in-the-starting-blocks-for-the-men-s-110m-hurdles/

See https://developers.google.com/search/docs/advanced/sitemaps/image-sitemaps?visit_id=637723083257896350-2775465710&rd=1

See https://baymard.com/blog/2021-current-state-of-ecommerce-homepage-ux#broad-products-range

🤯

See http://localhost:8080/travels/north-america/caribbean/dominican-republic/samana/

https://unsplash.com/developers

• https://github.com/deoostfreese/Parvus
• https://codepen.io/chriscoyier/pen/rWbZPV
• https://www.markllobrera.com/posts/eleventy-building-image-gallery-photoswipe/

See:

• https://www.mediasuite.co.nz/blog/generating-svg-sprites-the-easy-way/
• https://github.com/svg-sprite/svg-sprite
• https://broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/
• https://css-tricks.com/svg-fragment-identifiers-work/
• https://lab.iamvdo.me/sprites-svg/

To prevent issues with browsers cache (set to one week) when the sprite changes.

Automate in photo sync script

Requires sub-grid?

Inspired by @n1k0: https://twitter.com/n1k0/status/1384517585459425280

• Gear
• Focal lengths
• Apertures
• ISOs
• Dates: years, months
• Aspect ratio: landscape, portrait, square

Inspiration:

• https://github.com/GoogleChromeLabs/squoosh/blob/dev/src/shared/prerendered-app/Intro/imgs/logo-with-text.svg?short_path=b4cfbec
• https://twitter.com/jaffathecake/status/1414847898425167872

Use localStorage or a cookie

Prevent issues with cache

• geoJSON file
• sprite JSON
• sprite image

Use https://github.com/GoogleChrome/web-vitals

https://nicolas-hoizey.photo/travels/europe/italy/rome/vatican-city/find-your-way/

Enhance Ken Burns effect

• reduced calls to mapbox
• one less domain on the photo page

• By location name
• By title and description text
• By color

Search by keywords in title and description text.

With filter/facets:

• year / month
• camera body
• lense(s)
• location name
• tag(s)
• color(s)
• aperture
• shutter speed
• ISO
• focal length

See https://devblogs.microsoft.com/surface-duo/foldable-css-javascript-edge-96/

• Home page
• Gallery
• Photo
• Global map
• Blog home
• Blog post

For example:

• https://nicolas-hoizey.photo/travels/europe/france/ile-de-france/hauts-de-seine/la-defense/layered-symmetry/
• https://nicolas-hoizey.photo/travels/north-america/united-states/new-york/liberty/

In addition:

• #177

max-width: 100% is easy, but what about max-height?

See:

• https://github.com/mapbox/storytelling
• https://demos.mapbox.com/scrollytelling/
• https://blog.mapbox.com/how-to-build-a-scrollytelling-map-ead6baf2cd1b
• http://googlemapsmania.blogspot.com/2019/11/mapboxs-new-scrollytelling-template.html
• https://www.williamrchase.com/post/scrollytelling-with-gsap-scrolltrigger/

• https://photoswipe.com/
• https://www.markllobrera.com/posts/eleventy-building-image-gallery-photoswipe/#fnref5
• dimsemenov/PhotoSwipe#753 (comment)

• Inline? https://twitter.com/simonhearne/status/1394575407685513216
• subset, at least for critical characters
• automate creation of CSS for font subset and complementary range
• prevent layout shift for page title

JS to load only if prefers-reduced-motion: no-preference

In https://nicolas-hoizey.photo/galleries/nature/animals/mammals/elephants/elephants-family-in-maasai-mara/

In https://nicolas-hoizey.photo/galleries/travels/asia/hong-kong/the-star-ferry-in-victoria-harbour-hong-kong/

Would mean removing animations.

See https://www.andreaverlicchi.eu/capping-image-fidelity-2x-minimize-loading-time/

Link to the map with the center and zoom depending on photos in the gallery