You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
5.7 KiB
151 lines
5.7 KiB
+++ |
|
title = "Image links" |
|
date = 2017-07-15T07:49:44-04:00 |
|
tags = ["image"] |
|
draft = false |
|
+++ |
|
|
|
This is some text before the first heading of this post. |
|
|
|
|
|
## Unclickable image (works!) {#unclickable-image--works} |
|
|
|
```org |
|
# Org source |
|
#+name: fig__unclickable_image |
|
#+caption: Don't click this image -- It's not a hyperlink |
|
[[/images/org-mode-unicorn-logo.png]] |
|
``` |
|
|
|
<a id="org438f8e5"></a> |
|
|
|
{{< figure src="/images/org-mode-unicorn-logo.png" caption="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: |
|
|
|
```text |
|
# Unclickable image |
|
``` |
|
|
|
instead of |
|
|
|
```text |
|
## 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!) {#clickable-link-that-opens-the-image--works} |
|
|
|
[Click here to see the unicorn](/images/org-mode-unicorn-logo.png) |
|
|
|
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](#org39c5252): |
|
|
|
```org |
|
# Org source |
|
[[/images/org-mode-unicorn-logo.png][/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!) {#clickable-image-that-opens-the-image--works} |
|
|
|
Click below image to jump to the unicorn image. |
|
|
|
```org |
|
# 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]] |
|
``` |
|
|
|
<a id="org39c5252"></a> |
|
|
|
{{< figure src="/images/unicorn-logo-small.png" caption="Figure 2: Click this image -- It's a hyperlink" link="/images/org-mode-unicorn-logo.png" >}} |
|
|
|
NOTE |
|
: `file:` has to be used in the **Description component** of the |
|
Org link. |
|
|
|
|
|
### Similar link with `#+name` specified {#similar-link-with-plus-name-specified} |
|
|
|
Here's a similar link with `#+name` specified.. which should also be |
|
clickable. |
|
|
|
<a id="org7a66995"></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} |
|
|
|
_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. |
|
|
|
{{< figure src="/images/org-mode-unicorn-logo.png" link="/images/org-mode-unicorn-logo.png" >}} |
|
|
|
|
|
## Link to image outside of standard Hugo `static` directory {#path-containing-static} |
|
|
|
{{< figure src="/images/copy-of-unicorn-logo.png" >}} |
|
|
|
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/` {#source-path-does-not-contain-static} |
|
|
|
{{< figure src="/ox-hugo/copy-2-of-unicorn-logo.png" >}} |
|
|
|
| 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-hugo` sub-directory name is because of the default |
|
value of |
|
`org-hugo-default-static-subdirectory-for-externals`. |
|
|
|
|
|
#### Same image, but hyperlinked to itself {#same-image-but-hyperlinked-to-itself} |
|
|
|
{{< figure src="/ox-hugo/copy-2-of-unicorn-logo.png" link="/ox-hugo/copy-2-of-unicorn-logo.png" >}} |
|
|
|
|
|
## Link to an image with space in filename {#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](https://github.com/kaushalmodi/ox-hugo/issues/376) |
|
[Link to `unicorn logo.png`](</ox-hugo/unicorn logo.png>)
|
|
|