ericwood.org / photos-site
A little app to serve my photography from my personal website
fork atom

apply aspect ratio to photos to avoid layout shift

ericwood.org 3f09342f 1687930d

Waiting for spindle ...
+5 -1
+1
src/views/photos/index/template.jinja
··· 21 21 id="{{ photo.id }}" 22 22 data-width="{{ photo.width }}" 23 23 data-height="{{ photo.height }}" 24 + style="aspect-ratio: {{ photo.width / photo.height }}" 24 25 > 25 26 <img 26 27 {% if loop.index < 6 %}
+4 -1
src/views/photos/show/template.jinja
··· 9 9 {% block body %} 10 10 <div class="photo__container"> 11 11 <div class="photo__image"> 12 - <img src="{{ photo_url(photo.filename) }}"> 12 + <img 13 + src="{{ photo_url(photo.filename) }}" 14 + style="aspect-ratio: {{ photo.width / photo.height }}" 15 + > 13 16 </div> 14 17 <div class="photo__sidebar"> 15 18 <h2>Metadata</h2>