[Code Review] wide image within article template a reusable component/class

This looks good. Tested this and it works exactly like expected.

At some point I want to add utility classes like md:pull-1 and lg:w-12 etc. But we can look into refactoring this at that point.

+1 RTBC!

Could someone reupload the patch so that we can get the CI to run?

@kostyashupenko's patch from #2 is attached.

The previous patch does not apply. Re-rolled patch from #2 attached.

+++ b/core/themes/olivero/olivero.theme
@@ -338,6 +338,10 @@ function olivero_preprocess_field(&$variables) {
+  if ($variables['field_name'] == 'field_image' && $variables['entity_type'] == 'node' && $variables['element']['#bundle'] == 'article' && $variables['element']['#view_mode'] == 'full') {

I'm wondering if we could improve this part. What if I wanted to use this on something else than article, or field with another name than field_image?

Re-rolled patch.

We can add wide-image class to the image field type.

#12 looks good. Patch applies cleanly, passed CI, and does what it needs to.

- Moves & updates css from 'css/components/field-image' to 'css/components/wide-image'
- Updates libraries.yml with new CSS file
- Adds 'wide-image' class to fields when field is of type 'image' and #view_mode is 'full'

Screenshot attached, moving to RTBC.

Tugboat preview for #12: https://3173008-wide-image-5gm4kfqqwn2txfrqlr8a2eubfiq6bnsh.tugboat.qa/

+1 on RTBC

Restoring status after HEAD was broken.

+++ b/core/themes/olivero/olivero.theme
@@ -345,6 +345,10 @@ function olivero_preprocess_field(&$variables) {
+  if ($variables['field_type'] == 'image' && $variables['element']['#view_mode'] == 'full') {

Should we also check if the field cardinality has been configured to allow multiple images since this probably only makes sense for fields with single image?

I'm working on it.

This looks great to me. RTBC! Thank you for the work.

One note:

+++ b/core/themes/olivero/olivero.theme
@@ -348,6 +348,10 @@ function olivero_preprocess_field(&$variables) {
+  if ($variables['field_type'] == 'image' && $variables['element']['#view_mode'] == 'full' && !$variables["element"]["#is_multiple"]) {

This prevents the output of the wide-image CSS class if the field is set to allow multiple images, but only one image is uploaded. But honestly, I'm okay with this.

opened up followup issue #3220566: Olivero: wide image can overlap sidebar when toolbar open and in vertical mode

Committed f65ce59 and pushed to 9.3.x and cherry-picked to 9.2.x because Olivero is experimental. Thanks!