Hi @schoenbaechler

Respects original image aspect ratio (similar to new image tagging UI)

Not sure if you'd like it to have a minimum height of the image, and here are some examples of the current implementation.

The ratio of the image is: 1.77 (16:9)

Thanks @cooltey, looks clean already... 😳 In regards to:

Not sure if you'd like it to have a minimum height of the image (...)

Ideally, images should not be restricted in height. They should stretch to full viewport width and “organically” push down content depending on the image’s height. Details in T240196:

• Image cropping
  • The concept respects the variety of image formats on Commons.
  • The idea is to keep as much of the image as possible, landscape stays landscape – portrait stays portrait.
  • Images are not cropped, should be fully visible from the start and are zoomable.

Let me know if you need more infos...

Hi @schoenbaechler

I've tried to make the image "fit screen width" and "wrap to its height", but unfortunately, the image library we've been using now does not support that. (Please see here: https://frescolib.org/docs/using-simpledraweeview.html)

The best way we can do might be setting a fixed height, for example, 300dp for portrait and 200dp for landscape and without any scaleType attributes (Please see: https://developer.android.com/reference/android/widget/ImageView.ScaleType).

Here are the screenshots:

Not sure if you are okay with this, but it looks good to me.

note: might have a solution for the wrap_content, but it does cause some unexpected behaviors after image loaded. (https://stackoverflow.com/a/34075281/4545041)

Thanks @cooltey. Your proposed solution for article descriptions is perfectly fine, since the article text is the center of the task, not the image.

In regards to image captions though, images are the center of the task, that’s why the designs for image captions differ on Zeplin. Images should be completely visible from the start and I’m fearing that the zoom experience is negatively affected with your proposed solution to apply a crop:

I’m having the same behavior in mind as defined for image tags. Check out the red square on the images below. Its dimensions are defined by the device’s current width, but the canvas itself stays the same, regardless of a portrait or landscape image.

Of course, the red background is only used to illustrate the canvas. In reality, this would look like this:

Is this solution feasible for handling images in the captions and tags task (T240196)? If it’s really not possible, this would have substantial implications on both UI designs.

Hi @schoenbaechler

Is this solution feasible for handling images in the captions and tags task (T240196)? If it’s really not possible, this would have substantial implications on both UI designs.

It is possible when to have a fixed image height set.

Here are the examples of setting the image height as 300dp.

If we set it to 400dp, it would have too much empty space on the top and bottom of the images.

Great job implementing @cooltey & @Dbrant 👏. Zooming is incredibly helpful, especially when adding image captions. I only found a few, minor things to optimize:

01) Adapt this to 24sp with 32sp line height (100%). Ideally, the font size here adapts to the global font-size setting (as for articles). Can we do that?

02) Use paper_color / color_group_50 for background in feed UI (also in image caption UI)

03) Increase side indicator’s width to 4dp (also in image caption UI)

04) Some changes in hierarchy / information architecture need to be applied.

• Move highlighted caption to the top
• Change style of file name and move it below image caption

Implementation	vs	Design

Adapt this to 24sp with 32sp line height (100%)

👍🏻

Ideally, the font size here adapts to the global font-size setting (as for articles). Can we do that?

We cannot :(

Use paper_color / color_group_50 for background in feed UI (also in image caption UI)

👍🏼

Increase side indicator’s width to 4dp (also in image caption UI)

👍🏽

• Move highlighted caption to the top
• Change style of file name and move it below image caption

👍🏾

You nailed it @Dbrant! Damn, it feels so clean now 😍Moving it to QA signoff...

Looks good to me on 2.7.50309-alpha-2020-02-12