From 44a3a0d3b3c9d16fadf2649294f1f0b5c7a83bd2 Mon Sep 17 00:00:00 2001 From: Kaushal Modi Date: Fri, 7 Jul 2017 15:30:06 -0400 Subject: [PATCH] Update example site noting the issues with image links --- example-site/content-org/all-posts.org | 67 +++++++++++++++++++++++--- example-site/content/posts/image.md | 65 ++++++++++++++++++++++--- 2 files changed, 118 insertions(+), 14 deletions(-) diff --git a/example-site/content-org/all-posts.org b/example-site/content-org/all-posts.org index 1af1bf7..7ff3b45 100644 --- a/example-site/content-org/all-posts.org +++ b/example-site/content-org/all-posts.org @@ -34,7 +34,10 @@ H H=. /Need to add smarts that determines which subtree contains the whole post.. like look for =EXPORT_FILE_NAME=?/ ** Unclickable image -[[./images/org-mode-unicorn-logo.png]] + +*This works!* + +[[/images/org-mode-unicorn-logo.png]] *To be fixed*: The sub-headings in a post get exported as /Heading 1/ instead of /Heading 2/. @@ -50,13 +53,61 @@ instead of So the sub-heading title and the post title both get the /Heading 1/ tag and look the same size. -** Clickable link that opens the image -[[./images/org-mode-unicorn-logo.png][Click here to see the unicorn]] -** Clickable image that opens the image +** TODO Clickable link that opens the image +[[/images/org-mode-unicorn-logo.png][Click here to see the unicorn]] +*** FIXME +Above: +#+BEGIN_EXAMPLE +[[/images/org-mode-unicorn-logo.png][Click here to see the unicorn]] +#+END_EXAMPLE +exports to: +#+BEGIN_EXAMPLE +[Click here to see the unicorn](file:///images/org-mode-unicorn-logo.png) +#+END_EXAMPLE +instead of: +#+BEGIN_EXAMPLE +[Click here to see the unicorn](/images/org-mode-unicorn-logo.png) +#+END_EXAMPLE +** TODO Clickable image that opens the image Click below image to jump to the unicorn image. -[[file:images/org-mode-unicorn-logo.png][file:./images/org-mode-unicorn-logo.png]] -- NOTE 1 :: =file:= has to be used in both Link and Description components +[[file:/images/org-mode-unicorn-logo.png][file:/images/org-mode-unicorn-logo.png]] +*** FIXME +Above: +#+BEGIN_EXAMPLE +[[file:/images/org-mode-unicorn-logo.png][file:/images/org-mode-unicorn-logo.png]] +#+END_EXAMPLE +exports to: +#+BEGIN_EXAMPLE +[![img](/images/org-mode-unicorn-logo.png)](file:///images/org-mode-unicorn-logo.png) +#+END_EXAMPLE +instead of: +#+BEGIN_EXAMPLE +[![img](/images/org-mode-unicorn-logo.png)](/images/org-mode-unicorn-logo.png) +#+END_EXAMPLE + +- NOTE :: =file:= has to be used in both Link and Description components of the Org link. -- NOTE 2 :: As the path is relative, we need to use =./images/..= - instead of =/images/..=. +** TODO Image with =ATTR_HTML= [[https://github.com/kaushalmodi/ox-hugo/issues/17][Issue # 17]] +#+ATTR_HTML: :class inset +[[/images/org-mode-unicorn-logo.png]] + +[[https://github.com/kaushalmodi/ox-hugo/issues/17#issuecomment-313627728][Discussion]] +*** Below will not work! +You cannot wrap markdown code inside HTML. + +As /rdwatters/ says [[https://discourse.gohugo.io/t/is-it-possible-to-insert-html-code-in-markdown-content/4867/4?u=kaushalmodi][here]], +#+BEGIN_QUOTE +HTML can be part of markdown because HTML-inside-markdown is part of +the spec. That said, remember that the spec disallows markdown nested +inside of HTML. So if you create a div, just make sure everything +inside that div is valid HTML. +#+END_QUOTE + +#+BEGIN_EXPORT md +
+#+END_EXPORT +[[/images/org-mode-unicorn-logo.png]] +#+BEGIN_EXPORT md +
+#+END_EXPORT diff --git a/example-site/content/posts/image.md b/example-site/content/posts/image.md index ea3823b..0d6ca16 100644 --- a/example-site/content/posts/image.md +++ b/example-site/content/posts/image.md @@ -1,6 +1,6 @@ +++ title = "Image" -date = 2017-07-06T16:27:48-04:00 +date = 2017-07-07T15:33:35-04:00 tags = [] +++ @@ -11,7 +11,9 @@ tags = [] # Unclickable image -![img](./images/org-mode-unicorn-logo.png) +**This works!** + +![img](/images/org-mode-unicorn-logo.png) **To be fixed**: The sub-headings in a post get exported as *Heading 1* instead of *Heading 2*. @@ -28,14 +30,65 @@ So the sub-heading title and the post title both get the *Heading 1* tag and loo # Clickable link that opens the image -[Click here to see the unicorn](./images/org-mode-unicorn-logo.png) +[Click here to see the unicorn](file:///images/org-mode-unicorn-logo.png) + + +## FIXME + +Above: + + [[/images/org-mode-unicorn-logo.png][Click here to see the unicorn]] + +exports to: + + [Click here to see the unicorn](file:///images/org-mode-unicorn-logo.png) + +instead of: + + [Click here to see the unicorn](/images/org-mode-unicorn-logo.png) # Clickable image that opens the image Click below image to jump to the unicorn image. -[![img](./images/org-mode-unicorn-logo.png)](images/org-mode-unicorn-logo.png) +[![img](/images/org-mode-unicorn-logo.png)](file:///images/org-mode-unicorn-logo.png) + + +## FIXME + +Above: + + [[file:/images/org-mode-unicorn-logo.png][file:/images/org-mode-unicorn-logo.png]] + +exports to: + + [![img](/images/org-mode-unicorn-logo.png)](file:///images/org-mode-unicorn-logo.png) + +instead of: + + [![img](/images/org-mode-unicorn-logo.png)](/images/org-mode-unicorn-logo.png) + +- **NOTE:** `file:` has to be used in both Link and Description components of the Org link. + + +# Image with `ATTR_HTML` [Issue # 17](https://github.com/kaushalmodi/ox-hugo/issues/17) + +![img](/images/org-mode-unicorn-logo.png) + +[Discussion](https://github.com/kaushalmodi/ox-hugo/issues/17#issuecomment-313627728) + + +## Below will not work! + +You cannot wrap markdown code inside HTML. + +As *rdwatters* says [here](https://discourse.gohugo.io/t/is-it-possible-to-insert-html-code-in-markdown-content/4867/4?u=kaushalmodi), + +> HTML can be part of markdown because HTML-inside-markdown is part of the spec. That said, remember that the spec disallows markdown nested inside of HTML. So if you create a div, just make sure everything inside that div is valid HTML. + +
+ +![img](/images/org-mode-unicorn-logo.png) -- **NOTE 1:** `file:` has to be used in both Link and Description components of the Org link. -- **NOTE 2:** As the path is relative, we need to use `./images/..` instead of `/images/..`. +