fix: lazy loading causing inaccurate anchor scrolling + link highlighting

As of a recent update, gallery and figure images are lazy loaded. However, lazy loading without initial sizes defined can lead to inaccurate anchor scrolling and active link highlighting as the anchor offset changes after an uncached image occurring before the anchor is lazily loaded.

See https://github.com/gcushen/hugo-academic/issues/1199#issuecomment-577293818
Fix #1199

assets/js/academic.js

@@ -35,7 +35,7 @@
       // Escape special chars from IDs, such as colons found in Markdown footnote links.
       target = '#' + $.escapeSelector(target.substring(1));  // Previously, `target = target.replace(/:/g, '\\:');`
 
-      let elementOffset = Math.ceil($(target).offset().top - getNavBarHeight()) + 1;  // Round up to highlight right ID!
+      let elementOffset = Math.ceil($(target).offset().top - getNavBarHeight());  // Round up to highlight right ID!
       $('body').addClass('scrolling');
       $('html, body').animate({
         scrollTop: elementOffset

assets/scss/academic/_root.scss

@@ -290,6 +290,7 @@ a[data-fancybox] {
 
 .gallery a[data-fancybox] img {
   height: 250px;
+  width: auto;
   max-width: inherit;
   display: inherit;
   margin: 0;

layouts/shortcodes/figure.html

@@ -1,6 +1,11 @@
 {{/* Enable image to be loaded from local page dir or media library at `static/img/`. */}}
-{{ $image_src := .Get "src" }}
-{{ if .Get "library" }}
+
+{{ $asset := (.Page.Resources.ByType "image").GetMatch (.Get "src") }}
+{{ $image_src := (.Get "src") }}
+{{ if $asset }}
+  {{ $asset2 := $asset.Fit "2000x2000" }}
+  {{ $image_src = $asset2.RelPermalink }}
+{{ else if .Get "library" }}
   {{ $image_src = printf "img/%s" $image_src | relURL }}
 {{ end }}
 
@@ -21,7 +26,12 @@
   <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{.}}"{{ end }}{{ with .Get "rel" }} rel="{{.}}"{{ end }}>
 {{ end -}}
 
-<img data-src="{{$image_src}}" class="lazyload" alt="{{ with .Get "alt" }}{{.}}{{end}}" {{ with .Get "width" }}width="{{.}}" {{end}}{{ with .Get "height" }}height="{{.}}" {{end}}>
+{{/* Lazy load only when we know image dimensions in order to preserve anchor linking. */}}
+{{ if $asset }}
+  <img data-src="{{$image_src}}" class="lazyload" alt="{{ with .Get "alt" }}{{.}}{{end}}" width="{{ (.Get "width") | default $asset.Width }}" height="{{ (.Get "height") | default $asset.Height }}">
+{{ else }}
+  <img data-src="{{$image_src}}" alt="{{ with .Get "alt" }}{{.}}{{end}}" {{ with .Get "width" }}width="{{.}}" {{end}}{{ with .Get "height" }}height="{{.}}" class="lazyload"{{end}}>
+{{ end }}
 
 {{- if or $lightbox (.Get "link") }}</a>{{ end }}
 

layouts/shortcodes/gallery.html

@@ -29,7 +29,7 @@
       {{ end }}
     {{ end }}
   <a data-fancybox="gallery-{{$album}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }}>
-  <img data-src="{{ $image.RelPermalink }}" class="lazyload" alt="">
+  <img data-src="{{ $image.RelPermalink }}" class="lazyload" alt="" width="{{ $image.Width }}" height="{{ $image.Height }}">{{/* Width & height (or low res src) required for lazy loading. */}}
   </a>
   {{end}}
 
@@ -45,8 +45,9 @@
       {{ $.Scratch.Set "src" (printf "img/%s" .image | relURL) }}
     {{ end }}
   {{ end }}
+  {{/* Don't lazy load image as cannot init image size from non-Hugo asset, resulting in inaccurate anchor scrolling & active link highlighting. */}}
   <a data-fancybox="gallery{{ with .album }}-{{.}}{{ end }}" {{ with .caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }} href="{{$.Scratch.Get "src"}}">
-    <img data-src="{{$.Scratch.Get "src"}}" class="lazyload" alt="">
+    <img data-src="{{$.Scratch.Get "src"}}" alt="">
   </a>
   {{end}}
   {{else}}