generators/shortcodes: Footnote and image enhancements

Defensive; hash footnote content and mark ids to ensure no conflicts on side-notes and
images.

Decouple PHP from image short-codes.

Add margin images.

Ensure consistency between foot-notes, side-notes, and side-images.

1 files changed, 12 insertions, 21 deletions

diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html b/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
index 39e22a4..3e4966c 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
@@ -1,23 +1,14 @@
-<span class="sidenote-container">
-
-<label for="{{ .Get `mark` }}" class="sidenote-toggle sidenote-mark" title="{{ .Inner }}">{{ .Get `mark` }}</label>
-<input type="checkbox" id="{{ .Get `mark` }}" class="sidenote-toggle">
-
-<span class="sans-serif sidenote sideimage {{ .Get `set` }}note">
-
-{{ safeHTML "<?php" }}
-$width = getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[0];
-$height = getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[1];
-$ratio = ((($height / $width) * 100) > 100) ? $height . 'px' : $height / $width * 100 . '%';
-{{ safeHTML "?>" }}
-
-  <a href="{{.Get `source`}}" onclick="return false;">
-    <img data-image-zoom src="{{.Get `source`}}" alt="{{ .Inner }}" title="{{.Get `title`}}"
-    {{ safeHTMLAttr `<?php echo 'width=' . '"' . $width . '"'; ?>` }}
-    {{ safeHTMLAttr `<?php echo 'height=' . '"' . $height . '"'; ?>` }} />
-  </a>
-
-  <span class="sideimage-footer is-block has-text-centered has-text-grey-dark"><mark>{{ .Inner }}</mark></span>
-</span>
+{{ $id := md5 (printf (.Get `mark`) .Inner) }}
+{{ $imageFile := print "public" (.Get `source`) }}
+{{ $image := imageConfig $imageFile }}
 
+<span class="sidenote-container">
+  <label for="{{ $id }}" class="sidenote-toggle sidenote-mark" title="{{ .Inner }}"><span>{{ .Get `mark` }}</span></label>
+  <input type="checkbox" id="{{ $id }}" class="sidenote-toggle">
+  <span class="sans-serif sidenote sideimage {{ .Get `set` }}note">
+    <a href="{{.Get `source`}}" onclick="return false;">
+      <img data-image-zoom src="{{ .Get `source`}}" alt="{{ .Inner }}" title="{{ .Get `title`}}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
+    </a>
+    <span class="sideimage-footer is-block has-text-centered has-text-grey-dark"><mark>{{ .Inner }}</mark></span>
+  </span>
 </span>