home page of productions is ok!

sites/all/modules/figli/edlp_admin/edlp_admin.links.action.yml

@@ -19,6 +19,13 @@ edlp_admin.add_page:
   title: 'New Page'
   appears_on:
     - view.content.page_1
+edlp_admin.edit_prod_menu:
+  route_name: 'entity.menu.edit_form'
+  route_parameters:
+    menu: 'productions'
+  title: 'Edit Production Menu'
+  appears_on:
+    - view.content.page_1
 edlp_admin.add_evenement:
   route_name: 'node.add'
   route_parameters:

sites/all/modules/figli/edlp_productions/edlp_productions.module

@@ -14,10 +14,9 @@ function edlp_productions_theme($existing, $type, $theme, $path) {
   // @see https://www.drupal.org/docs/8/theming/twig/create-custom-twig-templates-from-custom-module
   return array(
     'edlp_productions' => array(
-      // 'render element' => '',
       'file' => 'includes/edlp_productions.inc',
       'variables' => array(
-        'hello' => NULL,
+        'nodes_entities' => NULL,
       ),
     ),
   );

sites/all/modules/figli/edlp_productions/includes/edlp_productions.inc

@@ -7,12 +7,25 @@ function template_preprocess_edlp_productions(&$vars){
 /*
   @see https://www.drupal8.ovh/index.php/en/tutoriels/339/render-a-node-or-an-entity
   */
-  // $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
+  $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
 
-  // $vars['next_event'] = array(
-  //   "#markup"=>"<h3>Prochaine Date</h3>",
-  //   "event"=>$view_builder->view($vars['next_event_node'], 'default')
-  // );
+  foreach($vars['nodes_entities'] as $node){
+    switch($node->get('field_view_mode')->value){
+      case "1":
+        $vm = "image_2_columns";
+        break;
+      case "2":
+        $vm = "image_1_columns";
+        break;
+      case "3":
+        $vm = "text_1_column";
+        break;
+    };
+    $vars['nodes'][] = array(
+      'vm'=>$vm,
+      'build'=>$view_builder->view($node, $vm)
+    );
+  }
 
 
 }

sites/all/modules/figli/edlp_productions/src/Controller/ProductionsController.php

@@ -25,20 +25,23 @@ class ProductionsController extends ControllerBase {
     $result = $query->execute();
     // dpm($result);
 
+    $nids = [];
     foreach ($result as $id) {
       $menu_link = MenuLinkContent::load($id);
       // dpm($menu_link->getParentId());
-      if($menu_link->getParentId() === ""){
-        dpm($menu_link->getTitle());
-        $path = $menu_link->getUrlObject()->getInternalPath();
-        preg_match('/^node\/(\d+)$/', $path, $m);
-        dpm($m[1]);
-      }
+      if($menu_link->getParentId() !== "") continue;
+
+      // dpm($menu_link->getTitle());
+      $path = $menu_link->getUrlObject()->getInternalPath();
+      preg_match('/^(node)\/(\d+)$/', $path, $m);
+      // dpm($m);
+      if($m[1] !== "node") continue;
+
+      $nids[] = ($m[2]);
     }
 
-    // TODO: loop through first level
-    // TODO: load nodes
-    // TODO: create items
+    $this->nodes = entity_load_multiple('node', $nids);
+
     // TODO: apply right display
 
   }
@@ -52,7 +55,7 @@ class ProductionsController extends ControllerBase {
 
     return array(
       "#theme"=>'edlp_productions',
-      "#hello"=>'Hello',
+      "#nodes_entities"=>$this->nodes,
     );
 
   }

sites/all/modules/figli/edlp_productions/templates/edlp-productions.html.twig

@@ -1 +1,3 @@
-{{ hello }}
+{% for node in nodes %}
+  {{ node.build }}
+{% endfor %}

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -36,6 +36,9 @@ edlp_vars = {
       _$body.on('corpus-map-ready', onCorpusMapReady);
       initScrollbars();
       initAjaxLinks();
+      if (_$body.is('.path-productions')) {
+        initProductions();
+      }
     };
 
     //  ___             _ _ ___
@@ -105,6 +108,7 @@ edlp_vars = {
       _$body.removeClass('ajax-loading');
       // add body class for currently loaded content
       _$body.removeClass().addClass('path-'+sys_path.replace(/\//g, '-'));
+
       // id node add a generic path-node class to body
       m = sys_path.match(/^\/?(edlp\/node\/\d+)$/g);
       if(m){
@@ -112,10 +116,20 @@ edlp_vars = {
       }
       _$ajaxLinks.removeClass('is-active');
       $link.removeClass('ajax-loading').addClass('is-active');
+
       initScrollbars();
+      console.log(sys_path);
+      if(sys_path == "productions"){
+        window.requestAnimationFrame(initProductions);
+      }
+
     };
 
-    // corpus
+    //   ___
+    //  / __|___ _ _ _ __ _  _ ___
+    // | (__/ _ \ '_| '_ \ || (_-<
+    //  \___\___/_| | .__/\_,_/__/
+    //              |_|
     function onCorpusMapReady(e){
       console.log('theme : onCorpusReady');
       _$corpus_map = $('canvas#corpus-map');
@@ -125,7 +139,34 @@ edlp_vars = {
       });
     }
 
-    //modals
+    //  ___             _         _   _
+    // | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
+    // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
+    // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
+    function initProductions(){
+      console.log('theme : initProductions');
+      var $grid = $('.row', _$content_container).masonry({
+        itemSelector:'.col',
+        columnWidth:'.col-2'
+      });
+
+      // layout Masonry after each image loads
+      $grid.imagesLoaded().progress( function() {
+        $grid.masonry('layout');
+      });
+      // var $grid = $('.row', _$content_container).imagesLoaded( function() {
+      //   // init Masonry after all images have loaded
+      //   $grid.masonry({
+      //     itemSelector:'.col',
+      //     columnWidth:'.col-2'
+      //   });
+      // });
+    };
+
+    //  __  __         _      _
+    // |  \/  |___  __| |__ _| |___
+    // | |\/| / _ \/ _` / _` | (_-<
+    // |_|  |_\___/\__,_\__,_|_/__/
     function closeAllModals(){
       console.log('theme : closeAllModals');
       // TODO: animate the remove
@@ -136,8 +177,7 @@ edlp_vars = {
     };
 
     init();
-  }
-
+  } // end EdlpTheme()
 
   $(document).ready(function($) {
     var edlptheme = new EdlpTheme();

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -53,7 +53,7 @@ a:focus {
     .med-col-1:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-1 {
     padding-left: 0em;
     padding-right: 1em;
@@ -92,7 +92,7 @@ a:focus {
     .med-col-2:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-2 {
     padding-left: 0em;
     padding-right: 1em;
@@ -131,7 +131,7 @@ a:focus {
     .med-col-3:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-3 {
     padding-left: 0em;
     padding-right: 1em;
@@ -170,7 +170,7 @@ a:focus {
     .med-col-4:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-4 {
     padding-left: 0em;
     padding-right: 1em;
@@ -209,7 +209,7 @@ a:focus {
     .med-col-5:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-5 {
     padding-left: 0em;
     padding-right: 1em;
@@ -248,7 +248,7 @@ a:focus {
     .med-col-6:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-6 {
     padding-left: 0em;
     padding-right: 1em;
@@ -287,7 +287,7 @@ a:focus {
     .med-col-7:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-7 {
     padding-left: 0em;
     padding-right: 1em;
@@ -326,7 +326,7 @@ a:focus {
     .med-col-8:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-8 {
     padding-left: 0em;
     padding-right: 1em;
@@ -365,7 +365,7 @@ a:focus {
     .med-col-9:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-9 {
     padding-left: 0em;
     padding-right: 1em;
@@ -404,7 +404,7 @@ a:focus {
     .med-col-10:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-10 {
     padding-left: 0em;
     padding-right: 1em;
@@ -443,7 +443,7 @@ a:focus {
     .med-col-11:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-11 {
     padding-left: 0em;
     padding-right: 1em;
@@ -482,7 +482,7 @@ a:focus {
     .med-col-12:last-child {
       padding-right: 0; } }
 
-@media only screen and (min-width: 1081px) and (max-width: 1900px) {
+@media only screen and (min-width: 1081px) {
   .large-col-12 {
     padding-left: 0em;
     padding-right: 1em;
@@ -1232,10 +1232,11 @@ main[role="main"] .layout-content {
     height: 100%;
     overflow: hidden; }
     main[role="main"] .layout-content .row .col {
-      pointer-events: all;
-      max-height: 100%;
+      pointer-events: none;
+      height: 100%;
       position: relative; }
       main[role="main"] .layout-content .row .col > .wrapper {
+        pointer-events: all;
         position: relative;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
@@ -1279,7 +1280,7 @@ body.ajax-loading main[role="main"]:before {
   background-position: center;
   border-radius: 30px; }
 
-body.path-agenda main .col, body.path-agenda main .col > .wrapper {
+body.path-agenda main .col > .wrapper {
   height: 100%; }
 
 #agenda {
@@ -1304,6 +1305,42 @@ body.path-agenda main .col, body.path-agenda main .col > .wrapper {
     font-weight: normal;
     text-transform: uppercase; }
 
+body.path-productions .layout-content .row {
+  white-space: normal; }
+  body.path-productions .layout-content .row .col {
+    height: auto; }
+    body.path-productions .layout-content .row .col.col-2:last-child {
+      padding-left: 0em;
+      padding-right: 1em; }
+    body.path-productions .layout-content .row .col > .wrapper {
+      margin-bottom: 1em;
+      padding: 0; }
+      body.path-productions .layout-content .row .col > .wrapper > * {
+        padding: 0; }
+      body.path-productions .layout-content .row .col > .wrapper article.node .field--name-field-visuel a, body.path-productions .layout-content .row .col > .wrapper article.node .field--name-field-visuel img {
+        display: block;
+        width: 100%;
+        height: auto; }
+      body.path-productions .layout-content .row .col > .wrapper article.node header {
+        background-color: rgba(255, 255, 255, 0.95);
+        padding: 0.5em 1em; }
+        body.path-productions .layout-content .row .col > .wrapper article.node header h2.node-title {
+          margin: 0; }
+        body.path-productions .layout-content .row .col > .wrapper article.node header p {
+          margin: 0; }
+      body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-image-2-columns header {
+        position: absolute;
+        bottom: 0;
+        left: 0; }
+        body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-image-2-columns header h2.node-title {
+          font-size: 1.6em;
+          font-weight: 500; }
+      body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-image-1-columns h2.node-title {
+        font-size: 1.2em;
+        font-weight: 500; }
+      body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-text-1-column {
+        padding: 0 1em; }
+
 footer {
   display: table;
   padding: 0 0 0.5em 0; }

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -13,6 +13,9 @@
       _$body.on('corpus-map-ready', onCorpusMapReady);
       initScrollbars();
       initAjaxLinks();
+      if (_$body.is('.path-productions')) {
+        initProductions();
+      }
     };
 
     //  ___             _ _ ___
@@ -82,6 +85,7 @@
       _$body.removeClass('ajax-loading');
       // add body class for currently loaded content
       _$body.removeClass().addClass('path-'+sys_path.replace(/\//g, '-'));
+
       // id node add a generic path-node class to body
       m = sys_path.match(/^\/?(edlp\/node\/\d+)$/g);
       if(m){
@@ -89,10 +93,20 @@
       }
       _$ajaxLinks.removeClass('is-active');
       $link.removeClass('ajax-loading').addClass('is-active');
+
       initScrollbars();
+      console.log(sys_path);
+      if(sys_path == "productions"){
+        window.requestAnimationFrame(initProductions);
+      }
+
     };
 
-    // corpus
+    //   ___
+    //  / __|___ _ _ _ __ _  _ ___
+    // | (__/ _ \ '_| '_ \ || (_-<
+    //  \___\___/_| | .__/\_,_/__/
+    //              |_|
     function onCorpusMapReady(e){
       console.log('theme : onCorpusReady');
       _$corpus_map = $('canvas#corpus-map');
@@ -102,7 +116,34 @@
       });
     }
 
-    //modals
+    //  ___             _         _   _
+    // | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
+    // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
+    // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
+    function initProductions(){
+      console.log('theme : initProductions');
+      var $grid = $('.row', _$content_container).masonry({
+        itemSelector:'.col',
+        columnWidth:'.col-2'
+      });
+
+      // layout Masonry after each image loads
+      $grid.imagesLoaded().progress( function() {
+        $grid.masonry('layout');
+      });
+      // var $grid = $('.row', _$content_container).imagesLoaded( function() {
+      //   // init Masonry after all images have loaded
+      //   $grid.masonry({
+      //     itemSelector:'.col',
+      //     columnWidth:'.col-2'
+      //   });
+      // });
+    };
+
+    //  __  __         _      _
+    // |  \/  |___  __| |__ _| |___
+    // | |\/| / _ \/ _` / _` | (_-<
+    // |_|  |_\___/\__,_\__,_|_/__/
     function closeAllModals(){
       console.log('theme : closeAllModals');
       // TODO: animate the remove
@@ -113,8 +154,7 @@
     };
 
     init();
-  }
-
+  } // end EdlpTheme()
 
   $(document).ready(function($) {
     var edlptheme = new EdlpTheme();

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -116,10 +116,11 @@ main[role="main"]{
       height:100%;
       overflow: hidden;
       .col{
-        pointer-events:all;
-        max-height: 100%;
+        pointer-events: none;
+        height: 100%;
         position: relative;
         &>.wrapper{
+          pointer-events:all;
           position: relative;
           box-sizing: border-box;
           border-top: 1px solid red;
@@ -162,8 +163,26 @@ main[role="main"]{
     border-radius: $s/2;
   }
 }
+
+
+ //    _    _            _  _         _
+ //   /_\  (_)__ ___ __ | \| |___  __| |___
+ //  / _ \ | / _` \ \ / | .` / _ \/ _` / -_)
+ // /_/ \_\/ \__,_/_\_\ |_|\_\___/\__,_\___|
+ //      |__/
+// body.path-edlp-node main{
+//   main .col>.wrapper, .edlp-ajax-node{
+//     height: 100%;
+//   }
+// }
+
+//    _                    _
+//   /_\  __ _ ___ _ _  __| |__ _
+//  / _ \/ _` / -_) ' \/ _` / _` |
+// /_/ \_\__, \___|_||_\__,_\__,_|
+//       |___/
 body.path-agenda main .col{
-  &, &>.wrapper{
+  &>.wrapper{
     height:100%;
   }
 }
@@ -192,8 +211,71 @@ body.path-agenda main .col{
   }
 }
 
-// Footer
 
+//  ___             _         _   _
+// | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
+// |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
+// |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
+body.path-productions{
+  .layout-content .row{
+    white-space: normal;
+    .col{
+      height:auto;
+      &.col-2:last-child{
+        padding-left: 0em;
+        padding-right: 1em;
+      }
+      >.wrapper{
+        margin-bottom: 1em;
+        padding:0;
+        >*{
+          padding:0;
+        }
+
+        article.node{
+          .field--name-field-visuel{
+            a,img{
+              display: block;
+              width: 100%; height:auto;
+            }
+          }
+          header{
+            background-color: rgba(255,255,255,0.95);
+            padding:0.5em 1em;
+            h2.node-title{
+              margin:0;
+            }
+            p{margin: 0;}
+          }
+
+          &.node--view-mode-image-2-columns{
+            header{
+              position: absolute;
+              bottom: 0; left:0;
+              h2.node-title{
+                font-size: 1.6em;
+                font-weight: 500;
+              }
+            }
+          }
+          &.node--view-mode-image-1-columns{
+            h2.node-title{
+              font-size: 1.2em;
+              font-weight: 500;
+            }
+          }
+          &.node--view-mode-text-1-column{
+            padding:0 1em;
+          }
+        }
+      }
+    }
+  }
+}
+//  ___         _
+// | __|__  ___| |_ ___ _ _
+// | _/ _ \/ _ \  _/ -_) '_|
+// |_|\___/\___/\__\___|_|
 @mixin oblique-list {
   display: inline-block;
   position: relative;

sites/all/themes/custom/edlptheme/assets/styles/base/_grid.scss

@@ -5,7 +5,7 @@ $default_sum: 12;
 
 $small-bp:768px;
 $med-bp:1080px;
-$large-bp:1900px;
+// $large-bp:1900px;
 
 @mixin row() {
   font-size: 0;
@@ -59,7 +59,7 @@ $large-bp:1900px;
 
   // large
   .large-col-#{$c} {
-    @media only screen and (min-width: $med-bp+1) and (max-width: $large-bp) {
+    @media only screen and (min-width: $med-bp+1) {
       @include col($c);
     }
   }

sites/all/themes/custom/edlptheme/assets/styles/base/_shared_variables.scss

@@ -1,19 +1,19 @@
-$e_col_130: rgb(126, 8, 104);
-$e_col_121: rgb(58, 51, 182);
-$e_col_134: rgb(43, 143, 47);
-$e_col_125: rgb(44, 159, 87);
-$e_col_119: rgb(196, 137, 120);
-$e_col_132: rgb(82, 112, 187);
-$e_col_122: rgb(251, 84, 211);
-$e_col_129: rgb(224, 116, 131);
-$e_col_120: rgb(101, 88, 69);
-$e_col_118: rgb(14, 113, 33);
-$e_col_127: rgb(218, 189, 66);
-$e_col_133: rgb(3, 153, 187);
-$e_col_128: rgb(57, 154, 28);
-$e_col_124: rgb(112, 133, 64);
-$e_col_116: rgb(25, 27, 255);
-$e_col_117: rgb(39, 157, 132);
-$e_col_131: rgb(82, 25, 171);
-$e_col_126: rgb(212, 156, 182);
-$e_col_123: rgb(73, 119, 21);
+$e_col_130: rgb(126, 8, 104);
+$e_col_121: rgb(58, 51, 182);
+$e_col_134: rgb(43, 143, 47);
+$e_col_125: rgb(44, 159, 87);
+$e_col_119: rgb(196, 137, 120);
+$e_col_132: rgb(82, 112, 187);
+$e_col_122: rgb(251, 84, 211);
+$e_col_129: rgb(224, 116, 131);
+$e_col_120: rgb(101, 88, 69);
+$e_col_118: rgb(14, 113, 33);
+$e_col_127: rgb(218, 189, 66);
+$e_col_133: rgb(3, 153, 187);
+$e_col_128: rgb(57, 154, 28);
+$e_col_124: rgb(112, 133, 64);
+$e_col_116: rgb(25, 27, 255);
+$e_col_117: rgb(39, 157, 132);
+$e_col_131: rgb(82, 25, 171);
+$e_col_126: rgb(212, 156, 182);
+$e_col_123: rgb(73, 119, 21);

sites/all/themes/custom/edlptheme/bower.json

@@ -16,6 +16,8 @@
   "dependencies": {
     "history.js": "latest",
     "jquery.hotkeys": "latest",
-    "overlayScrollbars": "latest"
+    "overlayScrollbars": "latest",
+    "masonry-layout": "latest",
+    "imagesloaded": "latest"
   }
 }

sites/all/themes/custom/edlptheme/edlptheme.libraries.yml

@@ -12,6 +12,8 @@ global-js:
     assets/dist/bower/jquery.history.js: { scope: footer }
     assets/dist/bower/jquery.hotkeys.js: { scope: footer }
     assets/dist/bower/jquery.overlayScrollbars.min.js: { scope: footer }
+    assets/dist/bower/imagesloaded.pkgd.min.js: { scope: footer }
+    assets/dist/bower/masonry.pkgd.min.js: { scope: footer }
     assets/dist/scripts/main.min.js: { scope: footer }
   dependencies:
     - core/drupal

sites/all/themes/custom/edlptheme/edlptheme.theme

@@ -24,3 +24,21 @@ function edlptheme_form_user_login_form_alter(&$form, FormStateInterface $form_s
   $form['pass']['#attributes']['placeholder'] = (string) $form['pass']['#title'];
   unset($form['pass']['#title']);
 }
+
+function edlptheme_preprocess_edlp_productions(&$vars){
+  foreach($vars['nodes'] as &$node){
+    switch($node['vm']){
+      case "image_2_columns":
+        $cols = 4;
+        break;
+      case "image_1_columns":
+        $cols = 2;
+        break;
+      case "text_1_column":
+        $cols = 2;
+        break;
+    };
+    $node['cols'] = $cols;
+  }
+  // dpm($vars);
+}

sites/all/themes/custom/edlptheme/gulpfile.js

@@ -86,15 +86,23 @@ gulp.task('bower', function() {
         "history.js":{
           "main":"./scripts/bundled/html4+html5/jquery.history.js"
         },
-        "jquery":{
-          "ignore":true
-        },
         "overlayScrollbars":{
           "main":[
             "./js/jquery.overlayScrollbars.min.js",
             "./css/OverlayScrollbars.min.css"
           ]
-        }
+        },
+        "masonry-layout":{
+          "main":"./dist/masonry.pkgd.min.js"
+        },
+        "imagesloaded":{
+          "main":"./imagesloaded.pkgd.min.js"
+        },
+        "jquery":{"ignore":true},
+        "ev-emitter":{"ignore":true},
+        "fizzy-ui-utils":{"ignore":true},
+        "get-size":{"ignore":true},
+        "outlayer":{"ignore":true},
       }
     }))
       .pipe(gulp.dest('./assets/dist/bower/'));

sites/all/themes/custom/edlptheme/templates/content/edlp-ajax-node.html.twig

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col small-col-12 med-col-12 large-col-8 ">
+  <div class="col small-col-12 med-col-3 large-col-3">
     <div class="wrapper">
       {{ node }}
     </div>

sites/all/themes/custom/edlptheme/templates/content/edlp-productions.html.twig

@@ -0,0 +1,9 @@
+<div class="row">
+  {% for node in nodes %}
+    <div class="col col-{{ node.cols }}">
+      <div class="wrapper">
+        {{ node.build }}
+      </div>
+    </div>
+  {% endfor %}
+</div>

sites/all/themes/custom/edlptheme/templates/content/node--page--image-1-columns.html.twig

@@ -0,0 +1,103 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: Themed creation date field.
+ * - author_name: Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+    'clearfix',
+  ]
+%}
+{{ attach_library('classy/node') }}
+<article{{ attributes.addClass(classes) }}>
+
+  <div{{ content_attributes }}>
+    {{ content.field_visuel }}
+  </div>
+  <header>
+    {{ title_prefix }}
+    {% if not page %}
+      <h2{{ title_attributes.addClass('node-title') }}>
+        <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+      </h2>
+    {% endif %}
+    {{ title_suffix }}
+    {{ content|without('field_visuel') }}
+  </header>
+
+</article>

sites/all/themes/custom/edlptheme/templates/content/node--page--image-2-columns.html.twig

@@ -0,0 +1,103 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: Themed creation date field.
+ * - author_name: Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+    'clearfix',
+  ]
+%}
+{{ attach_library('classy/node') }}
+<article{{ attributes.addClass(classes) }}>
+
+  <div{{ content_attributes }}>
+    {{ content.field_visuel }}
+  </div>
+  <header>
+    {{ title_prefix }}
+    {% if not page %}
+      <h2{{ title_attributes.addClass('node-title') }}>
+        <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+      </h2>
+    {% endif %}
+    {{ title_suffix }}
+    {{ content|without('field_visuel') }}
+  </header>
+
+</article>

sites/default/config/sync/block.block.messages.yml

@@ -9,7 +9,7 @@ dependencies:
 id: messages
 theme: edlptheme
 region: content
-weight: -3
+weight: -4
 provider: null
 plugin: system_messages_block
 settings:

sites/default/config/sync/block.block.tabs.yml

@@ -0,0 +1,41 @@
+uuid: 70556079-1327-4a07-9f28-5f14af34ff00
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+    - user
+  theme:
+    - edlptheme
+id: tabs
+theme: edlptheme
+region: content
+weight: -3
+provider: null
+plugin: local_tasks_block
+settings:
+  id: local_tasks_block
+  label: Tabs
+  provider: core
+  label_display: '0'
+  primary: true
+  secondary: true
+visibility:
+  node_type:
+    id: node_type
+    bundles:
+      enregistrement: enregistrement
+      evenement: evenement
+      page: page
+    negate: false
+    context_mapping:
+      node: '@node.node_route_context:node'
+  user_role:
+    id: user_role
+    roles:
+      collectionneur: collectionneur
+      admin: admin
+      root: root
+    negate: false
+    context_mapping:
+      user: '@user.current_user_context:current_user'

sites/default/config/sync/core.entity_view_display.node.evenement.default.yml

@@ -10,7 +10,6 @@ dependencies:
     - node.type.evenement
   module:
     - datetime_range
-    - options
     - text
     - user
 id: node.evenement.default
@@ -26,34 +25,28 @@ content:
     third_party_settings: {  }
     region: content
   field_date:
-    weight: 5
-    label: above
+    weight: 1
+    label: hidden
     settings:
-      separator: '-'
-      format_type: medium
       timezone_override: ''
+      format_type: long
+      separator: '-'
     third_party_settings: {  }
     type: daterange_default
     region: content
   field_page_liee:
     weight: 3
-    label: above
+    label: hidden
     settings:
       link: true
     third_party_settings: {  }
     type: entity_reference_label
     region: content
-  field_workflow_generic:
-    weight: 4
-    label: above
-    settings: {  }
-    third_party_settings: {  }
-    type: list_default
-    region: content
   links:
     weight: 0
     region: content
     settings: {  }
     third_party_settings: {  }
 hidden:
+  field_workflow_generic: true
   langcode: true

sites/default/config/sync/core.entity_view_display.node.page.image_1_columns.yml

@@ -0,0 +1,47 @@
+uuid: 20481275-9dd1-49ce-9103-543636c6cde2
+langcode: fr
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.image_1_columns
+    - field.field.node.page.body
+    - field.field.node.page.field_page_type
+    - field.field.node.page.field_son
+    - field.field.node.page.field_view_mode
+    - field.field.node.page.field_visuel
+    - field.field.node.page.field_workflow_generic
+    - image.style.large
+    - node.type.page
+  module:
+    - image
+    - text
+    - user
+id: node.page.image_1_columns
+targetEntityType: node
+bundle: page
+mode: image_1_columns
+content:
+  body:
+    label: hidden
+    type: text_summary_or_trimmed
+    weight: 1
+    settings:
+      trim_length: 100
+    third_party_settings: {  }
+    region: content
+  field_visuel:
+    weight: 0
+    label: hidden
+    settings:
+      image_style: large
+      image_link: content
+    third_party_settings: {  }
+    type: image
+    region: content
+hidden:
+  field_page_type: true
+  field_son: true
+  field_view_mode: true
+  field_workflow_generic: true
+  langcode: true
+  links: true

sites/default/config/sync/core.entity_view_display.node.page.image_2_columns.yml

@@ -0,0 +1,47 @@
+uuid: e803e246-1f0d-4812-a241-9a512a983b0a
+langcode: fr
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.image_2_columns
+    - field.field.node.page.body
+    - field.field.node.page.field_page_type
+    - field.field.node.page.field_son
+    - field.field.node.page.field_view_mode
+    - field.field.node.page.field_visuel
+    - field.field.node.page.field_workflow_generic
+    - image.style.large
+    - node.type.page
+  module:
+    - image
+    - text
+    - user
+id: node.page.image_2_columns
+targetEntityType: node
+bundle: page
+mode: image_2_columns
+content:
+  body:
+    label: hidden
+    type: text_summary_or_trimmed
+    weight: 1
+    settings:
+      trim_length: 200
+    third_party_settings: {  }
+    region: content
+  field_visuel:
+    weight: 0
+    label: hidden
+    settings:
+      image_style: large
+      image_link: content
+    third_party_settings: {  }
+    type: image
+    region: content
+hidden:
+  field_page_type: true
+  field_son: true
+  field_view_mode: true
+  field_workflow_generic: true
+  langcode: true
+  links: true

sites/default/config/sync/core.entity_view_display.node.page.text_1_column.yml

@@ -0,0 +1,29 @@
+uuid: 1466b89d-530e-4d0f-ba73-8d9b4dbb8b09
+langcode: fr
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.text_1_column
+    - field.field.node.page.body
+    - field.field.node.page.field_page_type
+    - field.field.node.page.field_son
+    - field.field.node.page.field_view_mode
+    - field.field.node.page.field_visuel
+    - field.field.node.page.field_workflow_generic
+    - node.type.page
+  module:
+    - user
+id: node.page.text_1_column
+targetEntityType: node
+bundle: page
+mode: text_1_column
+content: {  }
+hidden:
+  body: true
+  field_page_type: true
+  field_son: true
+  field_view_mode: true
+  field_visuel: true
+  field_workflow_generic: true
+  langcode: true
+  links: true

sites/default/config/sync/core.entity_view_mode.node.image_1_columns.yml

@@ -0,0 +1,10 @@
+uuid: a6343175-4044-47b1-b535-b4c7dc76386f
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+id: node.image_1_columns
+label: 'Image 1 Column'
+targetEntityType: node
+cache: true

sites/default/config/sync/core.entity_view_mode.node.image_2_columns.yml

@@ -0,0 +1,10 @@
+uuid: 4745caec-c5f7-4d98-bd0c-c236c50e7c54
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+id: node.image_2_columns
+label: 'Image 2 Columns'
+targetEntityType: node
+cache: true

sites/default/config/sync/core.entity_view_mode.node.text_1_column.yml

@@ -0,0 +1,10 @@
+uuid: 2bb31429-b93f-4178-94de-c8f1e566184d
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+id: node.text_1_column
+label: 'Text 1 Column'
+targetEntityType: node
+cache: true

sites/default/config/sync/core.extension.yml

@@ -28,6 +28,7 @@ module:
   editor: 0
   edlp_admin: 0
   edlp_agenda: 0
+  edlp_ajax_node: 0
   edlp_corpus: 0
   edlp_fils: 0
   edlp_home: 0

sites/default/config/sync/field.field.node.page.field_visuel.yml

@@ -24,7 +24,7 @@ settings:
   max_resolution: ''
   min_resolution: ''
   alt_field: true
-  alt_field_required: true
+  alt_field_required: false
   title_field: false
   title_field_required: false
   default_image:

sites/default/config/sync/image.style.large.yml

@@ -5,13 +5,12 @@ dependencies: {  }
 _core:
   default_config_hash: J2n0RpFzS0-bgSyxjs6rSdgxB1rb-bTAgqywNx_964M
 name: large
-label: 'Large (480×480)'
+label: 'Large (800×450)'
 effects:
-  ddd73aa7-4bd6-4c85-b600-bdf2b1628d1d:
-    uuid: ddd73aa7-4bd6-4c85-b600-bdf2b1628d1d
-    id: image_scale
-    weight: 0
+  4ce08fdd-911f-42d3-a5ad-be7591d91894:
+    uuid: 4ce08fdd-911f-42d3-a5ad-be7591d91894
+    id: image_scale_and_crop
+    weight: 2
     data:
-      width: 480
-      height: 480
-      upscale: false
+      width: 800
+      height: 450

sites/default/config/sync/image.style.medium.yml

@@ -5,13 +5,13 @@ dependencies: {  }
 _core:
   default_config_hash: Y9NmnZHQq20ASSyTNA6JnwtWrJJiSajOehGDtmUFdM0
 name: medium
-label: 'Medium (220×220)'
+label: 'Medium (400×400)'
 effects:
   bddf0d06-42f9-4c75-a700-a33cafa25ea0:
     uuid: bddf0d06-42f9-4c75-a700-a33cafa25ea0
     id: image_scale
     weight: 0
     data:
-      width: 220
-      height: 220
+      width: 500
+      height: 500
       upscale: false