Thumbnails are displayed differently than in an earlier version of this plugin with identical config settings (issue + suggested fix)

[johngnl]

Issue

For my fix, see below

I noticed that thumbnails of individual images are shown smaller than in an earlier version of this plugin (2021-09-11) with identical config settings. DokuWiki version is 2024-02-06 "Kaos". Template used is bootstrap3.

Settings are:
$conf['plugin']['gallery']['thumbnail_width'] = 450;
$conf['plugin']['gallery']['thumbnail_height'] = 450;
$conf['plugin']['gallery']['image_width'] = 1920;
$conf['plugin']['gallery']['image_height'] = 1920;
$conf['plugin']['gallery']['cols'] = 2;
$conf['plugin']['gallery']['options'] = 'cache,lightbox';

DokuWiki syntax in a sample page:
{{gallery> :important:instructies:pasted:20230516-133124.png }}
(image size is 624 × 315)

Gallery plugin version 2021-09-11 generates the following relevant html code for the image:
<a .... ><img src="/bron/_media/important/instructies/pasted/20230516-133124.png?w=450&amp;h=227&amp;tok=e97a25" width="450" height="227" border="0" alt="20230516-133124.png" class="tn"> </a>
which shows the image contained in a box of 450x450px as is expected.

Gallery plugin version 2023-12-08 generates the following relevant html code for the image:
<figure class="gallery-image" style="max-width: 450px; "> <a ... ><img width="624" height="315" src="/dev/dw_20240206_test4hkkbl/_media/important/instructies/pasted/20230516-133124.png?w=624&amp;h=315&amp;tok=7f9893" alt="20230516-133124.png" loading="lazy"></a></figure>
which shows just half the image, the rest being cut off.

What seem to be causing this is the html code that is seen around the figure tag:
<div class="gallery-page" id="gallery__6821_0" style="grid-template-columns: repeat(2, min(450px, 50% - 1em));"><figure ...>... </figure></div>
Apparently, the total allowed width of 450px is split across 2 images (as indicated by $conf['plugin']['gallery']['cols']). This, however, doesn't work when only 1 picture needs to be shown horizontally.

When various images need to be shown, more layout differences can be seen. The following screenshots show what I mean.

+++ Current versions in use +++
DokuWiki version is 2020-07-29 "Hogfather"
Bootstrap version is v2021-03-11 (stable/20210311)
Gallery version is 2021-09-11
++++++

+++ New versions in test +++
DokuWiki version is 2024-02-06 "Kaos"
Bootstrap version is v2024-02-06 (stable/20240206)
Gallery version is 2023-12-08
++++++

Screenshots from current version

Screenshots from new version

It took me quite some time to figure out what caused this, and how to fix it. After these fixes the screenshots look very similar to the current ones. Before indicating what fixes I made, I'll show the screenshots first.

Screenshots from new version with my fixes

My fixes

File: lib/plugins/gallery/classes/XHTMLFormatter.php

In function renderPage:
WAS
$attr['style'] = 'grid-template-columns: repeat(' . $cols . ', ' . $colwidth . ')';
CHANGED TO
$attr['style'] = 'grid-template-columns: repeat(' . $cols . ', auto)';
( $colwidth needs no longer be calculated, 'auto' divides the space evenly across the columns.)

In function renderImage:
WAS
$img['width'] = $w;
$img['height'] = $h;
$img['src'] = ml($image->getSrc(), ['w' => $w, 'h' => $h], true, '&');
CHANGED TO
if ($w >= $h ) {
$img['width'] = '100%';
$img['height'] = 'auto';
$img['src'] = ml($image->getSrc(), ['w' => $this->options->thumbnailWidth], true, '&'); // According to function ml() 'h' is not mandatory
} else {
$img['width'] = 'auto';
$img['height'] = '100%';
$img['src'] = ml($image->getSrc(), ['h' => $this->options->thumbnailHeight], true, '&'); // According to function ml() 'w' is not mandatory
}
(The image obtained via ml() now has the exact horizontal or vertical dimension.)

Line
$fig['style'] = 'max-width: ' . $this->options->thumbnailWidth . 'px; ';
should be deleted (or commented out) as this disturbs the layout greatly.

File: lib/plugins/gallery/screen.less

WAS
div.plugin-gallery div.gallery-page figure {
...
border: 1px solid @ini_border;
justify-content: space-between;
...

CHANGED TO
div.plugin-gallery div.gallery-page figure {
...
/* border: 1px solid @ini_border; original => "unset" because img gets border */
justify-content: center;
...

WAS
div.plugin-gallery div.gallery-page figure img {
max-width: 100%;
height: auto;
}

CHANGED TO
div.plugin-gallery div.gallery-page figure img {
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px;
}

That's it. These changes helped me to get the new layout very similar to the current one.

Maybe (some of) these changes are good enough to be added to an upcoming version of the excellent gallery plugin.