[xwiki-devs] [VOTE][UI] WYSIWYG Image dialogs
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). 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. 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. 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"]] Notes : - for the moment using this will cause issues with titles, see : http://www.jean-vincent.org/xwiki/bin/view/Main/Image - I'm not sure that we'll be able to combine position center + text flow. 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). 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. My votes : 1) +1 2) +1 for a) 3) +1 4) +1 for d) if possible 5) +1 for b) Thanks, JV.
On Dec 4, 2008, at 4:16 PM, 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
Same questions as for the links: * filter box * how the image address field work? * how to specify custom parameters?
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). 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 using the browser resize feature but +1 too for offering the resize feature in the dialog box.
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.
+1 for b) as it's done in the mockup (except that I don't understand why there's only one width box and no height when "custom" is chosen in the combo).
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"]] Notes : - for the moment using this will cause issues with titles, see : http://www.jean-vincent.org/xwiki/bin/view/Main/Image - I'm not sure that we'll be able to combine position center + text flow.
+1
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).
Why not have a preview button and this opens a new window with the doc as it'll look like? I'm generally in favor of d) if possible (I think 4) should not be in a first version if too complex). What I don't understand is whether you plan to show the whole doc in the same dialog box preview viewport. This is why I was suggesting to open a new window to render a temporary document instead.
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). Thanks -Vincent
My votes : 1) +1 2) +1 for a) 3) +1 4) +1 for d) if possible 5) +1 for b)
Thanks, JV. _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
On Thu, Dec 4, 2008 at 4:38 PM, Vincent Massol <[email protected]> wrote:
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.
+1 for b) as it's done in the mockup (except that I don't understand why there's only one width box and no height when "custom" is chosen in the combo).
This is supposed to be explained by the sentence between the select and the input.
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).
Why not have a preview button and this opens a new window with the doc as it'll look like? I'm generally in favor of d) if possible (I think 4) should not be in a first version if too complex).
I agree that 4) d) could be developed after a first version if too complex.
What I don't understand is whether you plan to show the whole doc in the same dialog box preview viewport. This is why I was suggesting to open a new window to render a temporary document instead.
The idea here is not to take the content from the document, just to offer a quick preview of the image in the text flow. With fake content like : ____ _______ _______________ ___ ____. With a 1024x768 resolution the content part of our pages is something like 800px wide. With a 400px wide preview container we could render the image with the selected size / 2. No matter the user resolution we'd display the preview with a refined version of this rule. See a HTML mockup of this at : http://www.jean-vincent.org/xwiki/bin/view/Main/Preview?xpage=plain I'm -1 to open a preview in a new window, the idea of the preview in the mockup was to have a _quick_ idea of the result, if the user wants to see the result he just has to insert it. JV.
On Thu, Dec 4, 2008 at 4:16 PM, Jean-Vincent Drean <[email protected]> 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). 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.
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.
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"]] Notes : - for the moment using this will cause issues with titles, see : http://www.jean-vincent.org/xwiki/bin/view/Main/Image - I'm not sure that we'll be able to combine position center + text flow.
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).
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.
My votes : 1) +1 2) +1 for a) 3) +1 4) +1 for d) if possible 5) +1 for b)
Thanks, JV. _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
1) +1 2) +1 for b), sometime you dont want fit the image ratio 3) +0 4) d) would be great but I doubt we need to go that far, I would say +1 for b) unless d) is not too tricky. Anyway -1 for a), we need it IMO. 5) +1 for b) -- Thomas Mortagne
Le 4 déc. 08 à 16:40, Thomas Mortagne a écrit :
On Thu, Dec 4, 2008 at 4:16 PM, Jean-Vincent Drean <[email protected]> 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). 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.
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.
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"]] Notes : - for the moment using this will cause issues with titles, see : http://www.jean-vincent.org/xwiki/bin/view/Main/Image - I'm not sure that we'll be able to combine position center + text flow.
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).
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.
My votes : 1) +1 2) +1 for a) 3) +1 4) +1 for d) if possible 5) +1 for b)
Thanks, JV. _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
1) +1 2) +1 for b), sometime you dont want fit the image ratio 3) +0 4) d) would be great but I doubt we need to go that far, I would say +1 for b) unless d) is not too tricky. Anyway -1 for a), we need it IMO. 5) +1 for b)
1) +1 2) +1 for a) changing image ratio is bad :) 3) +1 4) +1 for b) Keep it stupid simple -0 for d) if the image is the selected image, what about the text, the skin, what about the ratio beetwen text size/img size/ layout size... 5) +1 for b) Laurent Lunati
-- Thomas Mortagne _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
On Dec 4, 2008, at 5:45 PM, Laurent Lunati wrote:
Le 4 déc. 08 à 16:40, Thomas Mortagne a écrit :
On Thu, Dec 4, 2008 at 4:16 PM, Jean-Vincent Drean <[email protected]> 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). 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.
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.
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"]] Notes : - for the moment using this will cause issues with titles, see : http://www.jean-vincent.org/xwiki/bin/view/Main/Image - I'm not sure that we'll be able to combine position center + text flow.
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).
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.
My votes : 1) +1 2) +1 for a) 3) +1 4) +1 for d) if possible 5) +1 for b)
Thanks, JV. _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
1) +1 2) +1 for b), sometime you dont want fit the image ratio 3) +0 4) d) would be great but I doubt we need to go that far, I would say +1 for b) unless d) is not too tricky. Anyway -1 for a), we need it IMO. 5) +1 for b)
1) +1 2) +1 for a) changing image ratio is bad :)
I change my vote. I'm ok for 2 a) since the user can use the browser feature if he really wants to change the ratio.
3) +1 4) +1 for b) Keep it stupid simple -0 for d) if the image is the selected image, what about the text, the skin, what about the ratio beetwen text size/img size/ layout size...
4 b) is fine with me too.
5) +1 for b)
Laurent Lunati
On Thu, Dec 4, 2008 at 5:56 PM, Vincent Massol <[email protected]> wrote: >> >>>> >>>> 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). >>>> >> 4) +1 for b) Keep it stupid simple -0 for d) if the image is the >> selected image, what about the text, the skin, what about the ratio >> beetwen text size/img size/ layout size... > > 4 b) is fine with me too. > Yes 4) b) seems better. Laurent made a good point by asking me to try my mockup with bigger sizes : http://www.jean-vincent.org/xwiki/bin/view/Main/Preview?xpage=plain We lose the context (text flow) with big images. Grr, I loved this gadget ;) JV.
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). 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 since resizing to a specific width/height (say 147px) using the mouse is not easy even in specialized applications.
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).
-0 since the user can resize the image, once it is inserted, without keeping the width/height ratio. What will happen when he edits the image? What ratio would be protected? The one before the resize or the one after the resize?
b) Allow to edit both image width and height.
+1 provided the width/height ratio is locked by default (as it is in all specialized applications).
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"]] Notes : - for the moment using this will cause issues with titles, see : http://www.jean-vincent.org/xwiki/bin/view/Main/Image - I'm not sure that we'll be able to combine position center + text flow.
+1
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 b)
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)
My votes : 1) +1 2) +1 for a) 3) +1 4) +1 for d) if possible 5) +1 for b)
Thanks, JV. _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
Hi, On Fri, Dec 5, 2008 at 9:22 AM, Marius Dumitru Florea < [email protected]> wrote:
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). 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 since resizing to a specific width/height (say 147px) using the mouse is not easy even in specialized applications.
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).
-0 since the user can resize the image, once it is inserted, without keeping the width/height ratio. What will happen when he edits the image? What ratio would be protected? The one before the resize or the one after the resize?
b) Allow to edit both image width and height.
+1 provided the width/height ratio is locked by default (as it is in all specialized applications).
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"]] Notes : - for the moment using this will cause issues with titles, see : http://www.jean-vincent.org/xwiki/bin/view/Main/Image - I'm not sure that we'll be able to combine position center + text flow.
+1
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 b)
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)
My votes : 1) +1 2) +1 for a) 3) +1 4) +1 for d) if possible 5) +1 for b)
Thanks, JV. _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
1) +1, offering 3 standard image widths + "set custom width" seems good to me. 2) +1 for letting the user edit only the image width (thus keeping the ratio). The user will be able to break the ratio using his mouse back in edit mode (which is bad but AFAIU we cannot prevent this, can we?). 3) +1 4) +1 for b) , an image placeholder seems good enough and is easy to understand 5) +1 for b) Guillaume -- Guillaume Lerouge Product Manager - XWiki Skype ID : wikibc http://blog.xwiki.com/
Hello, Guillaume Lerouge a écrit :
Hi,
On Fri, Dec 5, 2008 at 9:22 AM, Marius Dumitru Florea < [email protected]> wrote:
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). 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 since resizing to a specific width/height (say 147px) using the mouse is not easy even in specialized applications.
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).
-0 since the user can resize the image, once it is inserted, without keeping the width/height ratio. What will happen when he edits the image? What ratio would be protected? The one before the resize or the one after the resize?
b) Allow to edit both image width and height.
+1 provided the width/height ratio is locked by default (as it is in all specialized applications).
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"]] Notes : - for the moment using this will cause issues with titles, see : http://www.jean-vincent.org/xwiki/bin/view/Main/Image - I'm not sure that we'll be able to combine position center + text flow.
+1
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 b)
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)
My votes : 1) +1 2) +1 for a) 3) +1 4) +1 for d) if possible 5) +1 for b)
Thanks, JV. _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
1) +1, offering 3 standard image widths + "set custom width" seems good to me. 2) +1 for letting the user edit only the image width (thus keeping the ratio). The user will be able to break the ratio using his mouse back in edit mode (which is bad but AFAIU we cannot prevent this, can we?). 3) +1 4) +1 for b) , an image placeholder seems good enough and is easy to understand 5) +1 for b)
Guillaume
1) +1 (I think that the users will choose a default size for almost every images) 2) b) 3) +1 (+ I don't think that "center + text flow" is very important - we should not spend too much time on it if it's difficult) 4) b) (i agree with Guillaume) 5) b) Thomas
On Fri, Dec 5, 2008 at 9:22 AM, Marius Dumitru Florea <[email protected]> wrote:
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).
-0 since the user can resize the image, once it is inserted, without keeping the width/height ratio. What will happen when he edits the image? What ratio would be protected? The one before the resize or the one after the resize?
Good point, since the user can break the ratio with the image resizing builtin feature we need to display both width and height, I've modified the mockup with Sergiu's suggestion : http://dev.xwiki.org/xwiki/bin/view/Design/NewWysiwygEditorInterface#HImage
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/
On Fri, Dec 5, 2008 at 10:54 AM, Sergiu Dumitriu <[email protected]> wrote:
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.
What I had in mind is something we see in thumbnails, we make the image fit in a 320x320px square, if the height of the image is bigger than its width then the width will be 320px, but it'll be inferior otherwise. I think it's the only way to guaranty that the image will be "Small", if we just set the width to 320px then a 320x2000px image won't be small. WDYT ?
- 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".
Yep, that's why I did it that way :)
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).
The first or the second ? did you meant b) here ?
Votes for external image insertion :
As with the link wizard, when uploading a new image, why return to step 1 and not 2?
I've updated this mockup too.
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?
IMO: display images only. validate filetype before upload.
In the "breadcrumb" on the second step, what happens when the text is too long? Implementers, make sure you test this.
IMO: overflow hidden + text-align right. JV.
Jean-Vincent Drean wrote:
On Fri, Dec 5, 2008 at 10:54 AM, Sergiu Dumitriu <[email protected]> wrote:
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.
What I had in mind is something we see in thumbnails, we make the image fit in a 320x320px square, if the height of the image is bigger than its width then the width will be 320px, but it'll be inferior otherwise.
I guess you meant it the other way around.
I think it's the only way to guaranty that the image will be "Small", if we just set the width to 320px then a 320x2000px image won't be small. WDYT ?
Yes, this looks good. It will take a bit longer, since the image has to be loaded and its dimensions computed in order to decide which is larger, the width or the height. But I still don't like the text. Can't we find a better one?
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).
The first or the second ? did you meant b) here ?
Yes, b), but if you look carefully, you might notice there is no b) in the text. -- Sergiu Dumitriu http://purl.org/net/sergiu/
participants (8)
-
Guillaume Lerouge -
Jean-Vincent Drean -
Laurent Lunati -
Marius Dumitru Florea -
Sergiu Dumitriu -
Thomas Eveilleau -
Thomas Mortagne -
Vincent Massol