To take a guided tour you must use a compatible browser: IE8 or above, Firefox, Safari or Chrome

Image Browser Spec

Goal

Make it easier to import media onto a page by providing better previews, easier attaching of files with less steps, and make everything prettier by using the new dialog box styles. Also allow a tab for inserting images through URLs.

Mockup

Unknown macro: {mockup}

Prioritised User Stories

Title
Must Have Stories Screenshots
Insert Image
Mark wants to attach an image to his Sales Presentation page. He clicks the Insert Image button in the editor and opens the Insert Image dialog box with the Images tab selected. He clicks the Browse button and selects a file from his hard drive and clicks OK. The file is uploaded and appears in the list of alphabetised images as the selected item. He aligns the image to the centre, makes it a thumbnail.
  • A border (1px solid #ccc) is added by default to images to distinguish them from the page.
Edit Image
Kate wants to align an image to the right. She selects the image and sees a panel that appears in the editor that allows her to edit or remove the image. She selects edit and it opens up the Media Browser to the Images tab. She changes the alignment and closes the dialog box.
  • Like Google Sites but without the alignment options. See screenshot.
  • If the panel is not feasible, then show a drop down toolbar (like we have in the editor when you select a table) that shows you an Edit Image button.
Insert Image - Web Address
Kate is writing her divorce papers. She wants to link to an image of her cat that she has on her personal website. She opens the Insert Image dialog box and clicks the Web Address tab. She puts in the URL and clicks Insert.
  • Kate can align and put a border around web images.
Edit Image - Web Address
Kate wants to change the source of a Web Image. She selects the image and sees a panel that appears in the editor. She selects edit and it opens up the Media Browser to the Web Images tab. She changes the URL of the Web Image and closes the dialog box.
 
Insert drop down
Insert Menu Spec
  

Labels

Edit
insert-menu insert-menu Delete
mockup mockup Delete
specification specification Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

Comments (1)

 

  1. Mar 19

    Adam Reed says:

    I think the 'Cancel' button in the mockup should be a link so emphasis is placed...

    I think the 'Cancel' button in the mockup should be a link so emphasis is placed on 'Insert'.

Add Comment