From 55228b7ade0412796bae15eb122307ebd166d68a Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Thu, 23 Jan 2020 23:44:08 +0000
Subject: [PATCH] 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           |  2 +-
 assets/scss/academic/_root.scss |  1 +
 layouts/shortcodes/figure.html  | 16 +++++++++++++---
 layouts/shortcodes/gallery.html |  5 +++--
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/assets/js/academic.js b/assets/js/academic.js
index 48f78c06..7fbbc1b0 100644
--- a/assets/js/academic.js
+++ b/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
diff --git a/assets/scss/academic/_root.scss b/assets/scss/academic/_root.scss
index 303716ae..362fe141 100644
--- a/assets/scss/academic/_root.scss
+++ b/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;
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index eff1c44e..e4941b07 100644
--- a/layouts/shortcodes/figure.html
+++ b/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 }}
 
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index dc8bc55c..3d48c6ea 100644
--- a/layouts/shortcodes/gallery.html
+++ b/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}}