search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 798 forks source link

Carousel: Long Captions/Descriptions not fully visible. #21326

Open ahmadbaig1 opened 3 years ago

ahmadbaig1 commented 3 years ago

Quick summary

If your images have long descriptions in the gallery, then the description/caption is not fully visible. It happens when there are long sentences, they get abruptly cut off. However, multiple short sentences work fine. A guestimate is that 180 character long sentences just work fine, anything over this gets cut off (hidden).

Two long sentences/paras-
Markup on 2021-10-06 at 14:58:01

Same para broken into smaller sentences- Markup on 2021-10-06 at 14:58:30

Steps to reproduce

  1. Add a Tiled Gallery to your page.
  2. Make sure you add a long description/caption to the images from the Media Library
  3. Save the page and check the gallery by clicking on an image to open in full size mode slider mode.

What you expected to happen

I expected the caption/description to be broken up into sentences and be displayed as a vertically scrollable list of sentences, as it already happens with multiple sentences. See- https://d.pr/v/R6d3aJ

What actually happened

The long-ish sentences get cropped off and a visitor cannot read the full material, no way to do a horizontal text scroll too.

Context

User reported it here- 4353450-zen

Operating System

macOS

Browser

Google Chrome/Chromium

Simple, Atomic or both?

Atomic

Theme-specific issue?

No response

Other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, easy to implement

Workaround details

Try breaking up the long sentences into smaller ones with periods, and it becomes better.

Robertght commented 3 years ago

I think this is part of this one, although I don't see this specific case mentioned: https://github.com/Automattic/jetpack/issues/11794

@jeherve / @simison should we move this to Jetpack as a new issue or close in favor of the one mentioned above?

jeherve commented 3 years ago

The view on those screenshots is what we call the Carousel view; it is available regardless of the type of gallery you choose, and appears when you click on an image.

The Carousel feature is developed in the Jetpack repo, so I'll move the issue there.

jeherve commented 3 years ago

Somewhat related: #20770

benchilcote commented 3 years ago

Just adding a CSS workaround I came up with. I can't verify it is the best workaround, but worked for the user in 4353450-zen

.jp-carousel-info-footer .jp-carousel-photo-caption {
    white-space: unset;
}
madhattermattic commented 2 years ago

Semi-realted: https://wordpress.org/support/topic/carousel-show-title-instead-of-caption/

(user would like the ability to use the Title rather than Caption due to single line truncation)