Page MenuHomePhabricator

As an editor of Wikipedia on iOS I would like to be able to easily insert media into an article
Closed, ResolvedPublic

Description

Why are we doing this?

Inserting media on a mobile phone opens up a new and easier way for users to select media and upload it to Wikipedia and Commons, we would like to explore ways to make inserting rich media via the mobile editing interface.

User story

As an editor of Wikipedia on iOS I would like to be able to easily insert media into an article

User flows


Mocks

Toolbar views
Media in toolbarMedia in the toolbar - disabled
Zeplin: https://zpl.io/aRxMqqNZeplin: https://zpl.io/agQ8nnN
Insert flow
Insert media viewLong press on imageSelected imageSearch - keyboardSearch - Search term enteredSearch - Keyboard dismissed
Zeplin: https://zpl.io/VkEZw4gZeplin: https://zpl.io/2Go69D3Zeplin: https://zpl.io/Vx1DRAgZeplin: https://zpl.io/bPv5XELZeplin: https://zpl.io/VOmjKvPZeplin: https://zpl.io/b636jOP
Media settings (last step for both previous flows)
In-article media settingsAdvanced settingsIn-article media settings - filled outInserted file
Zeplin: https://zpl.io/adPLzoRZeplin: https://zpl.io/bPv5x3xZeplin: https://zpl.io/aBq6R30Zeplin: https://zpl.io/V1w6OL4

Notes

  • Consider what the 'defaults' should be (with image size)
  • Consider utilizing the CC0 structured caption as a suggestion for the caption in media settings
  • No insertion within anywhere that already has Wikisyntax associated with it

Event Timeline

JMinor triaged this task as Medium priority.Nov 14 2018, 12:31 AM
cmadeo updated the task description. (Show Details)Dec 3 2018, 8:45 PM
JMinor added a subscriber: JMinor.Mar 26 2019, 6:51 PM

Note on current scope: Upload flow will not be supported in initial version

JMinor renamed this task from Support rich 'insertions' in the editing interface: As an editor of Wikipedia on iOS I would like to be able to easily insert media into an article to As an editor of Wikipedia on iOS I would like to be able to easily insert media into an article.Apr 4 2019, 7:27 PM
JMinor added a comment.EditedApr 4 2019, 7:38 PM
  • Verify 6.3 insert menu elements (what is actually in this version of insert -- just media and comment, or should table, template and other inserts be included?
  • Transition from insert menu to fullscreen image selection is that a modal push, expand or slide, the disclosure indicates a stack push, but close buttons are modal.
  • Search behaviors: does it do prefix search, what fields in commons are search (title, description, captions?)? No results UI?

Additional design question -

In Insert flow, Search - Keyboard dismissed
https://app.zeplin.io/project/57a120ce9787dcf26230651f/screen/5bfc13eeaf23577ecb73d5b9

It looks like the height of the bottom view increased (compared to https://app.zeplin.io/project/57a120ce9787dcf26230651f/screen/5bfc13efd0bcdb4d8fc5710e) - does that mean that the user can drag the bottom view to reveal more list items?

JMinor added a comment.Apr 9 2019, 6:18 PM

Per our meeting, we'll punt on the insert menu until we have more insert options. Lets just go from the toolbar to the full screen media insert flow in 6.3

cmadeo added a comment.EditedApr 9 2019, 6:23 PM

Action items:

  • Open from toolbar
  • Consider what the 'defaults' should be
  • Utilizing the CC0 structured caption
  • No insertion within anywhere that already has Wikisyntax associated with it
  • < back to search vs. cancel
cmadeo updated the task description. (Show Details)Apr 9 2019, 7:33 PM
cmadeo updated the task description. (Show Details)
cmadeo updated the task description. (Show Details)
cmadeo updated the task description. (Show Details)Apr 9 2019, 7:48 PM
cmadeo updated the task description. (Show Details)

It's a bit confusing when the insert media button in the toolbar is disabled. Could the toolbar button always be enabled and just put the image alone on a newline if it's inserted somewhere in the middle of a line with text?

@JoeWalsh I've been thinking this too while playing around with it, I like your solution.

cmadeo added a comment.May 1 2019, 9:07 PM

@NHarateh_WMF squee! This is looking so awesome! Just a few small tweaks.

Interaction

  • Would it be possible to have the toolbar icon be enabled as long as the cursor is not placed within other syntax (eg. formatting, link, template) and break to a new line if it's inserted somewhere in the middle of a line?
  • Currently the blue 'information' icon to the right of the selected image (https://zpl.io/bPv5XEL) has a very small tap area, can we open the Commons item web view if a user taps anywhere in the information overlay?

Visual tweaks

  • Could the blue 'information' icon to the right of the selected image (https://zpl.io/bPv5XEL) above be scaled down ~1pt so that it matches the same height as the licensing icons?
  • Would it be possible to allow image thumbnails to expand to the width or height of the thumbnail area (105pt x 105pt) currently it looks like everything is getting cropped to the same height (https://zpl.io/Vx1DRAg)
  • In the media settings view (https://zpl.io/adPLzoR)
    • Would it be possible to have the the text area placeholder text flush with the rest of the text on the screen?
    • Design bug on my part! Can we have 'Upload image', 'Caption' and 'Alternative text' all be 14pt?
    • Would it be possible to have the image title (Yellow leaves in Brooklyn) which is currently in blue be a link to the Commons item page?
    • In 'Advanced settings' could we add just a touch more breathing room to the height of the list items? 1pt above and 1pt below the text.

Bugs

  • After inserting an image the cursor seems to disappear for me, it still 'works' but I can't see it

@NHarateh_WMF unfortunately whenever I tap on the insert media icon on 6.3.0 (1620) the app crashes :(

@NHarateh_WMF thanks for working on this! It's looking great! I have just two small tweaks:

  • When an image has been selected (https://zpl.io/Vx1DRAg) would it be possible to have the blue info icon link to the Commons page (similar to more information off of the long press)
  • After a user has entered text on the media settings page (https://zpl.io/aBq6R30) can we show the 'x' to clear the line if they have the cursor focus still set to that line?

@NHarateh_WMF thanks for the updates! Both of these changes are working well, but the 'clear line' indicator appears to be floating above the midline (x hight) of the text. Any way we could make it centered with the text vertically?

cmadeo added a project: Product-QA.

Looking great! Thanks for the updates and awesome work @NHarateh_WMF!

ABorbaWMF added a subscriber: ABorbaWMF.

Working for me on 6.3.0 (1638)

Trie multiple file types on Test wiki. Working well

JMinor closed this task as Resolved.Jun 28 2019, 4:42 PM
JMinor awarded a token.