Page MenuHomePhabricator

Different sizing of last image in <gallery mode="packed">
Open, Needs TriagePublic

Assigned To
None
Authored By
Wickie37
Feb 7 2019, 3:36 PM
Referenced Files
F71643581: image.png
Feb 1 2026, 3:36 PM
F71643579: image.png
Feb 1 2026, 3:36 PM
F36917621: obraz.png
Mar 18 2023, 3:11 PM
F36917604: obraz.png
Mar 18 2023, 3:11 PM

Description

In galleries with mode="packed" the last image in the gallery is unexpectedly downscaled under certain conditions.

Steps to reproduce:

  1. Go to https://de.wikipedia.org/wiki/Benutzer:Wickie37/Test3
  2. Resize your browser window to a width of about 600px

Expected result: The three identical images should be sized equally
Actual result: The last image is smaller than the others

See also https://de.wikipedia.org/wiki/Wikipedia:Fragen_zur_Wikipedia#Bug_in_%3Cgallery_mode=%22packed%22%3E?

Edit: It seems that not only the last image is effected, but the last row. I updated the test case, so that this effect is visible with two images in the last row (with window width of 1230px).

Related Objects

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

A similar example I assume:
https://pl.wikipedia.org/w/index.php?title=Ko%C5%9Bci%C3%B3%C5%82_%C5%9Bw._Katarzyny_w_Timi%C8%99oarze&oldid=68618051
Current view with JS enhancement:

obraz.png (914×541 px, 639 KB)

Code:

<gallery mode="packed" heights="150">
Plik:Timisoara Biserica Str. Bolyai (1).JPG|Fasada
Plik:Temesvár, Alexandriai Szent Katalin-templom belső tere 2022 01.jpg|Wnętrze
Plik:Temesvár, Alexandriai Szent Katalin-templom belső tere 2022 03.jpg|Ołtarz główny
Plik:Temesvár, Alexandriai Szent Katalin-templom belső tere 2022 07.jpg|Ołtarz [[Ukrzyżowanie Jezusa Chrystusa|Ukrzyżowania]]
Plik:Temesvár, Alexandriai Szent Katalin-templom belső tere 2022 08.jpg|Organy
</gallery>

So, as you can see from the code, the user's intention was to keep the same heights for all images, but after the changes made in JS, the height of the last image differs from the others.

A more modern approach. I think it would be a good idea to rewrite the support for these galleries as there are now better tools available that are built into browsers. The display flex is very stable and has extensive support.

I've made a proof of concept which would obviously require more extensive testing, but I think there's a chance it will just work.

Step. 1. Remove static width (or just don't add them in the 1st place):

document.querySelectorAll('.gallery.mw-gallery-packed [style]').forEach(a=>a.style.width='')

Step. 2. Disable current JS that changes widths on resize.

Step. 3. CSS.

ul.gallery.gallery.gallery.mw-gallery-packed {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: baseline;
	justify-content: center;
}
ul.mw-gallery-packed li {
/* 	flex: 1; */
}
ul.mw-gallery-packed div.thumb img {
	width: auto;
	height: 200px;	/* should be set by users */
}

This is a working version. The gallery after these changes looks like this:

obraz.png (919×505 px, 630 KB)

Much better for my taste 🙂...

Configuration for users The only thing left now is the problem of user height control. I think the easiest way to do this is through CSS variables.

So <gallery mode="packed" heights="200"> could render as:

<ul class="gallery mw-gallery-packed" style="--gallery-height: 200px;">

And the CSS would be:

ul.gallery.gallery.gallery.mw-gallery-packed div.thumb img {
	width: auto;
	height: var(--gallery-height);
}

That just works 🙂.

Only problem is with current JS that is re-setting widths. So at the moment after each resize you will need to run this again:

document.querySelectorAll('.gallery.mw-gallery-packed [style]').forEach(a=>a.style.width='')

Change #1234524 had a related patch set uploaded (by Func; author: Func):

[mediawiki/core@master] gallery: Avoid width error when overlapping with floating elements

https://gerrit.wikimedia.org/r/1234524

I tried to reimplement it using flex layout, but it seems impossible to replicate the intended behaviour of the current implementation: "for the elements in the last row, only grow if they can fill the row nicely within their max-width, (grow to the average zoom factor otherwise), while keeping elements centred horizontally".

Found a simple fix instead.

Change #1234524 had a related patch set uploaded (by Func; author: Func):
[mediawiki/core@master] gallery: Avoid width error when overlapping with floating elements
https://gerrit.wikimedia.org/r/1234524

Found a simple fix instead.

This just applies display: flow-root, which also limits the width of the whole gallery to the narrowest spot, instead of allowing it to wrap around floated content like infoboxes. This is probably a good change, but the effect may be unexpected – for example, here's the "Kościół św. Katarzyny w Timișoarze" page linked by Nux earlier at a particular browser width that highlights this:

CurrentWith this patch applied
image.png (1,140×965 px, 749 KB)
image.png (1,140×965 px, 634 KB)

See also T29540: width of <gallery> always 100%, where a similar change had to be reverted some years ago.

@matmarex Thanks for the pointers. With display: flow-root, we are free from the alignment and resizing issues of the previous attempts, and I made some improvements for smaller container sizes just now.