Use link attribute in figure when suitable

The Markdown form [{{< figure .. >}}](some link) results in wrapping
the <figure> in <a> in the final HTML, which is invalid.

- [X] Non-inlined hyperlinked images -- Use link in figure

https://github.com/kaushalmodi/ox-hugo/issues/125

One minor behavior change: Now <a> tag attributes like "target" and
"rel" cannot be applied *only to* the links that images hyperlink
to. The reason is to make the exported Markdown generate valid HTML,
and with how the "figure" shortcode is designed in HTML, those
parameters are not passed onto the <a> element in the generated
<figure> element.

ox-hugo.el

@@ -1592,7 +1592,8 @@ and rewrite link paths to make blogging more seamless."
                      (mapconcat #'number-to-string
                                 (org-export-get-headline-number destination info)
                                 "."))
-                    (t title))
+                    (t
+                     title))
               ;; Reference
               (or (org-element-property :CUSTOM_ID destination)
                   (org-hugo-slug title)
@@ -1605,15 +1606,19 @@ and rewrite link paths to make blogging more seamless."
                                      destination info
                                      nil #'org-html--has-caption-p)))
                         (cond
-                         ((not number) nil)
+                         ((not number)
-                         ((atom number) (number-to-string number))
+                          nil)
-                         (t (mapconcat #'number-to-string number ".")))))))
+                         ((atom number)
+                          (number-to-string number))
+                         (t
+                          (mapconcat #'number-to-string number ".")))))))
              ;; (message "[ox-hugo-link DBG] link description: %s" description)
              (when description
                (format "[%s](#%s)"
                        description
                        (org-export-get-reference destination info))))))))
      ((org-export-inline-image-p link org-html-inline-image-rules)
+      ;; (message "[ox-hugo-link DBG] Inline image: %s" raw-path)
       ;; (message "[org-hugo-link DBG] processing an image: %s" contents)
       (let* ((path (org-hugo--attachment-rewrite-maybe raw-path info))
              (parent (org-export-get-parent link))
@@ -1703,13 +1708,23 @@ and rewrite link paths to make blogging more seamless."
              (link-param-str (org-string-nw-p (org-trim link-param-str))))
         (if contents
             (progn
-              ;; (message "[ox-hugo DBG org-hugo-link: contents=%s path=%s" contents path)
+              ;; (message "[ox-hugo-link DBG] contents=%s path=%s" contents path)
-              (if link-param-str
+              ;; (message "[ox-hugo-link DBG] link-param-str=%s" link-param-str)
-                  (format "<a href=\"%s\" %s>%s</a>"
+              (cond
-                          (org-html-encode-plain-text path)
+               (;; If `contents' is a `figure' shortcode but doesn't
-                          link-param-str
+                ;; already have the `link' parameter set.
-                          (org-link-unescape contents))
+                (and (string-match-p "\\`{{<\\s-*figure\\s-+" contents)
-                (format "[%s](%s)" contents path)))
+                     (not (string-match-p "\\`{{<\\s-*figure\\s-+.*link=" contents)))
+                (replace-regexp-in-string "\\s-*>}}\\'"
+                                          (format " link=\"%s\"\\&" path)
+                                          contents))
+               (link-param-str
+                (format "<a href=\"%s\" %s>%s</a>"
+                        (org-html-encode-plain-text path)
+                        link-param-str
+                        (org-link-unescape contents)))
+               (t
+                (format "[%s](%s)" contents path))))
           (if link-param-str
               (let ((path (org-html-encode-plain-text path)))
                 (format "<a href=\"%s\" %s>%s</a>"

test/site/content-org/all-posts.org

@@ -2228,16 +2228,23 @@ as it is annotated with ~target="_blank"~.
 [[https://orgmode.org/manual/Hyperlinks.html][Here's the same link]] but with ~target="_self"~ annotation. So
 clicking it will open that link in this same tab!
 
+[[https://orgmode.org/manual/Hyperlinks.html][Here's the same link again]], but this time there is no =#+ATTR_HTML=
+annotation. So the behavior of clicking this link will depend on the
+browser (typically an external link will open in a new tab
+automatically).
+*** Image linked to image with =target= attribute
+
 #+ATTR_HTML: :width 10% :target _self
 [[https://orgmode.org/img/org-mode-unicorn-logo.png][https://orgmode.org/img/org-mode-unicorn-logo.png]]
 
 Above is a link to an image. The =width= attribute of /10%/ though
-must apply *only* to the image, and not to the link, and the =target=
+must apply *only* to the image, and not to the link.
-attribute must apply *only* to the link, and not to the image.
 
-[[https://orgmode.org/manual/Hyperlinks.html][Here's the same link again]], but this time there is no =#+ATTR_HTML=
+- Note :: The =target= attribute is discarded though in this case
-annotation. So the behavior will depend on the browser (typically an
+          because of the Hugo =figure= shortcode limitation.. there is
-external link will open in a new tab automatically).
+          no way to pass the =target= or any other attribute to the
+ =<a>= element inside the =<figure>= element that the
+ =figure= shortcode constructs.
 ** Within the same post (Internal links)                     :internal_links:
 *** Link to headings by name                     :toc:headings:export_option:
 :PROPERTIES:

test/site/content/bundles/page-bundle-a/index.md

@@ -46,7 +46,7 @@ the copied location inside the bundle:
 
 #### Same image, but hyperlinked to itself {#same-image-but-hyperlinked-to-itself}
 
-[{{<figure src="copy-2-of-unicorn-logo.png">}}](copy-2-of-unicorn-logo.png)
+{{<figure src="copy-2-of-unicorn-logo.png" link="copy-2-of-unicorn-logo.png">}}
 
 
 #### Page Bundles with images in the same dir as content Org file {#page-bundles-with-images-in-the-same-dir-as-content-org-file}

test/site/content/images-in-content/page-bundle-images-in-same-dir/index.md

@@ -5,9 +5,9 @@ draft = false
 
 ## Link to an image in the same dir as this Org file {#link-to-an-image-in-the-same-dir-as-this-org-file}
 
-[{{<figure src="gnu.png">}}](gnu.png)
+{{<figure src="gnu.png" link="gnu.png">}}
 
 
 ## Link to an image in a subdir in the same dir as this Org file {#link-to-an-image-in-a-subdir-in-the-same-dir-as-this-org-file}
 
-[{{<figure src="images/org-copy-1.png">}}](images/org-copy-1.png)
+{{<figure src="images/org-copy-1.png" link="images/org-copy-1.png">}}

test/site/content/posts/image-links.md

@@ -45,7 +45,7 @@ tag and look the same size.
 ## Clickable image that opens the image (works!) {#clickable-image-that-opens-the-image--works}
 
 Click below image to jump to the unicorn image.
-[{{<figure src="/images/org-mode-unicorn-logo.png">}}](/images/org-mode-unicorn-logo.png)
+{{<figure src="/images/org-mode-unicorn-logo.png" link="/images/org-mode-unicorn-logo.png">}}
 
 NOTE
 : `file:` has to be used in the **Description component** of the
@@ -57,8 +57,8 @@ NOTE
 Here's the same link with `#+NAME` specified.. which should also be
 clickable.
 
-<a id="orgc2b60dc"></a>
+<a id="org2697be1"></a>
-[{{<figure src="/images/org-mode-unicorn-logo.png">}}](/images/org-mode-unicorn-logo.png)
+{{<figure src="/images/org-mode-unicorn-logo.png" link="/images/org-mode-unicorn-logo.png">}}
 
 
 ### Same link with `file:` in "link" portion of the Org link too {#same-link-with-file-in-link-portion-of-the-org-link-too}
@@ -68,7 +68,7 @@ create a hyperlinked image that links to an image. But having `file:`
 in the "link" portion of the Org link too shouldn't hurt._
 
 Click below image to jump to the unicorn image.
-[{{<figure src="/images/org-mode-unicorn-logo.png">}}](/images/org-mode-unicorn-logo.png)
+{{<figure src="/images/org-mode-unicorn-logo.png" link="/images/org-mode-unicorn-logo.png">}}
 
 
 ## Link to image outside of standard Hugo `static` directory {#link-to-image-outside-of-standard-hugo-static-directory}
@@ -106,4 +106,4 @@ Note
 
 #### Same image, but hyperlinked to itself {#same-image-but-hyperlinked-to-itself}
 
-[{{<figure src="/ox-hugo/copy-2-of-unicorn-logo.png">}}](/ox-hugo/copy-2-of-unicorn-logo.png)
+{{<figure src="/ox-hugo/copy-2-of-unicorn-logo.png" link="/ox-hugo/copy-2-of-unicorn-logo.png">}}

test/site/content/posts/links-with-target-attribute.md

@@ -12,12 +12,22 @@ as it is annotated with `target="_blank"`.
 <a href="https://orgmode.org/manual/Hyperlinks.html" target="_self">Here's the same link</a> but with `target="_self"` annotation. So
 clicking it will open that link in this same tab!
 
-<a href="https://orgmode.org/img/org-mode-unicorn-logo.png" target="_self">{{<figure src="https://orgmode.org/img/org-mode-unicorn-logo.png" width="10%">}}</a>
+[Here's the same link again](https://orgmode.org/manual/Hyperlinks.html), but this time there is no `#+ATTR_HTML`
+annotation. So the behavior of clicking this link will depend on the
+browser (typically an external link will open in a new tab
+automatically).
+
+
+## Image linked to image with `target` attribute {#image-linked-to-image-with-target-attribute}
+
+{{<figure src="https://orgmode.org/img/org-mode-unicorn-logo.png" width="10%" link="https://orgmode.org/img/org-mode-unicorn-logo.png">}}
 
 Above is a link to an image. The `width` attribute of _10%_ though
-must apply **only** to the image, and not to the link, and the `target`
+must apply **only** to the image, and not to the link.
-attribute must apply **only** to the link, and not to the image.
 
-[Here's the same link again](https://orgmode.org/manual/Hyperlinks.html), but this time there is no `#+ATTR_HTML`
+Note
-annotation. So the behavior will depend on the browser (typically an
+: The `target` attribute is discarded though in this case
-external link will open in a new tab automatically).
+    because of the Hugo `figure` shortcode limitation.. there is
+    no way to pass the `target` or any other attribute to the
+    `<a>` element inside the `<figure>` element that the
+    `figure` shortcode constructs.