Image links
tags: image
Description/Summary
This is some text before the first heading of this post. Unclickable image (works!) # # Org source #+name: fig__unclickable_image #+caption: Don't click this image -- It's not a hyperlink [[/images/org-mode-unicorn-logo.png]] Figure 1: Don’t click this image – It’s not a hyperlink To be fixed (Now fixed): The sub-headings in a post get exported as Heading 1 instead of Heading 2. For example, this sub-section’s heading is exported as: # Unclickable image instead of
Content
This is some text before the first heading of this post.
Unclickable image (works!) #
# Org source
#+name: fig__unclickable_image
#+caption: Don't click this image -- It's not a hyperlink
[[/images/org-mode-unicorn-logo.png]]
Figure 1: Don’t click this image – It’s not a hyperlink
To be fixed (Now fixed): The sub-headings in a post get exported as Heading 1
instead of Heading 2.
For example, this sub-section’s heading is exported as:
# Unclickable image
instead of
## Unclickable image
Solution: Above is fixed by setting HUGO_OFFSET_LEVEL to 1.
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 (works!) #
Do not use file: prefix in the Description if you want the image
link to show up as-is i.e. not be replaced by the image-at-link like
in 2:
# Org source
[[/images/org-mode-unicorn-logo.png][/images/org-mode-unicorn-logo.png]]
/images/org-mode-unicorn-logo.png
Clickable image that opens the image (works!) #
Click below image to jump to the unicorn image.
# Org source
#+name: fig__clickable_image_that_opens_the_image
#+caption: Click this image -- It's a hyperlink
[[/images/org-mode-unicorn-logo.png][file:../files-to-be-copied-to-static/static/images/unicorn-logo-small.png]]
Figure 2: Click this image – It’s a hyperlink
- NOTE
file:has to be used in the Description component of the Org link.
Similar link with #+name specified
#
Here’s a similar link with #+name specified.. which should also be
clickable.
Same link with file: in “link” portion of the Org link too
#
Note that the file: is needed only in the “description” portion to
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.
Link to image outside of standard Hugo static directory
#
If you link to files outside of the Hugo static directory, ensure
that the path contains /static/ if you would like to preserve the
directory structure.
Example translations between outside static directory paths to the
copied location inside static:
Outside static |
Copied-to location inside static |
Explanation |
|---|---|---|
~/temp/static/images/foo.png |
<HUGO_BASE_DIR>/static/images/foo.png |
If the outside path has /static/ in it, the directory structure after that is preserved when copied. |
~/temp/static/img/foo.png |
<HUGO_BASE_DIR>/static/img/foo.png |
(same as above) |
~/temp/static/foo.png |
<HUGO_BASE_DIR>/static/foo.png |
(same as above) |
~/temp/static/articles/zoo.pdf |
<HUGO_BASE_DIR>/static/articles/zoo.pdf |
(same as above) |
The above path translations (when path contains static) hold true
even when inside page bundle pages.
Source path does not contain /static/
#
Outside static |
Copied-to location inside static |
Explanation |
|---|---|---|
~/temp/bar/baz/foo.png |
<HUGO_BASE_DIR>/static/ox-hugo/foo.png |
Here, as the outside path does not have /static/, the file is copied to the ox-hugo/ dir in Hugo static/ dir. |
- Note
- The
ox-hugosub-directory name is because of the default value oforg-hugo-default-static-subdirectory-for-externals.
Same image, but hyperlinked to itself #
Link to an image with space in filename #
This is a link to a file with a space in the filename:
ox-hugo Issue #376
Link to unicorn logo.png
Page (Debug)
| Page Variable | Value | |
|---|---|---|
| Name | "Image links" | |
| Title | "Image links" | |
| ResourceType | "page" | |
| Kind | "page" | |
| Section | "posts" | |
| Draft | false | |
| Type | "posts" | |
| Layout | "" | |
| Permalink | "https://ox-hugo.scripter.co/test/posts/image-links/" | |
| RelPermalink | "/posts/image-links/" | |
| Data |
| |
| NextPage | Overriding menu properties completely | |
| PrevPage | Source blocks with Hugo highlight shortcode | |
| NextInSection | Overriding menu properties completely | |
| PrevInSection | Source blocks with Hugo highlight shortcode |
Page Params (Debug)
| Key | Type | Value |
|---|---|---|
| date | time.Time | 2017-07-15 07:49:44 -0400 -0400 |
| draft | bool | false |
| iscjklanguage | bool | false |
| lastmod | time.Time | 2022-01-01 01:08:45 -0500 -0500 |
| publishdate | time.Time | 2017-07-15 07:49:44 -0400 -0400 |
| tags | []string | "image" |
| title | string | "Image links" |
File Object (Debug)
| FileInfo Variable | Value |
|---|---|
| UniqueID | "dff05f7db468d53d2ed36e22008cd3fa" |
| BaseFileName | "image-links" |
| TranslationBaseName | "image-links" |
| Lang | "en" |
| Section | "posts" |
| LogicalName | "image-links.md" |
| Dir | "posts/" |
| Ext | "md" |
| Path | "posts/image-links.md" |