Jean-Vincent Drean wrote:
Hi XWikiers,
I've made mockups for the WYSIWYG Image dialogs, you can see them at :
http://dev.xwiki.org/xwiki/bin/view/Design/NewWysiwygEditorInterface#HImage
Votes for internal image insertion :
1) Image size
------------------
In the mockup you can see a dropdown allowing to set some predefined
sizes to the image (inspired by google docs).
I don't like the text "up to 320 pixels wide". What does "up to"
mean?
It suggests a range, but it means exactly 320.
We could rely on the browser's image resizing
feature for this and
drop this setting. I'm in favor of keeping it (see my votes below)
since it allow to keep size consistency between multiple images
(screenshots for example) in the same page.
Also, IE and FF have this resizing feature but we can't assume that
it'll be the same for all the browsers we will target in the future.
+1 for keeping the setting, since drag'n'drop resizing is very
approximative, so if I want a bunch of 320px wide photos, I'd spend a
lot of time to get almost equal photos.
2) Image size option
---------------------------
a) Allow to edit only the image width (guarantee that the image
width/height ratio won't be affected by the resize).
b) Allow to edit both image width and height.
Both; I like the way GIMP does it, there's a link (as in chain, not as
in hyperlink) between the two dimensions, which keeps the two dimensions
proportional, so if I edit the height, the width will be updated to
preserve the same aspect ration. If I click that link (unchain it), I
can edit each dimension independently.
3) Text flow
---------------
I think it's a must have but since it'll rely on a touchy parameter I
prefer that we vote for it.
Generated wiki syntax example : [[image:awsome.jpg||style="float:right"]]
+1.
Notes :
- for the moment using this will cause issues with titles, see :
http://www.jean-vincent.org/xwiki/bin/view/Main/Image
That's a skin bug, not a functionality problem.
- I'm not sure that we'll be able to combine
position center + text flow.
As you did in screenshot "External image", when position is Center,
disable "wrap".
4) Preview
--------------
I've put an image preview in the mockup, we've multiple choices:
a) Drop it since it makes the dialog heavy.
a) Keep it stupid simple, the image is represented by a placeholder
and the 6 possible states are "prerecorded" (could be images).
d) Make it an advanced preview, the image is the selected image, the
preview takes the size of the image into account (by calculating what
the selected size would look like compared to the page content in a
predefined resolution, like 1024x768).
+1 for a) (the first or the second).
Votes for external image insertion :
5) Number of wizard steps
-----------------------------------
Like for the link insertion dialogs we have a major difference between
internal and external stuff. We could :
a) Have 2 steps to be consistent with the internal insertion. First
step : image URL, second step : image options.
b) Ease the edit work and have all the settings in the same screen,
this is how I've presented it in the mockup.
+1 for b)
Other comments:
As with the link wizard, when uploading a new image, why return to step
1 and not 2?
When selecting a file, do we make sure only images are listed? When
uploading a new file, do we check if it has an accepted image extension,
or do we accept all files?
In the "breadcrumb" on the second step, what happens when the text is
too long? Implementers, make sure you test this.
In the Uploading... interface, I get bored if I must wait for the image
to upload while not being able to do anything else. Can't this process
be sent to the background somehow?
--
Sergiu Dumitriu
http://purl.org/net/sergiu/