Merge pull request #668 from City-of-Helsinki/UHF-10191

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';
 }