Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image block: Lightbox animation improvements #51721

Merged
merged 9 commits into from
Jun 26, 2023
Merged

Image block: Lightbox animation improvements #51721

merged 9 commits into from
Jun 26, 2023

Commits on Jun 23, 2023

  1. Add logic to use low-res image while high-res one is loading 

    We need to have two <img> elements in the DOM inside the lightbox
because otherwise the image flickers when we change the src.

I removed the src and srcset attributes from the responsive image
when the larger one is loaded to signal that the low-res one is no
longer in use.
    @artemiomorales @cbravobernal
    artemiomorales authored and cbravobernal committed Jun 23, 2023
    Configuration menu
    Copy the full SHA
    1026f82 View commit details
    Browse the repository at this point in the history

  2. Add logic to preload image on hover

    @artemiomorales @cbravobernal
    artemiomorales authored and cbravobernal committed Jun 23, 2023
    Configuration menu
    Copy the full SHA
    8b4ae20 View commit details
    Browse the repository at this point in the history

  3. Update tests

    @artemiomorales @cbravobernal
    artemiomorales authored and cbravobernal committed Jun 23, 2023
    Configuration menu
    Copy the full SHA
    135105c View commit details
    Browse the repository at this point in the history

  4. PHP format

    @cbravobernal
    cbravobernal committed Jun 23, 2023
    Configuration menu
    Copy the full SHA
    54047cb View commit details
    Browse the repository at this point in the history

  5. Prevent responsive images from being loaded unnecessarily 

    The src attribute on the img elements was causing the srcset
attribute to be added as well before the Interactivity API
could remove them, causing images to be loaded before they
were needed and in the wrong size.

This commit removes the src attribute from the img elements
before they are output to the DOM, and also updates the tests.
    @artemiomorales @cbravobernal
    artemiomorales authored and cbravobernal committed Jun 23, 2023
    Configuration menu
    Copy the full SHA
    b4a3c1d View commit details
    Browse the repository at this point in the history

  6. Prevent warning of undefined variable

    @cbravobernal
    cbravobernal committed Jun 23, 2023
    Configuration menu
    Copy the full SHA
    549e795 View commit details
    Browse the repository at this point in the history

  7. Prevent warning of undefined variable - refactored

    @cbravobernal
    cbravobernal committed Jun 23, 2023
    Configuration menu
    Copy the full SHA
    c0baefa View commit details
    Browse the repository at this point in the history

  8. Replace getimagesize() with wp_getimagesize()

    @artemiomorales
    artemiomorales committed Jun 23, 2023
    Configuration menu
    Copy the full SHA
    e713211 View commit details
    Browse the repository at this point in the history

  9. Resolve image flash when opening lightbox 

    Rather than allowing the browser to pick the lightbox's
responsive image, we now explicitly read the currentSrc
attribute from the reference image and also prevent users
from opening the lightbox until the reference image is
fully loaded.

Doing this, we can ensure the zoom animation plays smoothly
and there are no oddities in the UX.
    @artemiomorales
    artemiomorales committed Jun 23, 2023
    Configuration menu
    Copy the full SHA
    7d3b3b5 View commit details
    Browse the repository at this point in the history