Jetpack Gallery Block – distorted Images

• 

  justjennifer · Member · Sep 22, 2019 at 2:37 pm

  • Copy link
  • Add topic to favorites

  Howdy!

  I inserted a Jetpack Tiled Gallery block in my site’s latest draft post (Befuddled) and set it to display as squares, 3 columns in order to save space in the post. Each full size image is 448 x 1053 pixels.

  When I click through the thumbnail to view the image in the Carousel, the individual image is distorted like this screenshot. The same thing happens if I use Circles.

  Both Tiled Mosaic and Tiled Columns display correctly in the Carousel.

  The blog I need help with is: (visible only to logged in users)

• 

  staff-zinnia · Staff · Sep 22, 2019 at 8:50 pm

  • Copy link

  Howdy –

  Thanks for getting in touch about this. Are there any other plugins installed on the site? Does the behavior continue when Jetpack is the only one installed?

• 

  justjennifer · Member · Sep 23, 2019 at 4:45 am

  • Copy link

  Hey staff-zinnia :) No plugins installed. Jetpack Tiled Gallery Block is standard issue also on my non-upgraded sites.

• 

  kokkieh · Staff · Sep 23, 2019 at 5:19 am

  • Copy link

  Hi Jennifer,

  It looks like this is a known issue with the carousel – what’s happening is that it’s taking the square image as displayed in the gallery, but trying to display it at the original image file’s dimensions in the carousel.

  The Jetpack team is working on this, but meanwhile you can use this CSS to prevent it from happening, provided it’s on a site where you can add custom CSS:

  /* Gallery Carousel stretch images workaround */
  .jp-carousel-slide img {
  	object-fit: contain;
  }

• 

  justjennifer · Member · Sep 23, 2019 at 11:58 am

  • Copy link

  Hm, thanks @kokkieh. In this case I’ll go ahead and switch to a different tiled Gallery type rather than add another CSS snippet to the style sheet.