going on with home display: shworooms

config/sync/core.entity_form_display.taxonomy_term.showroom.default.yml

@@ -8,11 +8,14 @@ dependencies:
     - field.field.taxonomy_term.showroom.field_public_address
     - field.field.taxonomy_term.showroom.field_public_email
     - field.field.taxonomy_term.showroom.field_public_phone
+    - field.field.taxonomy_term.showroom.field_visuels
     - field.field.taxonomy_term.showroom.field_workflow
+    - image.style.thumbnail
     - taxonomy.vocabulary.showroom
   module:
     - address
     - field_group
+    - image
     - telephone
     - text
     - workflow
@@ -22,6 +25,7 @@ third_party_settings:
       children:
         - group_contents
         - group_info
+        - group_media
       parent_name: ''
       weight: 1
       format_type: tabs
@@ -79,6 +83,20 @@ third_party_settings:
         required_fields: true
       label: Contents
       region: content
+    group_media:
+      children:
+        - field_visuels
+      parent_name: group_tabs
+      weight: 22
+      format_type: tab
+      format_settings:
+        id: ''
+        classes: ''
+        description: ''
+        formatter: closed
+        required_fields: true
+      label: media
+      region: content
 id: taxonomy_term.showroom.default
 targetEntityType: taxonomy_term
 bundle: showroom
@@ -127,6 +145,14 @@ content:
     third_party_settings: {  }
     type: telephone_default
     region: content
+  field_visuels:
+    weight: 22
+    settings:
+      progress_indicator: throbber
+      preview_image_style: thumbnail
+    third_party_settings: {  }
+    type: image_image
+    region: content
   field_workflow:
     weight: 6
     settings: {  }

config/sync/core.entity_view_display.node.article.teaser.yml

@@ -30,14 +30,14 @@ content:
   body:
     label: hidden
     type: text_summary_or_trimmed
-    weight: 0
+    weight: 1
     settings:
       trim_length: 200
     third_party_settings: {  }
     region: content
   field_visuel:
     type: image_delta_formatter
-    weight: 1
+    weight: 2
     region: content
     label: hidden
     settings:
@@ -46,15 +46,10 @@ content:
       image_link: content
       deltas_reversed: 0
     third_party_settings: {  }
-  links:
-    weight: 2
-    region: content
-    settings: {  }
-    third_party_settings: {  }
   title:
     label: hidden
     type: string
-    weight: -5
+    weight: 0
     region: content
     settings:
       link_to_entity: false
@@ -71,3 +66,5 @@ hidden:
   field_video: true
   field_workflow: true
   langcode: true
+  links: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.frontpage.default.yml

@@ -137,7 +137,7 @@ content:
     weight: 4
     region: content
     settings:
-      view_mode: default
+      view_mode: home
       link: false
     third_party_settings: {  }
     type: entity_reference_entity_view

config/sync/core.entity_view_display.taxonomy_term.showroom.default.yml

@@ -8,10 +8,12 @@ dependencies:
     - field.field.taxonomy_term.showroom.field_public_address
     - field.field.taxonomy_term.showroom.field_public_email
     - field.field.taxonomy_term.showroom.field_public_phone
+    - field.field.taxonomy_term.showroom.field_visuels
     - field.field.taxonomy_term.showroom.field_workflow
     - taxonomy.vocabulary.showroom
   module:
     - address
+    - image
     - telephone_formatter
     - text
 id: taxonomy_term.showroom.default
@@ -50,8 +52,18 @@ content:
     third_party_settings: {  }
     type: telephone_formatter
     region: content
+  field_visuels:
+    weight: 4
+    label: above
+    settings:
+      image_style: ''
+      image_link: ''
+    third_party_settings: {  }
+    type: image
+    region: content
 hidden:
   field_memo: true
   field_migration: true
   field_workflow: true
   langcode: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.taxonomy_term.showroom.home.yml

@@ -0,0 +1,64 @@
+uuid: 9b2818fb-e53c-4ae4-80c0-89649b9845d6
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.taxonomy_term.home
+    - field.field.taxonomy_term.showroom.field_memo
+    - field.field.taxonomy_term.showroom.field_migration
+    - field.field.taxonomy_term.showroom.field_public_address
+    - field.field.taxonomy_term.showroom.field_public_email
+    - field.field.taxonomy_term.showroom.field_public_phone
+    - field.field.taxonomy_term.showroom.field_visuels
+    - field.field.taxonomy_term.showroom.field_workflow
+    - image.style.home_showroom
+    - taxonomy.vocabulary.showroom
+  module:
+    - address
+    - image
+    - telephone_formatter
+id: taxonomy_term.showroom.home
+targetEntityType: taxonomy_term
+bundle: showroom
+mode: home
+content:
+  field_public_address:
+    type: address_default
+    weight: 1
+    region: content
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+  field_public_email:
+    type: email_mailto
+    weight: 3
+    region: content
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+  field_public_phone:
+    type: telephone_formatter
+    weight: 2
+    region: content
+    label: hidden
+    settings:
+      format: 1
+      link: true
+      default_country: null
+    third_party_settings: {  }
+  field_visuels:
+    weight: 0
+    label: hidden
+    settings:
+      image_style: home_showroom
+      image_link: ''
+    third_party_settings: {  }
+    type: image
+    region: content
+hidden:
+  description: true
+  field_memo: true
+  field_migration: true
+  field_workflow: true
+  langcode: true
+  search_api_excerpt: true

config/sync/core.entity_view_mode.taxonomy_term.home.yml

@@ -0,0 +1,10 @@
+uuid: c8f0acee-3e1b-4406-a536-cd4e3b9501da
+langcode: en
+status: true
+dependencies:
+  module:
+    - taxonomy
+id: taxonomy_term.home
+label: home
+targetEntityType: taxonomy_term
+cache: true

config/sync/field.field.taxonomy_term.showroom.field_visuels.yml

@@ -0,0 +1,38 @@
+uuid: eaaaf871-5745-4395-84f7-3713639a2940
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.taxonomy_term.field_visuels
+    - taxonomy.vocabulary.showroom
+  module:
+    - image
+id: taxonomy_term.showroom.field_visuels
+field_name: field_visuels
+entity_type: taxonomy_term
+bundle: showroom
+label: Visuels
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  file_directory: '[date:custom:Y]-[date:custom:m]'
+  file_extensions: 'png gif jpg jpeg'
+  max_filesize: ''
+  max_resolution: ''
+  min_resolution: ''
+  alt_field: true
+  alt_field_required: false
+  title_field: true
+  title_field_required: false
+  default_image:
+    uuid: ''
+    alt: ''
+    title: ''
+    width: null
+    height: null
+  handler: 'default:file'
+  handler_settings: {  }
+field_type: image

config/sync/field.storage.taxonomy_term.field_visuels.yml

@@ -0,0 +1,30 @@
+uuid: 5041a549-2a8e-4994-b00a-fb3761fa6491
+langcode: en
+status: true
+dependencies:
+  module:
+    - file
+    - image
+    - taxonomy
+id: taxonomy_term.field_visuels
+field_name: field_visuels
+entity_type: taxonomy_term
+type: image
+settings:
+  uri_scheme: public
+  default_image:
+    uuid: ''
+    alt: ''
+    title: ''
+    width: null
+    height: null
+  target_type: file
+  display_field: false
+  display_default: false
+module: image
+locked: false
+cardinality: 5
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

config/sync/image.style.home_showroom.yml

@@ -0,0 +1,15 @@
+uuid: 156ca012-5278-4c4c-805b-78819a5aa9bd
+langcode: en
+status: true
+dependencies: {  }
+name: home_showroom
+label: 'home-showroom (800x534)'
+effects:
+  87ca0333-c2de-4d98-91e1-d65b0263a31e:
+    uuid: 87ca0333-c2de-4d98-91e1-d65b0263a31e
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 800
+      height: 450
+      anchor: center-center

config/sync/views.view.admin_taxo.yml

@@ -8,8 +8,10 @@ dependencies:
     - field.storage.taxonomy_term.field_public_address
     - field.storage.taxonomy_term.field_public_email
     - field.storage.taxonomy_term.field_synonyms
+    - field.storage.taxonomy_term.field_visuels
     - field.storage.taxonomy_term.field_website
     - field.storage.taxonomy_term.field_workflow
+    - image.style.medium
     - taxonomy.vocabulary.company
     - taxonomy.vocabulary.showroom
     - taxonomy.vocabulary.tags
@@ -19,6 +21,7 @@ dependencies:
   module:
     - address
     - content_lock
+    - image
     - link
     - options
     - pagerer
@@ -98,12 +101,11 @@ display:
           description: ''
           columns:
             views_bulk_operations_bulk_form: views_bulk_operations_bulk_form
+            field_visuels: name
             tid: name
             name: name
             operations: name
             field_public_address: field_public_address
-            field_public_email: field_public_email
-            field_website: field_website
             translation_count: translation_count
             langcode_1: langcode_1
             is_locked: is_locked
@@ -117,6 +119,11 @@ display:
               separator: ''
               empty_column: false
               responsive: ''
+            field_visuels:
+              align: ''
+              separator: ''
+              empty_column: false
+              responsive: ''
             tid:
               sortable: false
               default_sort_order: asc
@@ -143,18 +150,6 @@ display:
               separator: ''
               empty_column: false
               responsive: ''
-            field_public_email:
-              sortable: false
-              default_sort_order: asc
-              align: ''
-              separator: ''
-              empty_column: false
-              responsive: ''
-            field_website:
-              align: ''
-              separator: ''
-              empty_column: false
-              responsive: ''
             translation_count:
               sortable: false
               default_sort_order: asc
@@ -198,6 +193,8 @@ display:
               empty_column: false
               responsive: ''
             field_memo:
+              sortable: false
+              default_sort_order: asc
               align: ''
               separator: ''
               empty_column: false
@@ -3129,6 +3126,70 @@ display:
           entity_type: taxonomy_term
           entity_field: name
           plugin_id: term_name
+        field_visuels:
+          id: field_visuels
+          table: taxonomy_term__field_visuels
+          field: field_visuels
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: Visuels
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: target_id
+          type: image
+          settings:
+            image_style: medium
+            image_link: ''
+          group_column: ''
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 1
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+          plugin_id: field
         operations:
           id: operations
           table: taxonomy_term_data
@@ -3668,6 +3729,7 @@ display:
         - 'config:field.storage.taxonomy_term.field_memo'
         - 'config:field.storage.taxonomy_term.field_migration'
         - 'config:field.storage.taxonomy_term.field_public_address'
+        - 'config:field.storage.taxonomy_term.field_visuels'
         - 'config:field.storage.taxonomy_term.field_workflow'
   page_3:
     display_plugin: page

web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedShowroomsReferences.php

@@ -8,6 +8,8 @@ use Drupal\Core\Field\FieldItemList;
 use Drupal\Core\TypedData\TypedDataInterface;
 use Drupal\Core\Field\BaseFieldDefinition;
 use Drupal\Core\TypedData\ComputedItemListTrait;
+use Drupal\workflow\Entity\WorkflowManager;
+
 
 // https://www.drupal.org/node/2112677
 // https://www.cornel.co/article/entity-reference-computed-field-example-drupal
@@ -38,9 +40,15 @@ class ComputedShowroomsReferences extends EntityReferenceFieldItemList
     $query = \Drupal::entityQuery('taxonomy_term')
         ->condition('status', 1)
         ->condition('vid', 'showroom');
+        // remove masqué
+
+
     $tids = $query->execute();
     shuffle($tids);
     foreach ($tids as $key => $tid) {
+      $term = \Drupal::entityTypeManager()->getStorage('taxonomy_term')->load($tid);
+      $sid = WorkflowManager::getCurrentStateId($term, 'field_workflow');
+      if($sid != 'workflow_visible') continue;
       $this->list[$key] = $this->createItem($key, $tid);
     }
   }

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1310,6 +1310,36 @@ article.node--type-frontpage .node__content > section.home-database {
 
 article.node--type-frontpage .node__content > section.home-showrooms {
   background-color: #50aa3c; }
+  article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr; }
+    article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item {
+      grid-column: 1;
+      grid-row: 1; }
+      article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term {
+        position: relative;
+        width: 100%;
+        height: 100%; }
+        article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term div.visuel {
+          width: 100%;
+          padding-bottom: 10em; }
+          article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term div.visuel img {
+            max-width: 100%; }
+        article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          box-sizing: border-box;
+          padding: 1em 0;
+          background-color: #50aa3c;
+          color: #fff; }
+          article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text > * {
+            font-size: 0.9em; }
+          article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text h2, article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text p {
+            margin: 0; }
 
 article.node--type-frontpage .node__content > section.home-blabla {
   background-color: #9458aa; }
@@ -1342,37 +1372,6 @@ article.node--type-frontpage .node__content > section.home-blabla {
             font-size: 0.756em;
             line-height: 0.9; }
 
-article.node--type-frontpage .node__content .field--name-field-what-is-materio:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-a-database:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-showrooms:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-blabla:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-pricing:not(:nth-child(1)) {
-  margin-top: 1em; }
-
-article.node--type-frontpage .node__content .field--name-field-what-is-materio .field__label,
-article.node--type-frontpage .node__content .field--name-field-a-database .field__label,
-article.node--type-frontpage .node__content .field--name-field-showrooms .field__label,
-article.node--type-frontpage .node__content .field--name-field-blabla .field__label,
-article.node--type-frontpage .node__content .field--name-field-pricing .field__label {
-  font-size: 2.2em;
-  font-weight: bold; }
-
-article.node--type-frontpage .node__content .field--name-computed-showrooms-reference,
-article.node--type-frontpage .node__content .field--name-computed-articles-reference {
-  margin: 0;
-  padding: 0;
-  width: calc(100% + 15px); }
-  article.node--type-frontpage .node__content .field--name-computed-showrooms-reference .field__item,
-  article.node--type-frontpage .node__content .field--name-computed-articles-reference .field__item {
-    display: inline-block;
-    vertical-align: top;
-    width: 210px;
-    margin: 0 15px 15px 0;
-    padding: 0; }
-    article.node--type-frontpage .node__content .field--name-computed-showrooms-reference .field__item p,
-    article.node--type-frontpage .node__content .field--name-computed-articles-reference .field__item p {
-      margin: 0; }
-
 .infinite-loading-container .infinite-status-prompt i[class^="loading-"] {
   width: 15px;
   height: 15px; }

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -343,6 +343,47 @@ article.node--type-frontpage{
         .field--name-field-showrooms{
         }
         .field--name-computed-showrooms-reference{
+          position:relative;
+          // height:550px;
+          display: grid;
+          grid-template-columns: 1fr;
+          grid-template-rows: 1fr;
+          >.field__item{
+            // position: absolute;
+            // top:0; left:0;
+            // width:100%; height:100%;
+            // overflow: hidden;
+            grid-column: 1;
+            grid-row: 1;
+            .taxonomy-term{
+              position: relative;
+              width:100%; height:100%;
+              div.visuel{
+                width:100%;
+                padding-bottom: 10em;
+                img{
+                  max-width: 100%;
+                }
+              }
+              section.text{
+                position: absolute;
+                bottom:0; left:0;
+                width:100%;
+                box-sizing:border-box;
+                padding:1em 0;
+                background-color:#50aa3c;
+                color: #fff;
+                >*{
+                  // display: inline-block;
+                  font-size: 0.9em;
+                }
+                h2,p{
+                  margin:0;
+                }
+
+              }
+            }
+          }
         }
       }
       &.home-blabla{
@@ -387,39 +428,6 @@ article.node--type-frontpage{
 
       }
     }
-
-    .field--name-field-what-is-materio,
-    .field--name-field-a-database,
-    .field--name-field-showrooms,
-    .field--name-field-blabla,
-    .field--name-field-pricing{
-      &:not(:nth-child(1)){
-        margin-top: 1em;
-      }
-      .field__label{
-        font-size: 2.2em;
-        font-weight: bold;
-      }
-    }
-
-    // .field--name-computed-materials-reference,
-    .field--name-computed-showrooms-reference,
-    .field--name-computed-articles-reference{
-      // outline: 1px green solid;
-      margin:0; padding:0;
-      width: calc(100% + #{$column_goutiere});
-
-      .field__item{
-        display: inline-block;
-        vertical-align: top;
-        width:210px;
-        margin:0 $column_goutiere $column_goutiere 0; padding:0;
-        p{
-          margin:0;
-        }
-      }
-    }
-
   }
 }
 

web/themes/custom/materiotheme/materiotheme.theme

@@ -138,3 +138,15 @@ function materiotheme_form_user_login_form_alter(&$form, FormStateInterface $for
 //   //   $vars['links'][$lang_code]['link']['#title'] = $lang_code;
 //   // }
 // }
+
+
+function materiotheme_theme_suggestions_taxonomy_term_alter(&$suggestions, &$vars){
+  // ksm($suggestions);
+  // ksm($vars);
+  $original = $vars['theme_hook_original'];
+  $bundle = $vars['elements']['#taxonomy_term']->bundle();
+  $viewmode = $vars['elements']["#view_mode"];
+  $suggestions[] = $original.'__'.$bundle.'__'.$viewmode;
+
+  // dsm($suggestions);
+}

web/themes/custom/materiotheme/templates/content/taxonomy-term--showroom--home.html.twig

@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Theme override to display a taxonomy term.
+ *
+ * Available variables:
+ * - url: URL of the current term.
+ * - name: Name of the current term.
+ * - content: Items for the content of the term (fields and description).
+ *   Use 'content' to print them all, or print a subset such as
+ *   'content.description'. Use the following code to exclude the
+ *   printing of a given child element:
+ *   @code
+ *   {{ content|without('description') }}
+ *   @endcode
+ * - attributes: HTML attributes for the wrapper.
+ * - page: Flag for the full page state.
+ * - term: The taxonomy term entity, including:
+ *   - id: The ID of the taxonomy term.
+ *   - bundle: Machine name of the current vocabulary.
+ * - view_mode: View mode, e.g. 'full', 'teaser', etc.
+ *
+ * @see template_preprocess_taxonomy_term()
+ */
+#}
+{%
+  set classes = [
+    'taxonomy-term',
+    'vocabulary-' ~ term.bundle|clean_class,
+  ]
+%}
+<div{{ attributes.setAttribute('id', 'taxonomy-term-' ~ term.id).addClass(classes) }}>
+  <div class="visuel">
+    {{ content.field_visuels }}
+  </div>
+  <section class="text">
+    <h2><a href="{{ url }}">{{ name }}</a></h2>
+    {{ content|without('field_visuels') }}
+  </section>
+</div>