Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Linked bigger version of an image #17

Closed
novoid opened this issue Jul 28, 2018 · 3 comments
Assignees
Labels

Comments

@novoid
Copy link
Owner

@novoid novoid commented Jul 28, 2018

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 novoid added the enhancement label Jul 28, 2018
@novoid novoid self-assigned this Jul 28, 2018
@novoid

This comment has been minimized.

Copy link
Owner Author

@novoid novoid commented Aug 11, 2018

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

This comment has been minimized.

Copy link
Owner Author

@novoid novoid commented Aug 25, 2018

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

This comment has been minimized.

Copy link
Owner Author

@novoid novoid commented Oct 16, 2019

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

@novoid novoid closed this Oct 16, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.