Cubic: Slideshow blocks shows images zoomed in

Automattic / themes

Free WordPress themes made by Automattic for WordPress.org and WordPress.com.

https://themeshaper.com

GNU General Public License v2.0

900 stars 357 forks source link

Cubic: Slideshow blocks shows images zoomed in #6581

Open ariel-maidana opened 2 years ago

ariel-maidana commented 2 years ago

Quick summary

Regardless of the Alignment settings, the Slideshow block is showing images zoomed in on simple sites with the Cubic theme. Related issue: https://github.com/Automattic/jetpack/issues/12178

p1658354400641829-slack-CB0B2G43X

Steps to reproduce

Activate the Cubic theme in a simple site.
Create a post.
Create a slideshow.
Add some images with different aspect ratios.
Publish or preview the post.

What you expected to happen

I would expect to see the full images.

What actually happened

Images appeared zoomed in and cropped.

Context

5548552-zd-woothemes

Platform (Simple, Atomic, or both?)

Simple

Theme-specific issue?

Reproduced in Cubic.

Browser, operating system and other notes

No response

Reproducibility

Once

Severity

No response

Available workarounds?

No response

Workaround details

No response

github-actions[bot] commented 2 years ago

Support References

This comment is automatically generated. Please do not edit it.

[ ] 5548552-zen
[ ] 5645307-zen
[ ] 7418975-zen

jamiepalatnik commented 2 years ago

📌 SCRUBBING : RESULT

Tested on Simple - Replicated
Tested on Self-hosted - Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

Was able to replicate this on a simple and self-hosted test site.
In my tests this was only happening on the Cubic theme, not when I tested on another theme like Pendant.
It seems like it is not affecting all images, but some images are zoomed and some of the next image is visible.
Screenshot:

📌 ACTIONS

Marked as Triaged for Quality Squad review

danielbachhuber commented 2 years ago

Created a patch D88642-code

jeffikus commented 2 years ago

Reviewed, changes suggested in diff patch.

danielbachhuber commented 2 years ago

@jeffikus Unassigning this from myself. Feel free to ping me if you need any further testing, etc.

daria2303 commented 2 years ago

User is asking for an update. It is not clear to me if this is being solved. Could you share some more details?

danielbachhuber commented 2 years ago

@daria2303 I'm not sure where this lives in the Theme team's set of priorities.

You can share this CSS with the user so they can fix it for their site.

@media screen and (min-width: 768px) {
    .wp-block-jetpack-slideshow .image-big {
        margin-left: 0px;
        margin-bottom: 0px;
    }
}

devNigel commented 2 years ago

@danielbachhuber This does not work for the vertical images in the gallery block as seen in this case: 5645307-zd-woothemes

Could you please check?

danielbachhuber commented 2 years ago

@devNigel Sorry for the delay! I was tied up in another project.

Here's some CSS they can use to have the vertical images display fully:

.entry-content .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure {
  align-items: initial;
}

.entry-content .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure img {
  margin-left: auto;
  margin-right: auto;
}

Babylon1999 commented 1 year ago

One more case with Alves theme in zd-5920463

I was able to reproduce it: https://d.pr/i/xT5oAN

csabarakasz commented 1 year ago

43339352-hc Hever theme. CSSs suggested did not work.

AnjanaV93 commented 10 months ago

Another report here: 7418975-zen