blabla article card title_image and animated gif with imagemagick

config/sync/core.entity_form_display.node.article.default.yml

@@ -12,6 +12,7 @@ dependencies:
     - field.field.node.article.field_source
     - field.field.node.article.field_tags
     - field.field.node.article.field_thesaurus
+    - field.field.node.article.field_title_image
     - field.field.node.article.field_video
     - field.field.node.article.field_visuel
     - field.field.node.article.field_workflow
@@ -44,6 +45,7 @@ third_party_settings:
     group_contents:
       children:
         - title
+        - field_title_image
         - field_source
         - body
         - field_linked_materials
@@ -66,11 +68,11 @@ third_party_settings:
       weight: 11
       format_type: tab
       format_settings:
-        id: ''
-        classes: ''
-        formatter: open
         description: ''
+        formatter: closed
         required_fields: true
+        id: ''
+        classes: ''
       label: media
       region: content
     group_taxonomy:
@@ -82,11 +84,11 @@ third_party_settings:
       weight: 12
       format_type: tab
       format_settings:
-        id: ''
-        classes: ''
-        formatter: open
         description: ''
+        formatter: closed
         required_fields: true
+        id: ''
+        classes: ''
       label: Taxonomy
       region: content
     group_internal:
@@ -114,7 +116,7 @@ mode: default
 content:
   body:
     type: text_textarea_with_summary
-    weight: 3
+    weight: 32
     settings:
       rows: 9
       summary_rows: 3
@@ -129,7 +131,7 @@ content:
     type: daterange_default
     region: content
   field_linked_materials:
-    weight: 27
+    weight: 33
     settings:
       match_operator: CONTAINS
       size: 60
@@ -163,7 +165,7 @@ content:
     type: entity_reference_autocomplete
     region: content
   field_source:
-    weight: 2
+    weight: 31
     settings:
       placeholder_url: ''
       placeholder_title: ''
@@ -190,6 +192,14 @@ content:
     third_party_settings: {  }
     type: entity_reference_autocomplete
     region: content
+  field_title_image:
+    weight: 30
+    settings:
+      progress_indicator: throbber
+      preview_image_style: thumbnail
+    third_party_settings: {  }
+    type: image_image
+    region: content
   field_video:
     weight: 18
     settings: {  }
@@ -219,7 +229,7 @@ content:
     third_party_settings: {  }
   title:
     type: string_textfield
-    weight: 1
+    weight: 29
     region: content
     settings:
       size: 60

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

@@ -12,6 +12,7 @@ dependencies:
     - field.field.node.article.field_source
     - field.field.node.article.field_tags
     - field.field.node.article.field_thesaurus
+    - field.field.node.article.field_title_image
     - field.field.node.article.field_video
     - field.field.node.article.field_visuel
     - field.field.node.article.field_workflow
@@ -36,6 +37,15 @@ content:
     third_party_settings: {  }
     type: daterange_default
     region: content
+  field_title_image:
+    weight: 3
+    label: above
+    settings:
+      image_style: ''
+      image_link: ''
+    third_party_settings: {  }
+    type: image
+    region: content
   field_visuel:
     weight: 1
     label: hidden

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

@@ -13,6 +13,7 @@ dependencies:
     - field.field.node.article.field_source
     - field.field.node.article.field_tags
     - field.field.node.article.field_thesaurus
+    - field.field.node.article.field_title_image
     - field.field.node.article.field_video
     - field.field.node.article.field_visuel
     - field.field.node.article.field_workflow
@@ -63,6 +64,7 @@ hidden:
   field_source: true
   field_tags: true
   field_thesaurus: true
+  field_title_image: true
   field_video: true
   field_workflow: true
   langcode: true

config/sync/core.extension.yml

@@ -73,6 +73,8 @@ module:
   field_permissions: 0
   field_ui: 0
   file: 0
+  file_mdm: 0
+  file_mdm_exif: 0
   filter: 0
   filter_perms: 0
   genpass: 0
@@ -80,6 +82,7 @@ module:
   honeypot: 0
   image: 0
   image_delta_formatter: 0
+  imagemagick: 0
   inline_entity_form: 0
   interval: 0
   jsonapi: 0

config/sync/field.field.node.article.field_title_image.yml

@@ -0,0 +1,38 @@
+uuid: aa383106-4ca8-41cd-9e0b-64ae0b43a60c
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.node.field_title_image
+    - node.type.article
+  module:
+    - image
+id: node.article.field_title_image
+field_name: field_title_image
+entity_type: node
+bundle: article
+label: 'title image'
+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: false
+  alt_field_required: true
+  title_field: false
+  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.node.field_title_image.yml

@@ -0,0 +1,34 @@
+uuid: f2e7c791-dbf2-48dd-83c5-c9a2b0bda4b9
+langcode: en
+status: true
+dependencies:
+  module:
+    - field_permissions
+    - file
+    - image
+    - node
+third_party_settings:
+  field_permissions:
+    permission_type: public
+id: node.field_title_image
+field_name: field_title_image
+entity_type: node
+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: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

config/sync/file_mdm.file_metadata_plugin.getimagesize.yml

@@ -0,0 +1,9 @@
+configuration:
+  cache:
+    override: false
+    settings:
+      enabled: true
+      expiration: 172800
+      disallowed_paths: {  }
+_core:
+  default_config_hash: o53U_2I-21Es-9iqxeUMDRcRxN0spL1OiHuAVQhh2oI

config/sync/file_mdm.settings.yml

@@ -0,0 +1,6 @@
+metadata_cache:
+  enabled: true
+  expiration: 172800
+  disallowed_paths: {  }
+_core:
+  default_config_hash: Q8ZrmO8RU36KGMcNEaWFQOqYYO3z5Q4IZoS-xYy8MlA

config/sync/file_mdm_exif.file_metadata_plugin.exif.yml

@@ -0,0 +1,35 @@
+ifd_map:
+  0:
+    type: 0
+    aliases:
+      - '0'
+      - IFD0
+      - Main
+  1:
+    type: 1
+    aliases:
+      - '1'
+      - IFD1
+      - Thumbnail
+  Exif:
+    type: 2
+    aliases:
+      - Exif
+  GPS:
+    type: 3
+    aliases:
+      - GPS
+  Interoperability:
+    type: 4
+    aliases:
+      - Interoperability
+      - Interop
+configuration:
+  cache:
+    override: false
+    settings:
+      enabled: true
+      expiration: 172800
+      disallowed_paths: {  }
+_core:
+  default_config_hash: u0ZqkNrnyVSnHXGBP0zlKY9dP1ZARzJZ9VSovzU_eDg

config/sync/image.style.article_card_medium.yml

@@ -0,0 +1,15 @@
+uuid: afc5f33d-4599-49ce-9662-4cb01c78afcb
+langcode: en
+status: true
+dependencies: {  }
+name: article_card_medium
+label: 'article-card-medium (435×295)'
+effects:
+  34e936a0-1fee-4327-9553-b4f48bde14e6:
+    uuid: 34e936a0-1fee-4327-9553-b4f48bde14e6
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 435
+      height: 295
+      anchor: center-center

config/sync/imagemagick.file_metadata_plugin.imagemagick_identify.yml

@@ -0,0 +1,9 @@
+configuration:
+  cache:
+    override: false
+    settings:
+      enabled: true
+      expiration: 172800
+      disallowed_paths: {  }
+_core:
+  default_config_hash: o53U_2I-21Es-9iqxeUMDRcRxN0spL1OiHuAVQhh2oI

config/sync/imagemagick.settings.yml

@@ -0,0 +1,57 @@
+quality: 75
+binaries: imagemagick
+path_to_binaries: ''
+prepend: ''
+prepend_pre_source: false
+log_warnings: true
+debug: false
+use_identify: true
+locale: en_US.UTF-8
+advanced:
+  density: 72
+  colorspace: '0'
+  profile: ''
+image_formats:
+  PNG:
+    mime_type: image/png
+  JPEG:
+    mime_type: image/jpeg
+  JPG:
+    mime_type: image/jpeg
+    weight: 10
+    enabled: false
+  GIF:
+    mime_type: image/gif
+  GIF87:
+    mime_type: image/gif
+    weight: 10
+    enabled: false
+  SVG:
+    mime_type: image/svg+xml
+    enabled: false
+  WEBP:
+    mime_type: image/webp
+    enabled: false
+  TIFF:
+    mime_type: image/tiff
+    enabled: false
+  PDF:
+    mime_type: application/pdf
+    enabled: false
+  BMP:
+    mime_type: image/x-ms-bmp
+    enabled: false
+  PSD:
+    mime_type: image/x-photoshop
+    enabled: false
+  WBMP:
+    mime_type: image/vnd.wap.wbmp
+    enabled: false
+  XBM:
+    mime_type: image/x-xbitmap
+    enabled: false
+  ICO:
+    mime_type: image/vnd.microsoft.icon
+    enabled: false
+_core:
+  default_config_hash: yBklcYJqiyzlSPHHHKvoxew3sJTI62kS9lchdu1aa7E

config/sync/views.view.blabla.yml

@@ -6,8 +6,9 @@ dependencies:
     - core.entity_view_mode.node.teaser
     - field.storage.node.body
     - field.storage.node.field_date
+    - field.storage.node.field_title_image
     - field.storage.node.field_visuel
-    - image.style.card_medium
+    - image.style.article_card_medium
     - node.type.article
     - system.menu.header
   module:
@@ -288,6 +289,70 @@ display:
           entity_type: node
           entity_field: uuid
           plugin_id: field
+        field_title_image:
+          id: field_title_image
+          table: node__field_title_image
+          field: field_title_image
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: ''
+          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: false
+          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: article_card_medium
+            image_link: ''
+          group_column: ''
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+          plugin_id: field
         field_visuel:
           id: field_visuel
           table: node__field_visuel
@@ -339,7 +404,7 @@ display:
           click_sort_column: target_id
           type: image
           settings:
-            image_style: card_medium
+            image_style: article_card_medium
             image_link: ''
           group_column: ''
           group_columns: {  }
@@ -726,6 +791,7 @@ display:
       tags:
         - 'config:field.storage.node.body'
         - 'config:field.storage.node.field_date'
+        - 'config:field.storage.node.field_title_image'
         - 'config:field.storage.node.field_visuel'
   page_1:
     display_plugin: page
@@ -756,6 +822,7 @@ display:
       tags:
         - 'config:field.storage.node.body'
         - 'config:field.storage.node.field_date'
+        - 'config:field.storage.node.field_title_image'
         - 'config:field.storage.node.field_visuel'
   rest_export_1:
     display_plugin: rest_export
@@ -812,4 +879,5 @@ display:
       tags:
         - 'config:field.storage.node.body'
         - 'config:field.storage.node.field_date'
+        - 'config:field.storage.node.field_title_image'
         - 'config:field.storage.node.field_visuel'

web/themes/custom/materiotheme/assets/styles/base/_variables.scss

@@ -1,4 +1,11 @@
 $base_font_size:16px;
 
+// card-big (430x240)
+// card-full (425x610)
+// card-medium (210x295)
+// card-small (100x140)
+
 $column_width: 210px;
 $column_goutiere: 15px;
+
+$card_height: 295px;

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

@@ -547,7 +547,7 @@ article.node--type-frontpage{
 article.card{
   position: relative;
   box-shadow: 0 0 5px rgba(0,0,0,0.2);
-  width:$column_width; height:295px;
+  width:$column_width*2 + $column_goutiere; height:$card_height;
   // &.card-small{
   //   width:100px; height:140px;
   // }

web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue

@@ -9,10 +9,11 @@
         ></a>
       </h1>
       <aside v-html="item.created"></aside>
-      <h4 class="body" v-html="item.body"></h4>
+      <h4 v-if="false" class="body" v-html="item.body"></h4>
     </header>
     <section class="images">
-      <figure v-html="item.field_visuel"></figure>
+      <figure v-if="item.field_title_image !== ''" v-html="item.field_title_image"></figure>
+      <figure v-else-if="item.field_visuel !== ''" v-html="item.field_visuel"></figure>
     </section>
   </article>
 </template>