improve the imagefield edit UI

I agree we need more consistency with others CCK fields and a clearer UI.
My proposal (see screenshot) is to:
get rid of the collapsible fieldset (reasons can be found here where I propose a clearer UI for date field)
get rid of the thumb preview through the update button (there's the form preview button that does this)
Show the alt text and title field immediatly without the need to previously choose the file (so we don't need the update button anymore) and eventually give a better description of those fields ( or let user choose, on custom content creation, if they want the title field (I don't think we can't avoid the alt text field - for usability reasons).
Always show the delete button to blank the image field on creation and delete the image on update.

Hope this was clear.

Here's the screenshot

Two things I forgot to mention:
1. In the screenshot I posted in the previous post the image text that appears in the three fields should be the custom label given by the admin (eg. if I call the image type field avatar I will see, Avatar alternate text, Avatar title etc...) this should be IMO for consistency with others field types.

2. Actually the admin help text (inserted on filed type creation) isn't displayed. Probably we could find space for it in the first field (where I wrote attach an image).

What do you think? Am I crazy? I think we need more consistency between widgets in CCK...

P.S. what if the bold CCK prefix is added to description of the image field in the module admin page?

There are several request for improving the ui. I hope to get around to them, but html and UI is not my specialty. If you can help please submit a patch.

Ok.
This is a minimal patch that:
1. get rid of the fieldset
2. add the field label just before the title and alternate text label (This is why if we get rid of the fieldset we need a way to make users understand that those fields belong to the image submission)
2. make the help text (submitted on settings page) display.

Things I haven't be able to do:

1. get rid of the update button (and feature and releated functions).
As stated before I don't think is needed since we can see a preview of the image when previewing the entire post ( and infact if I hit update the whole post is actually validated (i.e. if I hit update before filling the tilte post a warning is displayed)

2. get rid of the delete checkbox
We could have a 'delete' or 'clear' button that clear the textarea where the filename appear. This way when it's empty the image is deleted.

3. set up an option on the settings page where I can choose to display or not the title and alternate text field on the submission form. If not we can use the title of the post as img alt text and title. ( this is why it could be not clear for everybody why they have to fill those fields if they are not displAyed on the node view)

I know my patch doesn't help much to obtain this different UI but my coding skills are really poor.

Is there anyone who thinks this could be a more user friendly UI?

I attach a couple of mockups.

And here's a mockup of the preview state.

I forgot the patch!
Here it is.

I like the description extensions for the alt/title files... including the field name could be confusing on multi value fields. alternate ideas... I'd also like to see the preview positioned to the left of the additional inputs, but I was just having no luck getting the fields to fit in the page width properly.

@dodazzi, do you have any ideas?

Here is a screen cap of how I'm currently themeing these forms.

Almost completely done with CSS and overriding the theme_imagefield_edit_image_row() function in template.php

I flat-out kill the Alt field. It confuses my clients, and is left blank 90% of the time. The 10% it is used, it is used inappropriately. Besides there's already a Title tag.

I had to resort to hacking the form in a couple places, for instance, I wanted Filename: to be bold and capitalized, but the markup for this was built into the form. I also think the description for the title field should be more easily modified since the template might do more with this value than just use it for rollovers (i.e. caption)

The ability to include a proper image caption for each image would be excellent, especially for the multiple image fields.

Next step is to lose the "Update" button, and in the case of multi-image fields, replace it with an "Add image" button. All other updating can take place when the form is submitted. However, it would be a nice touch to enhance the image deletion process with some javascript/ajax.

Zach, that looks great! I'd like to keep the alt field around if possible. A better solution might be to provide an option in the widget settings rather than removing it altogether (another patch entirely, though). Can you cook up a patch for the CSS but keep the ALT field intact?

Looking at Zach screenshot I made this patch (I changed the color scheme to be more garland friendly).
I even made some polish of useless divs and applied some capitalization.

I still think that the update button doesn't behave correctly since when creating the image preview all forms are validated and error messages appears in case some required field are not filled.
So, in my opinion, we could create the image preview only when the standard preview is performed, and get rid of the update button for the moment (waiting for an ajax solution). But it's probably just me.

Anyway this is my first attempt toward a better UI.

Great module I love the latest additions .

P.S. Please note that this patch should apply only to imagefield HEAD and CSS should require some correction to work correctly on 4.7
I hope to be able to submit a patch for 4.7 later this week

Look at screenshots in the next posts

screenshot#1

screenshot#2
Image alt text and title are kept in the right even if the image is shorter

P.S. This patch need to be tested on IE Win

screenshot #3
alt text and title deactivated

I forgot to add a margin to separate mutiple previews.
Here's an updated patch

According to the screenshots, this seems beautiful...
One remark though : even if the colors are right with Garland blue (default), they will probably look out of place as soon as colors are changed in the theme color selector.

Maybe drop the colors ? :-(
(or find a way to stick to the colors used by the theme ? - don't know if there is any)

+ side note :
'#value' => t('<strong>Filename</strong>: ') . $file['filename'],
the [strong] tags should be left outside of t()'ed strings whenever possible.
'#value' => '<strong>'. t('Filename : '). '</strong>' . $file['filename'],
(maybe there are others in the module, but since this one is here, I happen to notice

Updated patch.
Digging through the color.module I haven't been able to understand if there's a way to stick our colors with the custom color theme.
So I drop the background color and changed the border color to a light grey that can match any color scheme.
Another solution could be to wrap the image preview and image details in a standard fieldset.
But this require changes to the form code and I'm not able to do that without breaking everything.
I corrected the string inside the t function.

a screenshot to taste the difference

Forgot to change image border !!! + status

Actually garland outputs a "generated" css file with color styles in files/garland (or something like that).
Maybe some of the styles there could be used ?

Quite cosmetic, though. The last screenshot seems more than OK :-)

Yo, its done, I even did the 4.7 backport.