VisualEditor/Design/Media

Designs for adding media to a page using VisualEditor.

Existing workflow

edit

Wikitext

edit

When editing a page in wikitext, users often open another tab to Commons to either search for an image or upload their own.

Search - The user can simply copy the filename into the wikitext editor, or click "Use this image" which gives them a formatted thumbnail.

Upload - After they finish the upload, the user gets a preformatted thumbnail that uses the image's description on commons as the caption for the article.

VisualEditor

edit

When editing a page in VE, a user can click the media icon in the insert toolbar to search for images on commons. The search is populated with the title of the article, giving the user quick access to relevant images. Though if a user is looking for a specific image, it is difficult to see the aspect ratio or the full title. There is currently no way to upload their own image from this dialogue.

Goal for updates to design

edit

Allow users to create well-illustrated pages by helping them to quickly and easily find an image, describe it, and place it appropriately on the page.

Priority features

edit
  • Find media on commons
  • (Future) Upload their own media
  • Enter a caption
  • Choose from preset layouts on the page - designated by their local wiki
  • Replace an image (keeping caption + layout intact)

Advanced Features

edit
  • Edit the alt text
  • Custom size
  • Custom layout on the page
  • Frame/Frameless/basic/border...

Design workflow

edit

Design mockups

edit

Dialogue version

edit

Previous versions here.

Future version

edit

Easier uploading, editing in context