Support exporting (non-)hyperlinked inline images

- [X] Inlined non-hyperlinked images, no meta or only alt -- Use Markdown image syntax - [X] Inlined hyperlinked images, no meta or only alt -- Use Markdown image syntax - [X] Inlined non-hyperlinked images, meta other than alt -- Use HTML img - [X] Inlined hyperlinked images, meta other than alt -- Use HTML img https://github.com/kaushalmodi/ox-hugo/issues/125
8 years ago · 2ca387c64b
parent ab1022b6e7
commit 2ca387c64b
8 changed files with 185 additions and 39 deletions
--- a/ox-blackfriday.el
+++ b/ox-blackfriday.el
@ -332,7 +332,14 @@ style tag."
                   ;; would be meant for links inside the paragraph
                   ;; instead of the paragraph itself.
                   (plist-put attr1 :target nil)
-                   (plist-put attr1 :rel nil))
+                   (plist-put attr1 :rel nil)
+                   ;; Remove other attributes from the list of a
+                   ;; paragraph's HTML attributes which would be meant
+                   ;; for the inline images inside that paragraph.
+                   (plist-put attr1 :src nil)
+                   (plist-put attr1 :alt nil)
+                   (plist-put attr1 :height nil)
+                   (plist-put attr1 :width nil))
                 attr1))
         (attr-str (org-html--make-attribute-string attr))
         (ret contents))
--- a/ox-hugo.el
+++ b/ox-hugo.el
@ -1631,38 +1631,66 @@ and rewrite link paths to make blogging more seamless."
             (useful-parent (if grand-parent
                                grand-parent
                              parent))
+             (inline-image (not (org-html-standalone-image-p useful-parent info)))
+             (source (if (member type '("http" "https" "ftp"))
+                         (concat type ":" path)
+                       path))
             (attr (org-export-read-attribute :attr_html useful-parent))
-             ;; Hugo `figure' shortcode named parameters
-             ;; https://gohugo.io/content-management/shortcodes/#figure
-             (caption (org-string-nw-p
-                       (org-export-data  ;Look for caption set using #+CAPTION
-                        (org-export-get-caption (org-export-get-parent-element link))
-                        info)))
-             (figure-params `((src . ,(if (member type '("http" "https" "ftp"))
-                                          (concat type ":" path)
-                                        path))
-                              (link . ,(plist-get attr :link))
-                              (title . ,(plist-get attr :title))
-                              (caption . ,(if caption
-                                              caption ;Caption set using #+CAPTION takes higher precedence
-                                            (plist-get attr :caption)))
-                              (class . ,(plist-get attr :class))
-                              (attr . ,(plist-get attr :attr))
-                              (attrlink . ,(plist-get attr :attrlink))
-                              (alt . ,(plist-get attr :alt))
-                              (width . ,(plist-get attr :width))
-                              (height . ,(plist-get attr :height))))
-             (figure-param-str ""))
+             (num-attr (/ (length attr) 2)) ;(:alt foo) -> num-attr = 1
+             (alt-text (plist-get attr :alt))
+             (caption (or
+                       ;;Caption set using #+CAPTION takes higher precedence
+                       (org-string-nw-p
+                        (org-export-data  ;Look for caption set using #+CAPTION
+                         (org-export-get-caption (org-export-get-parent-element link))
+                         info))
+                       (plist-get attr :caption))))
+        ;; (message "[ox-hugo-link DBG] inline image? %s\npath: %s"
+        ;;          inline-image path)
+        ;; (message "[org-hugo-link DBG] attr: %s num of attr: %d"
+        ;;          attr (length attr))
        ;; (message "[org-hugo-link DBG] parent-type: %s" parent-type)
-        (dolist (param figure-params)
-          (let ((name (car param))
-                (val (cdr param)))
-            (when val
-              (setq figure-param-str (concat figure-param-str
-                                             (format "%s=\"%s\" "
-                                                     name val))))))
-        ;; (message "[org-hugo-link DBG] figure params: %s" figure-param-str)
-        (format "{{< figure %s >}}" (org-trim figure-param-str))))
+        ;; (message "[org-hugo-link DBG] useful-parent-type: %s"
+        ;;          (org-element-type useful-parent))
+        (cond
+         (;; Use the Markdown image syntax if the image is inline and
+          ;; there are no HTML attributes for the image, or just one
+          ;; attribute, the `alt-text'.
+          (and inline-image
+               (or (= 0 num-attr)
+                   (and alt-text
+                        (= 1 num-attr))))
+          (let ((alt-text (if alt-text
+                              alt-text
+                            "")))
+            (format "![%s](%s)" alt-text source)))
+         (;; Else if the image is inline (with non-alt-text
+          ;; attributes), use HTML <img> tag syntax.
+          inline-image
+          (org-html--format-image source attr info))
+         (t ;Else use the Hugo `figure' shortcode.
+          ;; Hugo `figure' shortcode named parameters.
+          ;; https://gohugo.io/content-management/shortcodes/#figure
+          (let ((figure-params `((src . ,source)
+                                 (alt . ,alt-text)
+                                 (caption . ,caption)
+                                 (link . ,(plist-get attr :link))
+                                 (title . ,(plist-get attr :title))
+                                 (class . ,(plist-get attr :class))
+                                 (attr . ,(plist-get attr :attr))
+                                 (attrlink . ,(plist-get attr :attrlink))
+                                 (width . ,(plist-get attr :width))
+                                 (height . ,(plist-get attr :height))))
+                (figure-param-str ""))
+            (dolist (param figure-params)
+              (let ((name (car param))
+                    (val (cdr param)))
+                (when val
+                  (setq figure-param-str (concat figure-param-str
+                                                 (format "%s=\"%s\" "
+                                                         name val))))))
+            ;; (message "[org-hugo-link DBG] figure params: %s" figure-param-str)
+            (format "{{< figure %s >}}" (org-trim figure-param-str)))))))
     ((string= type "coderef")
      (let ((ref (org-element-property :path link)))
        (format (org-export-get-coderef-format ref contents)
@ -1863,6 +1891,9 @@ communication channel."
    ;; from `org-html-paragraph'.
    (let* ((parent (org-export-get-parent paragraph))
 	   (parent-type (org-element-type parent)))
+      ;; (message "[ox-hugo-para DBG] standalone image? %s\ncontents: %s"
+      ;;          (org-html-standalone-image-p paragraph info)
+      ;;          contents)
      (unless (or
               ;; First paragraph in an item has no tag if it is alone
               ;; or followed, at most, by a sub-list.
--- a/test/site/content-org/all-posts.org
+++ b/test/site/content-org/all-posts.org
@ -68,6 +68,7 @@ tag and look the same size.
 [[/images/org-mode-unicorn-logo.png][Click here to see the unicorn]]
 *** Clickable image that opens the image (works!)
 Click below image to jump to the unicorn image.
+
 [[/images/org-mode-unicorn-logo.png][file:/images/org-mode-unicorn-logo.png]]

 - NOTE :: =file:= has to be used in the *Description component* of the
@ -84,6 +85,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.
+
 [[file:/images/org-mode-unicorn-logo.png][file:/images/org-mode-unicorn-logo.png]]
 *** Link to image outside of standard Hugo =static= directory
 [[../files-to-be-copied-to-static/static/images/copy-of-unicorn-logo.png]]
@ -114,6 +116,41 @@ copied location inside =static=:
 =org-hugo-default-static-subdirectory-for-externals=.
 ***** Same image, but hyperlinked to itself
 [[../files-to-be-copied-to-static/foo/copy-2-of-unicorn-logo.png][file:../files-to-be-copied-to-static/foo/copy-2-of-unicorn-logo.png]]
+** Inline hyperlinked and non-hyperlinked images                     :inline:
+:PROPERTIES:
+:EXPORT_FILE_NAME: inline-images
+:END:
+This tests the feature added to support proper export syntax for
+inline images -- {{{oxhugoissue(125)}}}.
+*** Inline non-hyperlinked image
+**** No Alt text or any other attributes
+This is an inline non-hyperlinked image without alt text or other
+attributes: [[/images/org-mode-unicorn-logo.png]].
+**** With Alt text
+#+ATTR_HTML: :alt Inline Non-hyperlinked Image
+This is an inline non-hyperlinked image with alt text:
+[[/images/org-mode-unicorn-logo.png]].
+**** With other HTML attributes
+#+ATTR_HTML: :width 30
+This is an inline non-hyperlinked image with the width attribute:
+[[/images/org-mode-unicorn-logo.png]].
+*** Non-inline non-hyperlinked image
+[[/images/org-mode-unicorn-logo.png]]
+*** Inline hyperlinked image
+**** No Alt text or any other attributes
+This is an inline non-hyperlinked image without alt text or other
+attributes:
+[[../files-to-be-copied-to-static/foo/copy-2-of-unicorn-logo.png][file:../files-to-be-copied-to-static/foo/copy-2-of-unicorn-logo.png]].
+**** With Alt text
+#+ATTR_HTML: :alt Inline Non-hyperlinked Image
+This is an inline non-hyperlinked image with alt text:
+[[../files-to-be-copied-to-static/foo/copy-2-of-unicorn-logo.png][file:../files-to-be-copied-to-static/foo/copy-2-of-unicorn-logo.png]].
+**** With other HTML attributes
+#+ATTR_HTML: :width 30
+This is an inline non-hyperlinked image with the width attribute:
+[[../files-to-be-copied-to-static/foo/copy-2-of-unicorn-logo.png][file:../files-to-be-copied-to-static/foo/copy-2-of-unicorn-logo.png]].
+*** Non-inline hyperlinked image
+ [[../files-to-be-copied-to-static/foo/copy-2-of-unicorn-logo.png][file:../files-to-be-copied-to-static/foo/copy-2-of-unicorn-logo.png]]
 ** Image captions
 :PROPERTIES:
 :EXPORT_DATE: 2017-07-19
@ -4096,6 +4133,7 @@ there shouldn't be any error.
 - Many natural systems cannot be characterized by a single number such
  as the fractal dimension. Instead an infinite spectrum of dimensions
  must be introduced.
+
  [[file:/images/MultifractalsInR/C3_Clouds.png]]
 *** Multifractal definition
 - Consider a given object $\Omega$, its multifractal nature is
@ -4145,6 +4183,7 @@ there shouldn't be any error.
 *** Exercise
 - Calculate the partition function for the center and lower images of
  the figure:
+
  [[file:/images/MultifractalsInR/C3_BoxCounting.png]]
 *** Two important dimensions
 - Two particular cases are $q=1$ and $q=2$. The dimension for $q=1$ is
@ -4163,7 +4202,9 @@ there shouldn't be any error.
  experiments were conducted on individual males, and their successive
  displacements analyzed using the generalized dimension function $D_q$
  and the mass exponent function $\tau_q$
+
  [[file:/images/MultifractalsInR/C3_Cladoceran.png]]
+
  both functions indicate that the successive displacements of male D.
  australis have weaker multifractal properties. This is consistent with
  and generalizes previous results showing a decrease in the complexity
--- a/test/site/content/posts/figure-shortcode-and-attr-html.md
+++ b/test/site/content/posts/figure-shortcode-and-attr-html.md
@ -133,7 +133,7 @@ Rendered this:

 <style>.foo img { border:2px solid black; }</style>

-{{< figure src="https://golang.org/doc/gopher/pkg.png" class="foo" alt="Go is fine though." width="300" >}}
+{{< figure src="https://golang.org/doc/gopher/pkg.png" alt="Go is fine though." class="foo" width="300" >}}

 **NOTE**: We cannot use `:style` in `#+ATTR_HTML` because Hugo does not
 _yet_ support a `style` argument in the `figure` shortcode
--- a/test/site/content/posts/image-links.md
+++ b/test/site/content/posts/image-links.md
@ -45,6 +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" link="/images/org-mode-unicorn-logo.png" >}}

 NOTE
@ -57,7 +58,7 @@ NOTE
 Here's the same link with `#+NAME` specified.. which should also be
 clickable.

-<a id="org7cd8145"></a>
+<a id="org2476ccd"></a>
 {{< figure src="/images/org-mode-unicorn-logo.png" link="/images/org-mode-unicorn-logo.png" >}}


@ -68,6 +69,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" link="/images/org-mode-unicorn-logo.png" >}}


--- a/test/site/content/posts/inline-images.md
+++ b/test/site/content/posts/inline-images.md
@ -0,0 +1,61 @@
+++
+title = "Inline hyperlinked and non-hyperlinked images"
+tags = ["image", "inline"]
+draft = false
+++
+
+This tests the feature added to support proper export syntax for
+inline images -- `ox-hugo` Issue #[125](https://github.com/kaushalmodi/ox-hugo/issues/125).
+
+
+## Inline non-hyperlinked image {#inline-non-hyperlinked-image}
+
+
+### No Alt text or any other attributes {#no-alt-text-or-any-other-attributes}
+
+This is an inline non-hyperlinked image without alt text or other
+attributes: ![](/images/org-mode-unicorn-logo.png).
+
+
+### With Alt text {#with-alt-text}
+
+This is an inline non-hyperlinked image with alt text:
+![Inline Non-hyperlinked Image](/images/org-mode-unicorn-logo.png).
+
+
+### With other HTML attributes {#with-other-html-attributes}
+
+This is an inline non-hyperlinked image with the width attribute:
+<img src="/images/org-mode-unicorn-logo.png" alt="org-mode-unicorn-logo.png" width="30" />.
+
+
+## Non-inline non-hyperlinked image {#non-inline-non-hyperlinked-image}
+
+{{< figure src="/images/org-mode-unicorn-logo.png" >}}
+
+
+## Inline hyperlinked image {#inline-hyperlinked-image}
+
+
+### No Alt text or any other attributes {#no-alt-text-or-any-other-attributes}
+
+This is an inline non-hyperlinked image without alt text or other
+attributes:
+[![](/ox-hugo/copy-2-of-unicorn-logo.png)](/ox-hugo/copy-2-of-unicorn-logo.png).
+
+
+### With Alt text {#with-alt-text}
+
+This is an inline non-hyperlinked image with alt text:
+[![Inline Non-hyperlinked Image](/ox-hugo/copy-2-of-unicorn-logo.png)](/ox-hugo/copy-2-of-unicorn-logo.png).
+
+
+### With other HTML attributes {#with-other-html-attributes}
+
+This is an inline non-hyperlinked image with the width attribute:
+[<img src="/ox-hugo/copy-2-of-unicorn-logo.png" alt="copy-2-of-unicorn-logo.png" width="30" />](/ox-hugo/copy-2-of-unicorn-logo.png).
+
+
+## Non-inline hyperlinked image {#non-inline-hyperlinked-image}
+
+{{< figure src="/ox-hugo/copy-2-of-unicorn-logo.png" link="/ox-hugo/copy-2-of-unicorn-logo.png" >}}
--- a/test/site/content/real-examples/multifractals-in-ecology-using-r.md
+++ b/test/site/content/real-examples/multifractals-in-ecology-using-r.md
@ -22,6 +22,7 @@ Disclaimer
 -   Many natural systems cannot be characterized by a single number such
    as the fractal dimension. Instead an infinite spectrum of dimensions
    must be introduced.
+
    {{< figure src="/images/MultifractalsInR/C3_Clouds.png" >}}


@ -86,6 +87,7 @@ Disclaimer

 -   Calculate the partition function for the center and lower images of
    the figure:
+
    {{< figure src="/images/MultifractalsInR/C3_BoxCounting.png" >}}


@ -110,7 +112,9 @@ Disclaimer
    experiments were conducted on individual males, and their successive
    displacements analyzed using the generalized dimension function \\(D\_q\\)
    and the mass exponent function \\(\tau\_q\\)
+
    {{< figure src="/images/MultifractalsInR/C3_Cladoceran.png" >}}
+
    both functions indicate that the successive displacements of male D.
    australis have weaker multifractal properties. This is consistent with
    and generalizes previous results showing a decrease in the complexity
--- a/test/site/content/real-examples/nn-intro.md
+++ b/test/site/content/real-examples/nn-intro.md
@ -642,9 +642,9 @@ sigmoid又称为逻辑斯蒂曲线，其导数 \\(σ'\\) 是 一个钟形曲线
 从小到大时，梯度的变化会经历一个"小，大，小"的过程。学习的速度也会被导数项拖累，
 存在一个"慢，快，慢"的过程。

-| MSE                                        | Cross Entropy                                        |
-|--------------------------------------------|------------------------------------------------------|
-| {{< figure src="/images/Vonng/mse.png" >}} | {{< figure src="/images/Vonng/cross-entropy.png" >}} |
+| MSE                        | Cross Entropy                        |
+|----------------------------|--------------------------------------|
+| ![](/images/Vonng/mse.png) | ![](/images/Vonng/cross-entropy.png) |

 若采用 **交叉熵（cross entropy）** 误差函数：

@ -711,9 +711,9 @@ plt.plot(xs, np.polyval(p1, xs));plt.plot(x, y, 'ro');plt.plot(xs, np.sin(xs), '
 plt.plot(xs, np.polyval(p2, xs));plt.plot(x, y, 'ro');plt.plot(xs, np.sin(xs), 'r--')
 ```

-| 3阶多项式                                        | 10阶多项式                                        |
-|----------------------------------------------|-----------------------------------------------|
-| {{< figure src="/images/Vonng/overfit-3.png" >}} | {{< figure src="/images/Vonng/overfit-10.png" >}} |
+| 3阶多项式                        | 10阶多项式                        |
+|------------------------------|-------------------------------|
+| ![](/images/Vonng/overfit-3.png) | ![](/images/Vonng/overfit-10.png) |

 一个模型真正的测验标准，是它对没有见过的场景的预测能力，称为 **泛化能力
 （generalize）** 。