From 2ca387c64b1550306481cbea1c6a37f63d496d7e Mon Sep 17 00:00:00 2001 From: Kaushal Modi Date: Thu, 1 Feb 2018 02:08:53 -0500 Subject: [PATCH] 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 --- ox-blackfriday.el | 9 +- ox-hugo.el | 91 +++++++++++++------ test/site/content-org/all-posts.org | 41 +++++++++ .../posts/figure-shortcode-and-attr-html.md | 2 +- test/site/content/posts/image-links.md | 4 +- test/site/content/posts/inline-images.md | 61 +++++++++++++ .../multifractals-in-ecology-using-r.md | 4 + test/site/content/real-examples/nn-intro.md | 12 +-- 8 files changed, 185 insertions(+), 39 deletions(-) create mode 100644 test/site/content/posts/inline-images.md diff --git a/ox-blackfriday.el b/ox-blackfriday.el index 924b74e..1808896 100644 --- 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)) diff --git a/ox-hugo.el b/ox-hugo.el index cf50bc4..ab8e12f 100644 --- 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 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. diff --git a/test/site/content-org/all-posts.org b/test/site/content-org/all-posts.org index 3ba1405..19158d0 100644 --- 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 diff --git a/test/site/content/posts/figure-shortcode-and-attr-html.md b/test/site/content/posts/figure-shortcode-and-attr-html.md index d2b3b99..648e27b 100644 --- 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: -{{< 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 diff --git a/test/site/content/posts/image-links.md b/test/site/content/posts/image-links.md index 11cafa8..1fecb0b 100644 --- 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. - + {{< 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" >}} diff --git a/test/site/content/posts/inline-images.md b/test/site/content/posts/inline-images.md new file mode 100644 index 0000000..9acde2f --- /dev/null +++ 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: +org-mode-unicorn-logo.png. + + +## 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: +[copy-2-of-unicorn-logo.png](/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" >}} diff --git a/test/site/content/real-examples/multifractals-in-ecology-using-r.md b/test/site/content/real-examples/multifractals-in-ecology-using-r.md index 6a00715..e074822 100644 --- 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 diff --git a/test/site/content/real-examples/nn-intro.md b/test/site/content/real-examples/nn-intro.md index e9ebbb9..f11cf07 100644 --- 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）** 。