Move HTML classes from template_preprocess_image_widget to a template

Kindly review a patch

Kindly follow a new patch

Patch #6 Working fine, Also attached image for the same.

I am working on this issue

I created a patch for this issue

@prabha, Your patch does not contain the changes from preprocess which was there in #6 comment.

Let me upload the latest patch along with Inter-diff from #12.

we can add classes directly using class attribute

1. Re #19 @prabha1997 We should leave the variable attributes in templates.

-<div{{ attributes }}>
+<div class="image-widget js-form-managed-file form-managed-file clearfix">

Then we can use attributes.classes in child templates, for example:

{% extends '@claro/content-edit/file-managed-file.html.twig' %}
{% set attributes = attributes.addClass(classes) %}

2. Patch from #14 looks good. There are more templates to change. See core/modules/image/templates/image-widget.html.twig and core/themes/claro/templates/content-edit/image-widget.html.twig. One note, div {{ there should be no spaces here.

diff --git a/core/modules/image/templates/image-widget.html.twig b/core/modules/image/templates/image-widget.html.twig
index 3a3d3da..5377968 100644
--- a/core/modules/image/templates/image-widget.html.twig
+++ b/core/modules/image/templates/image-widget.html.twig
@@ -12,7 +12,15 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes }}>
+{%
+  set classes = [
+    'image-widget',
+    'js-form-managed-file',
+    'form-managed-file',
+    'clearfix',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>

Now I noticed that we should not change the templates in the module. #22.2 is not a good idea then.

The classes should be added in a template in Classy / Stable but not in the module.

We can use classes from parent template. I am attaching patch here please review.

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.