Resize Image / Lightbox solution

The CMS Questions
1

Hi,
i use lingonberry theme for my blog. This theme has no lightbox included. I would like to use a lightbox feature in this way:

  • Images are uploaded in original size (lingonberry has an upload hook with resizing every image to a width of 766, which i will disable)
  • lightbox feature is integrated in image-tag (site/tags/image.php) or new tag should have same features.
  • on “normal view” imagefile should be resized to 766 width. because of saving loading-time it should not load the original file which is just displayed with 766 wdth. (real resize!)
  • on click, the lightbox-feature should display the image in best/optimzed size for device, generated from original file

do you know any solution on this?

thx

2

Well you need find a javascript lightbox you prefer and then use Imageset elements inside it (or use the commercial imageset plugin).

Alternatively, use Kirby device to detect tablets and below and generate a resized image.

The images plugin is also useful.

Baguettebox can do responsive images:

<a href="img/2-1.jpg"
    data-at-450="img/thumbs/2-1.jpg"
    data-at-800="img/small/2-1.jpg"
    data-at-1366="img/medium/2-1.jpg"
    data-at-1920="img/big/2-1.jpg">
        <img src="img/thumbs/2-1.jpg">
</a>
3

This plugin could be a starting point: https://github.com/wottpal/kirby-lightbox-gallery. It uses Photoswipe. It comes with a kirbytag.

What it is missing but could be added is a srcset attribute in the lightbox images.

I wouldn’t recommend mobile detection to resize images. This is unreliable and unnecessary. A well defined srcset should be sufficient.