Skip to content

Gallery lightbox: Images shown in lightbox should use images' original aspect ratios instead of thumbnails' aspect ratios #79040

@Tmeemu

Description

@Tmeemu

Description

The images opened in the Gallery Lightbox are shown using the same aspect ratios/proportions as their thumbnails, which may be wildly different from the original images. While the cropped thumbnails get an arbitrary aspect ratio based on the shape of one of the images on the row of the gallery or from the aspect ratio chosen for the thumbs, the images shouldn't be shown using that same aspect ratio.

Step-by-step reproduction instructions

  1. Add a gallery with multiple images that have different original aspect ratios. Enable "Enlarge on click" for the gallery to enable the built-in lightbox.
  2. Enable either "Crop images to fit" setting as is – for automatic proportions for the thumbnails – or choose any Aspect Ratio to use a specific aspect ratio for them.
  3. Click on a gallery image on the frontend to open it in the lightbox. Any opened, big image will open using the same aspect ratio as its thumbnail.

Presumably, this is a result of the gallery images being shown similarly to individual images, but the same principle clearly doesn't work for the Galleries (and I'd argue that it's debatable if even the individual images should be shown using their thumbnails' aspect ratios, but that's another topic and can be argued either way). As you can see in the below recording, the proportions of a single image in the gallery can mess up the presentation for all other gallery images, for example.

Visually "scaling up" from the thumb to the lightbox image may not work smoothly when the proportions aren't the same, but perhaps simple fade-in for the lightbox images would work better on the whole for all implementations in that case.

Screenshots, screen recording, code snippet

chrome_woj9CFUgmG.mp4

Environment info

  • WP 7.0. Twenty Twenty-Five (current up-to-date version) but the same also happens in our custom (hybrid) theme. Gutenberg plugin disabled, but the same happens with Gutenberg 23.3.2 enabled, too.
  • Chrome 149.0.7827.54 or Firefox 151.0.3.
  • Desktop with Windows 10.

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] GalleryAffects the Gallery Block - used to display groups of images[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions