Linked bigger version of an image

[novoid]

What and Why

I want to add big versions of images to a blog post that exceed the default max width of 560 which is not enforced but suggested by the CSS layout.

This is a common pattern: when a big image is embedded in an article, show a thumbnail version or the maximum possible size in the blog post and offer the big version as a link. This way, the reader is able to decide whether or not he/she wants to open the link (as a new tab).

Without this feature, I am limited to the maximum size according to the CSS and/or I can't see all the details in the resized image. When I ignore the maximum size according to the CSS, I end up with a broken layout where the image is exceeding the column and potentially causes various CSS side-effects.

Open Questions

Following questions are to clarify for the concept:

• how should the syntax be in Org mode?
  • I don't know (yet?) how a linked image can be a link to a bigger image as well
• alternative/optional: generate a link in the caption line like This is my caption (see bigger version)? (automatically?) And how is this written in the Org version of the article?

Current situation

Org mode file with image links will get transformed by lazyblorg to this HTML result. So far I am quite confident that I am 100% consistent with the normal Org mode syntax for images:

#+CAPTION: This is going to be the caption
#+ATTR_HTML: :alt This is going to be the alt parameter of the img tag
#+ATTR_HTML: :title The title is ignored
#+ATTR_HTML: :align right :width 300
[[tsfile:2017-03-11T18.29.21 Sterne im Baum -- mytag publicvoit.jpg][If there is an CAPTION, this title gets ignored]]

<figure class="image-right">
<img src="22017-03-11T18.29.21 Sterne im Baum -- mytag publicvoit scaled width 300.jpg" 
     alt="This is going to be the alt parameter of the img tag" 
     width="300" />
<figcaption>This is going to be the caption</figcaption>
</figure>

And yes: lazyblorg really scales the images to their desired width/height so that you don't rely on browser scaling and minimize transferred data amount.

The Org manual on image links or on handling links does not mention something that caught my eye.

Therefore, I need something that might (or might not?) differ from the standard Org mode syntax to be able to define the desire to link the original image behind the embedded image.

A Proposal

The most Org-like way of enabling this feature would probably be inventing a new property that Org mode (hopefully) ignores:

#+CAPTION: This is going to be the caption
#+ATTR_HTML: :alt This is going to be the alt parameter of the img tag
#+ATTR_HTML: :align right :width 300
#+ATTR_HTML: :embedfullsizeimage true
[[tsfile:2017-03-11T18.29.21 Sterne im Baum -- mytag publicvoit.jpg][If there is an CAPTION, this title gets ignored]]

Please note that :embedfullsizeimage true is a stupid placeholder which should be renamed to an appropriate name.

To be honest, I don't even know if there are boolean parameters that do not require a value, thus, omitting the "true" part of my example above.

(I also asked on reddit)

[novoid]

• test following approach from https://www.reddit.com/r/orgmode/comments/92kv1y/how_to_define_the_syntax_to_link_a_different/e3d9gyh/:

#+name: fig__unicorn
#+caption: Some caption
[[file:large-image.png][file:small-image.png]]

[novoid]

The neat link-in-link approach will not do it for my requirements since it still doesn't allow me to define a different resolution for the linked image such as width=1000px. :-(

https://orgmode.org/worg/org-tutorials/images-and-xhtml-export.html and https://www.w3schools.com/tags/tag_img.asp do not list a potential useful candidate within the official Org mode or HTML attributes for images.

Currently, I am thinking of:
#+ATTR_HTML: :linked-image-width [none|original|<integer>]

The none option causes no linked-image being generated. original links an image that has the same dimensions than the original one. Any <integer> defines the new width of the linked image.

In any case, the image gets processed and EXIF data removed in order to get rid of meta-data such as GPS coordinates. This is a privacy-maintaining feature.

[novoid]

Implemented the feature. Explained it on https://karl-voit.at/2019/10/16/lazyblorg-linked-image-width/