Better links to standalone figures

Now the link to a figure is derived from the "#+name" keyword set for that figure. This prevents the randomization of the "org<random hash>" id on each export and we end up with better, readable links! Fixes #205.
kaushalmodi · Jan 1, 2022 · 91f99d2 · 91f99d2
1 parent f2d2c81
commit 91f99d2
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 25 deletions.
diff --git a/ox-blackfriday.el b/ox-blackfriday.el
@@ -465,8 +465,8 @@ Details: https://github.com/kaushalmodi/ox-hugo/issues/57."
 If the ELEM has its `name' defined, the anchor is derived from it:
 
 - If the `name' begins with \"code__\", \"tab__\", \"table__\",
-  \"fig__\" or \"figure__\", that prefix is removed as this
-  function adds its own appropriate prefix.
+  \"img__\", \"fig__\" or \"figure__\", that prefix is removed as
+  this function adds its own appropriate prefix.
 - Underscores and forward slashes in the `name' get replaced with
   hyphens.
 
@@ -489,7 +489,7 @@ The return value, if non-nil, is a string."
              (name1 (let* ((tmp name)
                            ;; Remove commonly used code/table/figure
                            ;; prefixes in the #+name itself.
-                           (tmp (replace-regexp-in-string "\\`\\(code\\|tab\\|table\\|fig\\|figure\\|\\)__" "" tmp))
+                           (tmp (replace-regexp-in-string "\\`\\(code\\|tab\\|table\\|img\\|fig\\|figure\\|\\)__" "" tmp))
                            ;; Prefer to use hyphens instead of
                            ;; underscores in anchors.  Also replace /
                            ;; chars with hyphens.

diff --git a/ox-hugo.el b/ox-hugo.el
@@ -2157,11 +2157,21 @@ and rewrite link paths to make blogging more seamless."
                               num-str)))))))
              ;; (message "[ox-hugo-link DBG] link description: %s" description)
              (when description
-               (format "[%s](#%s)"
-                       description
-                       (if (memq (org-element-type destination) '(src-block table))
-                           (org-blackfriday--get-reference destination)
-                         (org-export-get-reference destination info)))))))))
+               (let ((dest-link (cond
+                                 ;; Ref to a source block or table.
+                                 ((memq (org-element-type destination) '(src-block table))
+                                  (org-blackfriday--get-reference destination))
+                                 ;; Ref to a standalone figure.
+                                 ((and (org-html-standalone-image-p destination info)
+                                       (eq (org-element-type destination) 'paragraph))
+                                  (let ((figure-ref (org-blackfriday--get-reference destination)))
+                                    (if (org-string-nw-p figure-ref)
+                                        (replace-regexp-in-string "\\`org-paragraph--" "figure--" figure-ref)
+                                      (org-export-get-reference destination info))))
+                                 ;; Ref to all other link destinations.
+                                 (t
+                                  (org-export-get-reference destination info)))))
+                 (format "[%s](#%s)" description dest-link))))))))
      ((org-export-inline-image-p link org-html-inline-image-rules)
       ;; (message "[org-hugo-link DBG] processing an image: %s" desc)
       (let* ((parent (org-export-get-parent link))
@@ -2634,11 +2644,13 @@ communication channel."
 
      ;; Standalone image.
      ((org-html-standalone-image-p paragraph info)
-      (let ((label (let ((paragraph-ref (and (org-element-property :name paragraph)
-                                             (org-export-get-reference paragraph info))))
-                     (if paragraph-ref
-                         (format "<a id=\"%s\"></a>\n\n" paragraph-ref)
-                       ""))))
+      (let ((figure-ref (org-blackfriday--get-reference paragraph))
+            label)
+        (when (org-string-nw-p figure-ref)
+          (setq figure-ref (replace-regexp-in-string "\\`org-paragraph--" "figure--" figure-ref)))
+        (setq label (if figure-ref
+                        (format "<a id=\"%s\"></a>\n\n" figure-ref)
+                      ""))
         (concat label contents)))
 
      ;; Normal paragraph.

diff --git a/test/site/content/posts/image-links.md b/test/site/content/posts/image-links.md
@@ -17,7 +17,7 @@ This is some text before the first heading of this post.
 [[/images/org-mode-unicorn-logo.png]]
 ```
 
-<a id="org438f8e5"></a>
+<a id="figure--unclickable-image"></a>
 
 {{< figure src="/images/org-mode-unicorn-logo.png" caption="<span class=\"figure-number\">Figure 1: </span>Don't click this image -- It's not a hyperlink" >}}
 
@@ -52,7 +52,7 @@ tag and look the same size.
 
 Do **not** use `file:` prefix in the Description if you want the image
 link to show up as-is i.e. not be replaced by the image-at-link like
-in [2](#org39c5252):
+in [2](#figure--clickable-image-that-opens-the-image):
 
 ```org
 # Org source
@@ -73,7 +73,7 @@ Click below image to jump to the unicorn image.
 [[/images/org-mode-unicorn-logo.png][file:../files-to-be-copied-to-static/static/images/unicorn-logo-small.png]]
 ```
 
-<a id="org39c5252"></a>
+<a id="figure--clickable-image-that-opens-the-image"></a>
 
 {{< figure src="/images/unicorn-logo-small.png" caption="<span class=\"figure-number\">Figure 2: </span>Click this image -- It's a hyperlink" link="/images/org-mode-unicorn-logo.png" >}}
 
@@ -87,7 +87,7 @@ NOTE
 Here's a similar link with `#+name` specified.. which should also be
 clickable.
 
-<a id="org7a66995"></a>
+<a id="figure--unicorn"></a>
 
 {{< figure src="/images/org-mode-unicorn-logo.png" link="/images/org-mode-unicorn-logo.png" >}}
 

diff --git a/test/site/content/posts/links-to-images.md b/test/site/content/posts/links-to-images.md
@@ -30,11 +30,11 @@ Here's the same image again, but with a different Org link ID:
 will output below (_lorem-ipsum_ added to increase page content so
 that the link jump is evident):
 
-<a id="org93b5383"></a>
+<a id="figure--org-logo1"></a>
 
 {{< figure src="/images/org-mode-unicorn-logo.png" caption="<span class=\"figure-number\">Figure 1: </span>Org Logo" >}}
 
-**Here we refer to [2](#org6beb2f2).**
+**Here we refer to [2](#figure--org-logo2).**
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et
 quam metus. Etiam in iaculis mi, sit amet pretium magna. Donec ut dui
@@ -90,11 +90,11 @@ blandit in.
 
 Here's the same image again, but with a different Org link ID:
 
-<a id="org6beb2f2"></a>
+<a id="figure--org-logo2"></a>
 
 {{< figure src="/images/org-mode-unicorn-logo.png" caption="<span class=\"figure-number\">Figure 2: </span>Same Org Logo" >}}
 
-**Here we refer to [1](#org93b5383).**
+**Here we refer to [1](#figure--org-logo1).**
 
 ---
 

diff --git a/test/site/content/singles/links-to-org-elements.md b/test/site/content/singles/links-to-org-elements.md
@@ -274,11 +274,11 @@ Here's the same image again, but with a different Org link ID:
 will output below (_lorem-ipsum_ added to increase page content so
 that the link jump is evident):
 
-<a id="org2f8d647"></a>
+<a id="figure--org-logo1"></a>
 
 {{< figure src="/images/org-mode-unicorn-logo.png" caption="<span class=\"figure-number\">Abbildung 1: </span>Org Logo" >}}
 
-**Here we refer to [Abbildung 2](#orgf9db9d2).**
+**Here we refer to [Abbildung 2](#figure--org-logo2).**
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et
 quam metus. Etiam in iaculis mi, sit amet pretium magna. Donec ut dui
@@ -334,11 +334,11 @@ blandit in.
 
 Here's the same image again, but with a different Org link ID:
 
-<a id="orgf9db9d2"></a>
+<a id="figure--org-logo2"></a>
 
 {{< figure src="/images/org-mode-unicorn-logo.png" caption="<span class=\"figure-number\">Abbildung 2: </span>Same Org Logo" >}}
 
-**Here we refer to [Abbildung 1](#org2f8d647).**
+**Here we refer to [Abbildung 1](#figure--org-logo1).**
 
 ---