UHF-10191: Image style refactor

conf/cmi/core.entity_view_display.node.news_article.card_teaser.yml

@@ -16,24 +16,22 @@ dependencies:
     - field.field.node.news_article.field_news_neighbourhoods
     - field.field.node.news_article.field_radioactivity
     - field.field.node.news_article.field_short_title
-    - image.style.3_2_m
     - node.type.news_article
   module:
-    - media
     - user
 _core:
-  default_config_hash: iVurdIrmFb-9zouILb7tpBzFwTaBuujRblTpAaITWFY
+  default_config_hash: PzgE8bHA2ujrM2wIS9zbtMyH_JL-liD36JKtieYKGRI
 id: node.news_article.card_teaser
 targetEntityType: node
 bundle: news_article
 mode: card_teaser
 content:
   field_main_image:
-    type: media_thumbnail
+    type: entity_reference_entity_view
     label: hidden
     settings:
-      image_link: ''
-      image_style: 3_2_m
+      view_mode: card_teaser
+      link: false
     third_party_settings: {  }
     weight: 1
     region: content

conf/cmi/core.entity_view_display.node.news_article.default.yml

@@ -24,7 +24,7 @@ dependencies:
     - radioactivity
     - user
 _core:
-  default_config_hash: AvCTTs-O6N3Rf66v73HmbnXd4q3nkGgFtPQnztyQj3E
+  default_config_hash: _Zju5NRRpGOfDAmDj9yPKTgTsE993KZ3KO1ZN-52ZWs
 id: node.news_article.default
 targetEntityType: node
 bundle: news_article
@@ -57,7 +57,7 @@ content:
     type: entity_reference_entity_view
     label: hidden
     settings:
-      view_mode: image_content_area
+      view_mode: hero
       link: false
     third_party_settings: {  }
     weight: 4

conf/cmi/core.entity_view_display.node.news_article.teaser.yml

@@ -20,7 +20,7 @@ dependencies:
   module:
     - user
 _core:
-  default_config_hash: jHxJ-y_ToXm-HVy6369tgW6szmiwfFXkjoq93RfIuh0
+  default_config_hash: PUQ8kL-SwMo65hnIdT0cHPb9bfpVDyK9h-eGr3rqS-Q
 id: node.news_article.teaser
 targetEntityType: node
 bundle: news_article
@@ -30,7 +30,7 @@ content:
     type: entity_reference_entity_view
     label: hidden
     settings:
-      view_mode: media_library
+      view_mode: card
       link: false
     third_party_settings: {  }
     weight: 1

public/modules/custom/helfi_etusivu/src/Plugin/search_api/processor/MainImageProcessor.php

@@ -36,7 +36,7 @@ public function getPropertyDefinitions(DataSourceInterface $datasource = NULL) {
       $definition = [
         'label' => $this->t('Main image'),
         'description' => $this->t('Indexes main image uri in correct image style'),
-        'type' => 'string',
+        'type' => 'object',
         'processor_id' => $this->getPluginId(),
       ];
 
@@ -49,7 +49,7 @@ public function getPropertyDefinitions(DataSourceInterface $datasource = NULL) {
   /**
    * {@inheritdoc}
    */
-  public function addFieldValues(Iteminterface $item) {
+  public function addFieldValues(ItemInterface $item) {
     $dataSourceId = $item->getDataSourceId();
 
     if ($dataSourceId !== 'entity:node' || !$node = $item->getOriginalObject()->getValue()) {
@@ -68,13 +68,32 @@ public function addFieldValues(Iteminterface $item) {
       return;
     }
 
-    $imageStyle = ImageStyle::load('3_2_l');
     $imagePath = $file->getFileUri();
-    $value = $imageStyle->buildUrl($imagePath);
+    $imageStyles = [
+      '1.5_378w_252h' => '1248',
+      '1.5_341w_227h' => '992',
+      '1.5_264w_176h' => '768',
+      '1.5_217w_145h' => '576',
+      '1.5_511w_341h' => '320',
+      '1.5_756w_504h_LQ' => '1248_2x',
+      '1.5_682w_454h_LQ' => '992_2x',
+      '1.5_528w_352h_LQ' => '768_2x',
+      '1.5_434w_290h_LQ' => '576_2x',
+      '1.5_1022w_682h_LQ' => '320_2x',
+    ];
+
+    $urls = [];
+    foreach ($imageStyles as $styleName => $breakpoint) {
+      $imageStyle = ImageStyle::load($styleName);
+      if ($imageStyle) {
+        $urls[$breakpoint] = $imageStyle->buildUrl($imagePath);
+      }
+    }
 
-    $fields = $this->getFieldsHelper()->filterForPropertyPath($item->getFields(), NULL, 'main_image_url');
+    $fields = $this->getFieldsHelper()
+      ->filterForPropertyPath($item->getFields(), NULL, 'main_image_url');
     foreach ($fields as $field) {
-      $field->addValue($value);
+      $field->addValue(json_encode($urls));
     }
   }
 

public/modules/custom/helfi_node_news_article/config/install/core.entity_view_display.node.news_article.card_teaser.yml

@@ -5,12 +5,16 @@ dependencies:
   config:
     - core.entity_view_mode.node.card_teaser
     - field.field.node.news_article.field_content
+    - field.field.node.news_article.field_hero_design
     - field.field.node.news_article.field_lead_in
     - field.field.node.news_article.field_main_image
     - field.field.node.news_article.field_main_image_caption
+    - field.field.node.news_article.field_news_groups
     - field.field.node.news_article.field_news_item_links_link
     - field.field.node.news_article.field_news_item_links_title
     - field.field.node.news_article.field_news_item_tags
+    - field.field.node.news_article.field_news_neighbourhoods
+    - field.field.node.news_article.field_radioactivity
     - field.field.node.news_article.field_short_title
     - image.style.3_2_m
     - node.type.news_article
@@ -23,11 +27,11 @@ bundle: news_article
 mode: card_teaser
 content:
   field_main_image:
-    type: media_thumbnail
+    type: entity_reference_entity_view
     label: hidden
     settings:
-      image_link: ''
-      image_style: 3_2_m
+      view_mode: card_teaser
+      link: false
     third_party_settings: {  }
     weight: 1
     region: content
@@ -72,10 +76,18 @@ content:
     weight: 4
     region: content
 hidden:
+  annif_keywords: true
   field_content: true
+  field_hero_design: true
   field_lead_in: true
   field_main_image_caption: true
+  field_news_groups: true
   field_news_item_links_link: true
   field_news_item_tags: true
+  field_news_neighbourhoods: true
+  field_radioactivity: true
+  in_recommendations: true
   langcode: true
+  search_api_excerpt: true
+  show_annif_block: true
   toc_enabled: true

public/modules/custom/helfi_node_news_article/config/install/core.entity_view_display.node.news_article.default.yml

@@ -55,7 +55,7 @@ content:
     type: entity_reference_entity_view
     label: hidden
     settings:
-      view_mode: image_content_area
+      view_mode: hero
       link: false
     third_party_settings: {  }
     weight: 4
@@ -135,7 +135,10 @@ content:
     weight: 0
     region: content
 hidden:
+  annif_keywords: true
+  in_recommendations: true
   langcode: true
   published_at: true
   search_api_excerpt: true
+  show_annif_block: true
   toc_enabled: true

public/modules/custom/helfi_node_news_article/config/install/core.entity_view_display.node.news_article.teaser.yml

@@ -5,12 +5,16 @@ dependencies:
   config:
     - core.entity_view_mode.node.teaser
     - field.field.node.news_article.field_content
+    - field.field.node.news_article.field_hero_design
     - field.field.node.news_article.field_lead_in
     - field.field.node.news_article.field_main_image
     - field.field.node.news_article.field_main_image_caption
+    - field.field.node.news_article.field_news_groups
     - field.field.node.news_article.field_news_item_links_link
     - field.field.node.news_article.field_news_item_links_title
     - field.field.node.news_article.field_news_item_tags
+    - field.field.node.news_article.field_news_neighbourhoods
+    - field.field.node.news_article.field_radioactivity
     - field.field.node.news_article.field_short_title
     - node.type.news_article
   module:
@@ -24,7 +28,7 @@ content:
     type: entity_reference_entity_view
     label: hidden
     settings:
-      view_mode: media_library
+      view_mode: card
       link: false
     third_party_settings: {  }
     weight: 1
@@ -70,10 +74,18 @@ content:
     weight: 4
     region: content
 hidden:
+  annif_keywords: true
   field_content: true
+  field_hero_design: true
   field_lead_in: true
   field_main_image_caption: true
+  field_news_groups: true
   field_news_item_links_link: true
   field_news_item_tags: true
+  field_news_neighbourhoods: true
+  field_radioactivity: true
+  in_recommendations: true
   langcode: true
+  search_api_excerpt: true
+  show_annif_block: true
   toc_enabled: true

public/modules/custom/helfi_node_news_article/src/Plugin/Block/NewsArticleHeroBlock.php

@@ -36,18 +36,39 @@ public function build() : array {
 
     $image_display_options = [
       'label' => 'hidden',
-      'type' => 'entity_reference_entity_view',
+      'type' => 'responsive_image',
       'settings' => [
-        'view_mode' => 'hero',
+        'responsive_image_style' => $this->getHeroDesign($entity),
+        'image_link' => '',
+        'image_loading' => [
+          'attribute' => 'eager',
+        ],
       ],
     ];
 
+    /** @var \Drupal\Core\Entity\Plugin\DataType\EntityReference $entity_reference */
+    $entity_reference = $entity->get('field_main_image')
+      ?->first()
+      ?->get('entity');
+
+    /** @var \Drupal\Core\Entity\Plugin\DataType\EntityAdapter $entity_adapter */
+    $entity_adapter = $entity_reference?->getTarget();
+
+    /** @var \Drupal\media\Entity\Media $media */
+    $media = $entity_adapter?->getEntity();
+
+    // Render array of the image.
+    $image = $media
+      ?->get('field_media_image')
+      ?->first()
+      ?->view($image_display_options);
+
     $build['news_article_hero_block'] = [
       '#theme' => 'news_article_hero_block',
       '#title' => $entity->label(),
       '#description' => $entity->get('field_lead_in')?->first()?->view(),
       '#design' => $entity->get('field_hero_design')?->first()?->getString(),
-      '#image' => $entity->get('field_main_image')?->view($image_display_options),
+      '#image' => $image,
       '#cache' => [
         'tags' => $entity->getCacheTags(),
       ],
@@ -56,4 +77,23 @@ public function build() : array {
     return $build;
   }
 
+  /**
+   * Get field hero design value and return responsive image style as a string.
+   *
+   * @param \Drupal\Core\Entity\ContentEntityInterface $entity
+   *   Content entity.
+   *
+   * @return string
+   *   Return responsive image style as a string.
+   *
+   * @throws \Drupal\Core\TypedData\Exception\MissingDataException
+   */
+  protected function getHeroDesign(ContentEntityInterface $entity): string {
+    return match ($entity->get('field_hero_design')?->first()?->getString()) {
+      'with-image-right', 'with-image-left' => 'hero__left_right',
+      'with-image-bottom' => 'hero__bottom',
+      default => 'hero__diagonal',
+    };
+  }
+
 }

public/themes/custom/hdbt_subtheme/hdbt_subtheme.theme

@@ -8,7 +8,6 @@
 declare(strict_types=1);
 
 use Drupal\Core\Url;
-use Drupal\node\NodeInterface;
 
 /**
  * Implements hook_preprocess_HOOK().
@@ -211,14 +210,7 @@ function hdbt_subtheme_preprocess_views_view_row_rss(&$variables) : void {
 /**
  * Implements hook_preprocess_HOOK().
  */
-function hdbt_subtheme_preprocess_node(array &$variables): void {
-  if (
-    !$variables['node'] instanceof NodeInterface ||
-    $variables['node']->bundle() !== 'news_item'
-  ) {
-    return;
-  }
-
+function hdbt_subtheme_preprocess_node__news_item(array &$variables): void {
   // Attach the updating news table of contents library to the news item page.
   $variables['#attached']['library'][] = 'hdbt_subtheme/updating-news-table-of-contents';
 }