more blabla

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

@@ -619,6 +619,15 @@ article.card{
 }
 
 #main-content > article.article{
+  section.accroche{
+    figure{
+      width:$column_width*2 + $column_goutiere;
+      margin:0 $column_goutiere 0 0;
+      img{
+        width:100%;
+      }
+    }
+  }
   section.taxonomy{
     ul{
       margin:1em 0 0;
@@ -633,8 +642,8 @@ article.card{
     figure{
       display: inline-block;
       vertical-align: top;
-      width:$column_width;
+      width:$column_width*2 + $column_goutiere;
-      margin:0 $column_goutiere 0 0;
+      margin:0 $column_goutiere $column_goutiere*0.6 0;
       img{
         width:100%;
       }

web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

@@ -23,6 +23,15 @@
         </li>
       </ul>
     </nav>
+    <section class="accroche">
+      <figure>
+        <img
+          :src="content.image_accroche.src"
+          :alt="content.image_accroche.alt"
+          :title="content.image_accroche.title"
+        />
+      </figure>
+    </section>
     <section class="taxonomy">
       <div class="thesaurus">
         <ul>
@@ -217,7 +226,7 @@ export default {
               case 'field_visuel':
                 field = e.meta
                 field.id = e.id
-                field.src = included.links.card_medium.href
+                field.src = included.links.article_card_medium.href
                 break;
               case 'field_linked_materials':
                 field = included.attributes
@@ -247,7 +256,10 @@ export default {
             this.content[key].push(field)
           }
         })
+
       }
+      // extract first visuel as accroche
+      this.content.image_accroche = this.content.field_visuel.shift()
 
       // update main page title
       this.$store.commit('Common/setPagetitle', this.content.title)