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.
8 years ago · e92fcf0037
parent 3de0027fa2
commit e92fcf0037
6 changed files with 62 additions and 30 deletions
--- a/ox-hugo.el
+++ b/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)
-                         ((atom number) (number-to-string number))
-                         (t (mapconcat #'number-to-string number ".")))))))
+                         ((not number)
+                          nil)
+                         ((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)
-              (if link-param-str
-                  (format "<a href=\"%s\" %s>%s</a>"
-                          (org-html-encode-plain-text path)
-                          link-param-str
-                          (org-link-unescape contents))
-                (format "[%s](%s)" contents path)))
+              ;; (message "[ox-hugo-link DBG] contents=%s path=%s" contents path)
+              ;; (message "[ox-hugo-link DBG] link-param-str=%s" link-param-str)
+              (cond
+               (;; If `contents' is a `figure' shortcode but doesn't
+                ;; already have the `link' parameter set.
+                (and (string-match-p "\\`{{<\\s-*figure\\s-+" contents)
+                     (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>"
--- a/test/site/content-org/all-posts.org
+++ b/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=
-attribute must apply *only* to the link, and not to the image.
+must apply *only* to the image, and not to the link.

-[[https://orgmode.org/manual/Hyperlinks.html][Here's the same link again]], but this time there is no =#+ATTR_HTML=
-annotation. So the behavior will depend on the browser (typically an
-external link will open in a new tab automatically).
+- Note :: The =target= attribute is discarded though in this case
+          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.
 ** Within the same post (Internal links)                     :internal_links:
 *** Link to headings by name                     :toc:headings:export_option:
 :PROPERTIES:
--- a/test/site/content/bundles/page-bundle-a/index.md
+++ b/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}
--- a/test/site/content/images-in-content/page-bundle-images-in-same-dir/index.md
+++ b/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">}}
--- a/test/site/content/posts/image-links.md
+++ b/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>
-[{{<figure src="/images/org-mode-unicorn-logo.png">}}](/images/org-mode-unicorn-logo.png)
+<a id="org2697be1"></a>
+{{<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">}}
--- a/test/site/content/posts/links-with-target-attribute.md
+++ b/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`
-attribute must apply **only** to the link, and not to the image.
+must apply **only** to the image, and not to the link.

-[Here's the same link again](https://orgmode.org/manual/Hyperlinks.html), but this time there is no `#+ATTR_HTML`
-annotation. So the behavior will depend on the browser (typically an
-external link will open in a new tab automatically).
+Note
+: The `target` attribute is discarded though in this case
+    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.