Image field widgets' text data have inconsistent layout in the node edit form when there are multiple images on a node. The attached patch makes the alignment consistent and also allows the description text to wrap on to multiple lines. See the before and after screenshots.

Loosely related to #913846: Image/file field breaks after uploading two files.

CommentFileSizeAuthor
#18 Screenshot from 2021-04-19 17-39-41.png110.79 KBvikashsoni
#8 image.css_4.patch1.15 KBjessebeach
#6 image.css_3.patch1.07 KBjessebeach
#5 image.css_2.patch740 bytesjessebeach
#1 Re-ordered asterisk.png171.78 KBBevan
After.png227.16 KBBevan
Before.jpg102.63 KBBevan
image.css_.patch636 bytesBevan
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Bevan’s picture

Bevan CreditAttribution: Bevan commented
FileSize
Re-ordered asterisk.png171.78 KB

A related issue is that when a field/row is re-ordered, the asterisk appears on a new line below the widget data, as per the attached screenshot. A fix for this is probably out of scope of this issue for several reasons;

Bevan’s picture

Bevan CreditAttribution: Bevan commented

Bump! It would be nice to get this in before it's too late. The patch still applies cleanly.

effulgentsia’s picture

effulgentsia CreditAttribution: effulgentsia commented

Subscribe. Screenshots look good to me. I'll see if I can get someone proficient with CSS to review.

yched’s picture

yched CreditAttribution: yched commented
Status: Needs review » Needs work

Won't work :(
The image style used to display thumbnails is configurable as a 'widget setting' for image fields.
100px works for the current definition of the 'thumbnail' image style as defined by the default install profile, but this cannot be used as a hardcoded value in a CSS rule.

jessebeach’s picture

jessebeach CreditAttribution: jessebeach commented
Status: Needs work » Needs review
FileSize
image.css_2.patch740 bytes

In a future release of Drupal, this structure ( image + text ) should be rolled up into a class, not redefined for every instance. Nicole Sullivan calls this a media object (.media)

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hu...

I added overflow:hidden to .image-widget-data and removed the float. Changed padding to margin on the image and removed the bottom value. white-space:normal was a necessary addition by @Bevan to override a system default.

I also updated the rtl css file.

Tested in IE6 (XP), IE7/IE8 (Windows 7), FF 3.6/Safari 5/Chrome 6 (MacOSx) in both ltr and rtl.

jessebeach’s picture

jessebeach CreditAttribution: jessebeach commented
FileSize
image.css_3.patch1.07 KB

I messed up the format of the diff in #5. Patching is a little new to me :)

Reposting

Status: Needs review » Needs work

The last submitted patch, image.css_3.patch, failed testing.

jessebeach’s picture

jessebeach CreditAttribution: jessebeach commented
Status: Needs work » Needs review
FileSize
image.css_4.patch1.15 KB

Apparently I must run diff from the root of the local repo.

Status: Needs review » Needs work

The last submitted patch, image.css_4.patch, failed testing.

jessebeach’s picture

jessebeach CreditAttribution: jessebeach commented
Status: Needs work » Needs review

#8: image.css_4.patch queued for re-testing.

jessebeach’s picture

jessebeach CreditAttribution: jessebeach commented

#6: image.css_3.patch queued for re-testing.

effulgentsia’s picture

effulgentsia CreditAttribution: effulgentsia commented
Component: image system » image.module
Issue tags: +markup

Thanks! Setting component, and tagging, so the necessary maintainers find this.

jessebeach’s picture

jessebeach CreditAttribution: jessebeach commented
Assigned: Unassigned » jessebeach

Assigning this issue to myself. Not sure what the etiquette of such an action is, but I'm glad to keep track of this issue.

Bevan’s picture

Bevan CreditAttribution: Bevan commented

yched; Ah! Thanks. I had wondered that, but forgot to go and check before contributing the patch.

Jesse; There was a good reason why I used padding instead of margin and removed float:left. I can't remember exactly why, but believe it had something to do with how the field description (help text) and other columns wrap when the table is narrow and the image is wide but short, e.g. 100x10px. Sorry I don't have time to review and test right now.

jessebeach’s picture

jessebeach CreditAttribution: jessebeach commented

The overflow:hidden on .image-widget-data

div.image-widget-data {
  height: 1%;
  overflow: hidden;
}

Keeps the text from wrapping around the floated .image-preview div. The height: 1% is there for IE6, otherwise it doesn't reset the block context of .image-widget-data, which is the purpose of overflow:hidden. This works even in a narrow case, but I do encourage you to verify this :) For this reason, there's no need to put spacing (padding or margin) on the bottom of .image-preview. .image-widget-data will adjust width automatically to fill in the space left after the width of .image-preview is taken into account. There's no need to float .image-widget-data.

Bevan’s picture

Bevan CreditAttribution: Bevan commented
Title: Image field widgets inconsistently aligned » Image fields are not aligned in forms
Assigned: jessebeach » Unassigned
Issue tags: +Newbie

Okay. This needs a second review and manual test on common browsers, including IE6-9, before it can be RTBC.

dixon_’s picture

dixon_
he/him
Primary language English
Location France
CreditAttribution: dixon_ commented

The patch in #8 fixes the alignment problem in small resolutions (or in setups with large preview thumbnails). I agree with comment #16 that this patch is ok to go, but still needs test in IE6-9. I haven't been able to test in those browsers yet.

The patch still applies without offsets.

vikashsoni’s picture

vikashsoni CreditAttribution: vikashsoni as a volunteer and at Zyxware Technologies commented
Issue summary: View changes
FileSize
Screenshot from 2021-04-19 17-39-41.png110.79 KB

Applied patch #8, #6, #5 but not working sharing screenshot...