Problem/Motivation

#3096059: Inconsistent vertical tabs styling in image widget crop widget with Claro theme revealed an issue of Claro's image and file widget implementation: when a contrib module adds additional form elements to the image or file widgets, those elements will be displayed in the row of the primary elements (where we want to display only the file name and the remove button, or the upload input and the upload button).

I also noticed that the structure of the image widget template is very similar to the structure of the file widget's template, and since the 'contrib addition' issue can happen with the file widget as well, it would be a good idea to use the same template for the file and for the image widget and fix the described case for both.

Steps to reproduce

  1. Install Drupal with Standard profile
  2. Install Claro and set it as admin theme. Make sure that the admin theme is used for node add/edit page.
  3. Install ImageWidgetCrop (image_widget_crop) module.
  4. Add at least one crop type at /admin/config/media/crop.
  5. Create at least one image style that uses the manual crop effect. On the effect config page, select the recently added crop type. (You can just update one of the existing image style except Crop preview.)

  6. Change the article's form display and make image field use the ImageWidget Crop widget at /admin/structure/types/manage/article/form-display:

    1. Show default crop area
    2. Warn the user if the crop is used more than once.
    3. Preview image style: Large.
    4. Crop preview image style: Crop thumbnail
    5. At Crop Type, select at lease one crop type.
  7. Visit /node/add/article, and add an image to the Image field.

Seven:

Seven theme with collapsed image crop widget Seven theme with expanded image crop widget

Claro (without fix):

Claro theme with collapsed image crop widget, without patch Claro theme with expanded image crop widget, without patch

Proposed resolution

Display additional widget elements after the core-provided ones.

Claro theme with collapsed image crop widget, expected output Claro theme with expanded image crop widget, expected output

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#9 interdiff.txt5.18 KBlauriii
#5 Claro--crop-expanded-after-patch.png619.22 KBvinodhini.e
#5 Claro--crop-expanded-before-patch.png242.42 KBvinodhini.e
#5 Claro--crop-collapsed-after-patch.png130.77 KBvinodhini.e
#5 Claro--crop-collapsed-before-patch.png131.09 KBvinodhini.e
#4 Claro--crop-expanded--after.png659.06 KBhuzooka
#4 Claro--crop-collapsed--after.png413.21 KBhuzooka
#4 Claro--crop-expanded--before.png548.22 KBhuzooka
#4 Claro--crop-collapsed--before.png394.6 KBhuzooka
#4 Seven--crop-expanded.png546.28 KBhuzooka
#4 Seven--crop-collapsed.png370.22 KBhuzooka
#3 claro-image_file_dry_and_contrib_friendly-3096241-3.patch14.33 KBhuzooka

Comments

huzooka created an issue. See original summary.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Issue summary: View changes
huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Assigned: huzooka » Unassigned
Status: Active » Needs review
StatusFileSize
new claro-image_file_dry_and_contrib_friendly-3096241-3.patch14.33 KB
huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Issue summary: View changes
StatusFileSize
new Seven--crop-collapsed.png370.22 KB
new Seven--crop-expanded.png546.28 KB
new Claro--crop-collapsed--before.png394.6 KB
new Claro--crop-expanded--before.png548.22 KB
new Claro--crop-collapsed--after.png413.21 KB
new Claro--crop-expanded--after.png659.06 KB
vinodhini.e’s picture

vinodhini.e commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Claro--crop-collapsed-before-patch.png131.09 KB
new Claro--crop-collapsed-after-patch.png130.77 KB
new Claro--crop-expanded-before-patch.png242.42 KB
new Claro--crop-expanded-after-patch.png619.22 KB

@huzooka, I have applied patch #3, It's working for me.
I am attaching a screenshot before and after applying a patch. Thank You!

  • lauriii committed 65f5c4c on 9.0.x 
    Issue #3096241 by huzooka, Vinodhini.E: Refactor image and file field...

  • lauriii committed dea7e7d on 8.9.x 
    Issue #3096241 by huzooka, Vinodhini.E: Refactor image and file field...

  • lauriii committed e12cee7 on 8.8.x 
    Issue #3096241 by huzooka, Vinodhini.E: Refactor image and file field...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Version: 8.9.x-dev » 8.8.x-dev
Status: Reviewed & tested by the community » Fixed
StatusFileSize
new interdiff.txt5.18 KB

Opened #3105015: Move HTML classes from template_preprocess_image_widget to a template while reviewing this. This should allow us to remove the .removeClass('clearfix') call from the template.

I made some improvements to the documentation and removed two unused local variables. Interdiff attached.

Committed 65f5c4c and pushed to 9.0.x, 8.9.x and 8.8.x. Thanks!

riazsaid15’s picture

riazsaid15 commented
riazsaid15’s picture

riazsaid15 commented

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.