Page MenuHomePhabricator

Fix multiline image caption inside Wikipedia preview gallery
Closed, ResolvedPublic

Description

Problem

Wikipedia articles use images which are of varying dimensions. Many of these images are stored on commons along with their meta information such as author, caption, tags, etc.

Wikipedia preview gallery does show these images along with their caption and attribution information. Our current design does a good job of presenting this information, however, it fails to accommodate cases where an image has multiline caption or attribution information. Therefore, this ticket is aimed to address long multiline captions along with attribution.

Here is the video of the problem.

Design Request

Provide the updated mockups to present the images caption and attribution in best possible way.

Design Details

  • Footer contains attribution related information & image view area remains above it.
  • If a caption is less than 4 lines long then show the entire caption. If a caption is longer than 4 lines then present it in 3 lines ending with ellipses and show the rounded rectangle which can be tapped to read the remaining part of it.
  • At max, overlay the caption till the middle point of the screen and enable a scroll if there is still more caption to show.
Gesture Details
  • Allow tap to expand the caption when a rounded rectangle appears.
  • Allow tap to bring back the caption to its default when it's expanded.
  • Allow scrolling when there is more caption to show and overlay has reached its maximum height.
  • Disable back/forward buttons when the caption is expanded.
Zeplin

https://app.zeplin.io/project/5edf645eef92dfb2dc2f8ce8/dashboard?seid=5f9036a60352528a200de2d6

Event Timeline

Based on our discussing during daily on 21.10.20 - It's not easy to know the number of lines available to a caption beforehand, so we would see how it works during the development part, same goes for ending multiline caption with ellipsis. For now, moving the ticket to ready for dev and would update the description as required.

SGautam_WMF removed a project: Design.

https://github.com/wikimedia/wikipedia-preview/pull/85

Based on our discussing during daily on 21.10.20 - It's not easy to know the number of lines available to a caption beforehand, so we would see how it works during the development part, same goes for ending multiline caption with ellipsis.

@SGautam_WMF had an idea for estimating number of lines, but the ellipsis seems to be one to consider alternative for. Feel free to play with branch T262371-multiline-caption and let's sync next week.

@eamedina Thanks for the update, let's find sometime today/tomorrow to synch on it.

@eamedina as discussed during the call, sharing some other observations as well.

Hidden scroll
  • A hidden scroll still exists, I don't think we need it anymore as we are providing other interactions to view the caption.
Next/Back arrow
  • Next/Back arrows are still active, we can disable them while caption is expanded active.
Stick chevron icon
  • Can we stick the chevron icon while a caption is expanded? Also, show a scrollbar when there is more content to it.

@SGautam_WMF thanks for taking the time of writing the feedback with nice GIFs man, that's spot on. I've updated the T262371-multiline-caption branch to address these.

@eamedina I did have a look at updated branch, here are some more observations.

  • Did we change the gallery background color? For instance the attribution footer has background-color set to #222 whereas we want it to be #202122. For consistency, let's make the gallery's entire background color to #202122.
  • I am taking back one of my points about disabling next/back arrows as we have swipe right/left gestures also enabled so users can still change the image. Sorry for this, let's roll back the changes and allow interaction with right/left arrows.
  • Close the caption when a user returns to the image. As of now it remains open when you come back to the image.

@SGautam_WMF got it, the branch is now updated with latest request 👍

Thanks @eamedina do you want to have a call sometime today or tomorrow to discuss all the changes once again? We can also discuss T262373.

SBisson added a subscriber: SBisson.

The PR is merged

Jpita added a subscriber: Jpita.

I've noticed something annoying to my eye: when the caption goes up, the animation is fine. when it goes down, the animation order is:
1-turn the arrow into a rectangle
2-shrink the text area

it makes it a bit weird, like clunky.
should I create another "improvement" task or is this a simple fix?

This comment was removed by Jpita.

I've noticed something annoying to my eye: when the caption goes up, the animation is fine. when it goes down, the animation order is:
1-turn the arrow into a rectangle
2-shrink the text area

it makes it a bit weird, like clunky.
should I create another "improvement" task or is this a simple fix?

If @SGautam_WMF or @AMuigai want it addressed right away let's move it back to dev, otherwise a new task would be best.

@Jpita could you help me understand what do you mean it looks a bit weird? Is it about the order? like shrinking the text first and then turning the arrow into a rectangle?

@Jpita could you help me understand what do you mean it looks a bit weird? Is it about the order? like shrinking the text first and then turning the arrow into a rectangle?

sorry, was trying to add a gif but had some issues and totally forgot to add a video

@Jpita thanks for sharing it. In my opinion, we can open a new ticket for refinement purposes.