Issue #3173016 by mherchel, djsagar, Gauravmahlawat, chrisfree, proeung:...

Issue #3173016 by mherchel, djsagar, Gauravmahlawat, chrisfree, proeung: Address code feedback for Olivero's node.pcss.css partials

core/themes/olivero/css/components/node-teaser.css

@@ -49,24 +49,24 @@
   }
     }
 
-[dir="ltr"] .node--view-mode-teaser .field--name-field-image {
+[dir="ltr"] .node--view-mode-teaser .primary-image {
     margin-right: 1.125rem
 }
 
-[dir="rtl"] .node--view-mode-teaser .field--name-field-image {
+[dir="rtl"] .node--view-mode-teaser .primary-image {
     margin-left: 1.125rem
 }
 
-.node--view-mode-teaser .field--name-field-image {
+.node--view-mode-teaser .primary-image {
     flex-shrink: 0;
     margin: 0
   }
 
-.node--view-mode-teaser .field--name-field-image a {
+.node--view-mode-teaser .primary-image a {
       display: block;
     }
 
-.node--view-mode-teaser .field--name-field-image img {
+.node--view-mode-teaser .primary-image img {
       width: 3.9375rem;
       height: 3.9375rem;
       -o-object-fit: cover;
@@ -76,7 +76,7 @@
 
 @media (min-width: 62.5rem) {
 
-.node--view-mode-teaser .field--name-field-image img {
+.node--view-mode-teaser .primary-image img {
         width: calc(7.14286vw - 2.31696rem);
         height: calc(7.14286vw - 2.31696rem)
     }
@@ -84,7 +84,7 @@
 
 @media (min-width: 75rem) {
 
-.node--view-mode-teaser .field--name-field-image img {
+.node--view-mode-teaser .primary-image img {
         width: calc(7.14286vw - 2.87946rem);
         height: calc(7.14286vw - 2.87946rem)
     }
@@ -92,7 +92,7 @@
 
 @media (min-width: 90rem) {
 
-.node--view-mode-teaser .field--name-field-image img {
+.node--view-mode-teaser .primary-image img {
         width: 3.61607rem;
         height: 3.61607rem
     }
@@ -100,15 +100,15 @@
 
 @media (min-width: 62.5rem) {
 
-[dir="ltr"] .node--view-mode-teaser .field--name-field-image {
+[dir="ltr"] .node--view-mode-teaser .primary-image {
       left: calc(-7.14286vw - -1.07143px)
   }
 
-[dir="rtl"] .node--view-mode-teaser .field--name-field-image {
+[dir="rtl"] .node--view-mode-teaser .primary-image {
       right: calc(-7.14286vw - -1.07143px)
   }
 
-.node--view-mode-teaser .field--name-field-image {
+.node--view-mode-teaser .primary-image {
       position: absolute;
       top: 0;
       margin: 0
@@ -117,22 +117,22 @@
 
 @media (min-width: 75rem) {
 
-[dir="ltr"] .node--view-mode-teaser .field--name-field-image {
+[dir="ltr"] .node--view-mode-teaser .primary-image {
       left: calc(-7.14286vw - -0.62946rem)
   }
 
-[dir="rtl"] .node--view-mode-teaser .field--name-field-image {
+[dir="rtl"] .node--view-mode-teaser .primary-image {
       right: calc(-7.14286vw - -0.62946rem)
   }
     }
 
 @media (min-width: 90rem) {
 
-[dir="ltr"] .node--view-mode-teaser .field--name-field-image {
+[dir="ltr"] .node--view-mode-teaser .primary-image {
       left: -5.86607rem
   }
 
-[dir="rtl"] .node--view-mode-teaser .field--name-field-image {
+[dir="rtl"] .node--view-mode-teaser .primary-image {
       right: -5.86607rem
   }
     }

core/themes/olivero/css/components/node-teaser.pcss.css

@@ -40,7 +40,7 @@
     }
   }
 
-  & .field--name-field-image {
+  & .primary-image {
     flex-shrink: 0;
     margin: 0;
     margin-inline-end: var(--sp1);

core/themes/olivero/css/components/node.css

@@ -19,22 +19,6 @@
   line-height: 1.125rem
 }
 
-[dir="ltr"] .node__meta .field--name-user-picture img {
-    margin-right: 0.5625rem
-}
-
-[dir="rtl"] .node__meta .field--name-user-picture img {
-    margin-left: 0.5625rem
-}
-
-.node__meta .field--name-user-picture img {
-    width: 2.8125rem;
-    height: 2.8125rem;
-    -o-object-fit: cover;
-    object-fit: cover;
-    border-radius: 50%;
-  }
-
 .node__meta a {
     font-weight: bold;
   }
@@ -46,6 +30,22 @@
 }
   }
 
+[dir="ltr"] .node__author-image img {
+  margin-right: 0.5625rem
+}
+
+[dir="rtl"] .node__author-image img {
+  margin-left: 0.5625rem
+}
+
+.node__author-image img {
+  width: 2.8125rem;
+  height: 2.8125rem;
+  -o-object-fit: cover;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
 .node__title a {
     padding-bottom: 0.1875rem;
     transition: background-size 0.2s, color 0.2s;

core/themes/olivero/css/components/node.pcss.css

@@ -13,14 +13,6 @@
   font-size: 14px;
   line-height: var(--sp);
 
-  & .field--name-user-picture img {
-    width: var(--sp2-5);
-    height: var(--sp2-5);
-    margin-inline-end: var(--sp0-5);
-    object-fit: cover;
-    border-radius: 50%;
-  }
-
   & a {
     font-weight: bold;
   }
@@ -30,6 +22,14 @@
   }
 }
 
+.node__author-image img {
+  width: var(--sp2-5);
+  height: var(--sp2-5);
+  margin-inline-end: var(--sp0-5);
+  object-fit: cover;
+  border-radius: 50%;
+}
+
 .node__title {
   & a {
     padding-block-end: 3px;

core/themes/olivero/templates/content/node.html.twig

@@ -92,7 +92,11 @@
     {{ title_suffix }}
     {% if display_submitted %}
       <div class="node__meta">
-        {{ author_picture }}
+      {% if author_picture %}
+        <div class="node__author-image">
+          {{ author_picture }}
+        </div>
+      {% endif %}
         <span{{ author_attributes }}>
           {{ 'By'|t }} {% apply spaceless %}{{ author_name }}{% endapply %}, {{ date }}
         </span>

core/themes/olivero/templates/field/field--node--field-image.html.twig

+{#
+/**
+ * @file
+ * Theme override for the image field.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+
+{% extends 'field.html.twig' %}
+{% set attributes = attributes.addClass('primary-image') %}