Page MenuHomePhabricator

Re-position an image on a story page
Open, MediumPublic

Assigned To
Authored By
AMuigai
Nov 30 2021, 9:21 PM
Referenced Files
F35519005: zoom-out.png
Sep 13 2022, 10:29 AM
F35519003: zoom-in 200%.png
Sep 13 2022, 10:29 AM
F35519004: zoom-in 150%.png
Sep 13 2022, 10:29 AM
F35519002: before zoom.png
Sep 13 2022, 10:29 AM
F35518992: Scroll left.png
Sep 13 2022, 10:29 AM
F35518993: Scroll right.png
Sep 13 2022, 10:29 AM
F35518981: Gesture on an image.png
Sep 13 2022, 10:14 AM
F35013711: 7.png
Mar 21 2022, 9:04 AM
Tokens
"Love" token, awarded by Bennylin.

Description

Description/User story

As a creator
I would like to re-position the story image accordingly,
so that the reader can appreciate the context of the image together with the message in the text.

As a reader
I would like to view a story image,
so that I can understand the message in the text together with the image.

Design details
Gesture discovery
Gesture on an image.png (780×360 px, 341 KB)

Story creators can directly perform gestures on an image available on a story page.

Gesture details

Scroll

Scroll rightScroll left
Scroll right.png (780×360 px, 287 KB)
Scroll left.png (780×360 px, 241 KB)
  • Story creators can scroll image to move continuously through it.
  • Preserve the state of story image when users are no longer applying gesture on it.
  • Allow scrolling until there is no more image to show in that direction.
  • Do nothing when there is no more image to show and editors are still trying to scroll an image.

Double taps

No zoomZoom-in@150%
before zoom.png (780×360 px, 340 KB)
zoom-in 150%.png (780×360 px, 339 KB)
Zoom-in@200%Zoom-out
zoom-in 200%.png (780×360 px, 287 KB)
zoom-out.png (780×360 px, 340 KB)
  • Allow two quick taps to zoom into and out of image.
  • As a starting point, we can consider following zoom-in levels 150%, 200%. Zoom out of it when creators taps after reaching the maximum zoom-in level.
  • Preserve the state of story image when users are no longer applying gesture on it.

Design file

Other details
  • Do not move the view in image thumbnail in realtime while users reposition an image.
  • Update image thumbnail view when user is no longer applying gestures on a story image.
  • As of now we can start with above proposed gestures and add more based on their usefulness for story editors.
  • We will address how users will get to know that they can apply gestures on the images in a separate task.
  • Text box and image license remain as it is while editors are applying gestures on an image.
Acceptance Criteria
  1. Able to move the image UP, DOWN, LEFT & RIGHT
  2. Viewing the image after re-positioning
Test Scenarios
  1. Verify that users can pan images left and right within the border of the image.
  2. Verify that at the border of the image, the user cannot pan the image any more.
  3. Check for some indication/information to the user that the image can be panned.
  4. Browser compatibility testing.
Open questions
  1. Would the view in the image thumbnail at the bottom of the page also change real-time as the user repositions the image?
  2. Will the user be able to pinch or expand the images?
  3. There should be some text to inform the user they can take this action.

Event Timeline

SGautam_WMF updated the task description. (Show Details)
SGautam_WMF updated the task description. (Show Details)
AMuigai renamed this task from Support image editing in the Wikistories prototype to Support basic image editing in the Wikistories prototype.Jan 13 2022, 11:56 AM
AMuigai updated the task description. (Show Details)
AMuigai edited projects, added Wikistories; removed Wikistories (Prototype).
SBisson renamed this task from Support basic image editing in the Wikistories prototype to Image re-centering.Jan 28 2022, 6:38 PM
SBisson renamed this task from Image re-centering to Re-center a story image.Feb 2 2022, 8:28 PM
SGautam_WMF renamed this task from Re-center a story image to Add different gestures to story page image. .Mar 21 2022, 9:01 AM
SGautam_WMF updated the task description. (Show Details)
SGautam_WMF updated the task description. (Show Details)
SGautam_WMF renamed this task from Add different gestures to story page image. to Re-position image on a story page.Mar 23 2022, 5:55 AM
SGautam_WMF renamed this task from Re-position image on a story page to Re-position an image on a story page.
SGautam_WMF updated the task description. (Show Details)
SBisson added a subscriber: SBisson.

This is a nice feature but we need to de-prioritize it for now so we can get other work in ahead of performance and security reviews.

eamedina added a subscriber: eamedina.
SBisson edited projects, added Wikistories; removed Wikistories (MVP).
SBisson edited projects, added Inuka-Team; removed Inuka-Team (Kanban).
SBisson edited projects, added Wikistories (R2); removed Wikistories.

@SBisson @eamedina apologies for not sharing this update earlier, as we did discussed during our daily call. I think we can start to experiment with following gestures in parallel to figuring out designs about how editors will use them.

  • Scroll to move an image to its left/right/up/down direction until it reaches to the edge of a screen.
  • Double taps to toggle between different zoom levels.

As a starting point, we can consider following zoom levels - 100%, 150%, 200%. We can refine these values to see what works well for our use case.

Change 833009 had a related patch set uploaded (by Huei Tan; author: Huei Tan):

[mediawiki/extensions/Wikistories@master] Re-position image on the story builder feature

https://gerrit.wikimedia.org/r/833009

Change 855056 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] POC: Image component

https://gerrit.wikimedia.org/r/855056