Designs for adding media to a page using VisualEditor.
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.
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 designEdit
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.
- 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)
- Edit the alt text
- Custom size
- Custom layout on the page
User has an image
User has an article that needs an image
Previous versions here.
1. A user can Upload Media or Search commons. They can easily see aspect ratios and more of the title.
2. When selecting an image they can see details like license, author, size and description.
3. Caption and style
4. Custom style options
Easier uploading, editing in context
6. A user can Upload Media or Search commons.
7. If a user clicks upload, they can go through the upload wizard in context.
8. As soon as they are finished uploading or choosing, the image is placed in the article. The user can edit the image directly in context. They can enter or edit the caption, use the arrow control to change to a custom size, or click the cog icon for more options.
9. The options show layout presets, replace image, and advanced options. Clicking advanced will take them to the dialogue in image 5.