Skip to content

Commit

Permalink
Remove lookup for external image full dimensions
Browse files Browse the repository at this point in the history
If a user uses an external image, then we only know
one set of dimensions, and we can use those dimensions
from the image in the content for the lightbox.

This commit adds logic to handle that scenario.
  • Loading branch information
artemiomorales committed Jun 30, 2023
1 parent 099ea67 commit ce87aa5
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 5 deletions.
5 changes: 2 additions & 3 deletions lib/block-supports/behaviors.php
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,8 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
$img_uploaded_srcset = wp_get_attachment_image_srcset( $block['attrs']['id'] );
} else {
$img_uploaded_src = $z->get_attribute( 'src' );
$img_dimensions = wp_getimagesize( $img_uploaded_src );
$img_width = $img_dimensions[0];
$img_height = $img_dimensions[1];
$img_width = 'none';
$img_height = 'none';
$img_uploaded_srcset = '';
}

Expand Down
14 changes: 12 additions & 2 deletions packages/block-library/src/image/view-interactivity.js
Original file line number Diff line number Diff line change
Expand Up @@ -202,8 +202,18 @@ store( {
} );

function setZoomStyles( imgDom, context, event ) {
let targetWidth = context.core.image.targetWidth;
let targetHeight = context.core.image.targetHeight;
// Typically, we use the image's full-sized dimensions. If those
// dimensions have not been set (i.e. an external image with only one size),
// the image's dimensions in the lightbox are the same
// as those of the image in the content.
let targetWidth =
context.core.image.targetWidth !== 'none'
? context.core.image.targetWidth
: event.target.nextElementSibling.naturalWidth;
let targetHeight =
context.core.image.targetHeight !== 'none'
? context.core.image.targetHeight
: event.target.nextElementSibling.naturalHeight;

// Since the lightbox image has `position:absolute`, it
// ignores its parent's padding, so we need to set padding here
Expand Down

0 comments on commit ce87aa5

Please sign in to comment.