Add width and height attrs for local images

Image render hook now computes width/height of local images and adds
them as attributes. This patch also adds relevant CSS changes to prevent
stretchy images.

The main reason for this change is to avoid content shifts when images
load. Without providing width/height, browser doesn't have info to know
the aspect ratio to reserve some space until the image loads. With this
change, browser knows the intrinsic size and aspect-ratio to reserve
space and avoid content shifts in the page.

I believe this also fixes an issue I face in Safari where sometimes, an
image below the fold wouldn't load and thus have zero height because it
has loading="lazy".

To avoid images getting stretched and images overflow/filling the entire
screen when their intrinsic size is larger than the container size, I've
added some CSS. A configurable `max-height` is present which is used for
`figure img` elements. This especially helps when you have tall images
like mobile screenshots.

assets/css/main.css

@@ -394,6 +394,20 @@ footer a {
 
 /* images */
 
+figure > div {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+figure img {
+  max-width: 100%;
+  max-height: var(--figure-img-max-height);
+  width: auto;
+  height: auto;
+  margin-inline: auto;
+}
+
 .dark .img-light {
   display: none !important;
 }
@@ -419,6 +433,7 @@ footer a {
 }
 
 .img-full img {
+  height: auto;
   width: 100vw !important;
   max-width: 100vw !important;
 }
@@ -527,4 +542,4 @@ blockquote {
 blockquote p {
   margin-left: 1rem;
   margin-right: 1rem;
-}
+}

assets/css/vars.css

@@ -53,6 +53,7 @@
 
     /* Content */
     --content-height: calc(100vh - var(--footer-height));
+    --figure-img-max-height: 500px;
 
     /* Tables */
     --table-cell-padding: .5rem;

layouts/_default/_markup/render-image.html

@@ -5,9 +5,9 @@ https://github.com/gohugoio/hugo/blob/89bd02/tpl/tplimpl/embedded/templates/_def
 */}}
 {{- $u := urls.Parse .Destination -}}
 {{- $url := $u.String -}}
+{{- $imgResource := .Page.Scratch.Get "typoNilVariable" -}}
 {{- if not $u.IsAbs -}}
   {{- $path := strings.TrimPrefix "./" $u.Path -}}
-  {{- $imgResource := .Page.Scratch.Get "typoNilVariable" -}}
   {{/* Check if this is a page bundle or standalone page */}}
   {{- if .PageInner.Resources -}}
     {{- $imgResource = .PageInner.Resources.Get $path -}}
@@ -42,11 +42,12 @@ and build the img class string as "img-tag1 img-tag2 ..."
 {{ $classes = printf "%s img-%s" $classes $tag}}
 {{ end }}
 
+
 {{/* Use the computed classes on the rendered figure */}}
 <figure class="{{ $classes }}">
 
     <div>
-        <img loading="lazy" alt="{{ .Text }}" src="{{ $url }}">
+        <img loading="lazy" alt="{{ .Text }}" src="{{ $url }}" {{ with $imgResource }}width="{{ .Width }}px" height="{{ .Height }}px"{{ end }}>
     </div>
 
     {{ with .Title }}
@@ -54,4 +55,4 @@ and build the img class string as "img-tag1 img-tag2 ..."
         <figcaption> {{ . | markdownify}} </figcaption>
     </div>
     {{ end }}
-</figure>
+</figure>