CLOSED: [2019-10-16 Wed 21:16] SCHEDULED: <2019-10-16 Wed>
:PROPERTIES:
:CREATED: [2019-10-16 Wed 20:50]
:ID: 2019-10-16-lazyblorg-linked-image-width
:END:
:LOGBOOK:
- State "DONE"       from "NEXT"       [2019-10-16 Wed 21:16]
:END:

Today, I finished working on a [[https://github.com/novoid/lazyblorg/][lazyblorg]] feature [[https://github.com/novoid/lazyblorg/issues/17][I was thinking of for
a long time]]: embedding images that link to a differently sized image.
This way, you are able to include a smaller image within the blog
article itself and allow your readers to take a closer look at a
larger version of the same image.

This comes with some changes you might want to understand before
upgrading lazyblorg and using that feature.

*** What's New?

The new functionality is explained in detail in [[https://github.com/novoid/lazyblorg/wiki/Images#linking-a-larger-image-version][the wiki page on
including image files]]. Further more, I updated the [[https://github.com/novoid/lazyblorg/blob/master/testdata/end_to_end_test/orgfiles/currently_supported_orgmode_syntax.org][example page of the
currently supported Org mode syntax]].

You may want to modify a new settings for
=CLUE_TEXT_FOR_LINKED_IMAGES= in [[https://github.com/novoid/lazyblorg/blob/master/config.py][config.py]] or the corresponding
styling =.figcaption-clue-link= in [[https://github.com/novoid/lazyblorg/blob/master/templates/public_voit.scss][templates/public_voit.scss]].

Additionally, lazyblorg is now purging [[https://en.wikipedia.org/wiki/Exif][Exif]] meta-data from images that
were included using the =tsfile:= method [[https://github.com/novoid/lazyblorg/wiki/Images#images-without-exif-metadata][for privacy reasons]].

*** Example

Here is an example. First, in the Org mode file it looks like that:

: #+CAPTION: An example image with a linked, larger version of it.
: #+ATTR_HTML: :alt This is the alt-text for this example image
: #+ATTR_HTML: :align center :width 560 :linked-image-width 1500
: [[tsfile:2019-08-14T09.05.49 Bali - Candi Beach - -- sel specialL minsel publicvoit.jpg][2019-08-14T09.05.49 Bali - Candi Beach - -- sel specialL minsel publicvoit.jpg]]

And this is the produced in the blog article:

#+CAPTION: An example image with a linked, larger version of it.
#+ATTR_HTML: :alt This is the alt-text for this example image
#+ATTR_HTML: :align center :width 560 :linked-image-width 1500
[[tsfile:2019-08-14T09.05.49 Bali - Candi Beach - -- sel specialL minsel publicvoit.jpg][2019-08-14T09.05.49 Bali - Candi Beach - -- sel specialL minsel publicvoit.jpg]]

*** Looking Forward

You will see more examples where I'm going to use this new feature on
my blog and maybe I'm going to add linked images to some older
articles as well.

Let me know how this feature resonates with your use-cases and send me
a comment below!