class type-media sur body et position block third

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5785,9 +5785,13 @@ content .page-node-type-ressource .type-les-projets-en-images.layout__region--to
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items {
   display: none;
 }
-.page-node-type-ressource.block-region-third .block-entity-fieldnodefield-liens,
-.page-node-type-ressource.block-region-third .block-entity-fieldnodefield-projets-liee,
-.page-node-type-ressource.block-region-third .block-entity-fieldnodefield-fichiers {
+
+body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefield-liens,
+body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefield-projets-liee,
+body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefield-fichiers,
+body.type-media-vidéos .block-region-third .block-entity-fieldnodefield-liens,
+body.type-media-vidéos .block-region-third .block-entity-fieldnodefield-projets-liee,
+body.type-media-vidéos .block-region-third .block-entity-fieldnodefield-fichiers {
   transform: translateY(-45.5rem);
 }
 

web/themes/custom/eql/eql.theme

@@ -11,23 +11,29 @@ use Drupal\Component\Utility\Html;
 use Drupal\Component\Transliteration\TransliterationInterface;
 use Drupal\taxonomy\Entity\Term;
 use Drupal\Core\Template\Attribute;
+use Drupal\node\NodeInterface;
+
 
 function eql_preprocess_html(&$variables) {
   $node = \Drupal::routeMatch()->getParameter('node');
-  if ($node){
-    $variables['attributes']['class'][] = 'node-type-' . $node->bundle();
-    $variables['attributes']['class'][] = 'node-id-' . $node->id();
-  }
-  if ($node instanceof NodeInterface) {
+
+  if ($node instanceof \Drupal\node\NodeInterface) {
     $variables['attributes']['class'][] = 'node-type-' . $node->bundle();
     $variables['attributes']['class'][] = 'node-id-' . $node->id();
 
-    // Pour les ressources : ajoute la classe de type de ressource
-    if ($node->bundle() === 'ressource' && $node->hasField('field_type_de_ressource')) {
-      foreach ($node->get('field_type_de_ressource')->referencedEntities() as $term) {
-        $label = $term->label();
-        $css_class = 'type-' . Html::getClass($label);
-        $variables['attributes']['class'][] = $css_class;
+    // Liste des champs à traiter pour générer des classes dynamiques
+    $fields_to_classify = [
+      'field_type_de_ressource' => 'type-',
+      'field_type_de_media'     => 'type-media-',
+    ];
+
+    foreach ($fields_to_classify as $field_name => $prefix) {
+      if ($node->hasField($field_name) && !$node->get($field_name)->isEmpty()) {
+        foreach ($node->get($field_name)->referencedEntities() as $term) {
+          $label = $term->label();
+          $css_class = $prefix . Html::cleanCssIdentifier(strtolower($label));
+          $variables['attributes']['class'][] = $css_class;
+        }
       }
     }
   }

web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss

@@ -1,161 +1,159 @@
 .carousel{display: none;}
 .page-node-type-ressource{
-
-        .type-les-projets-en-images.layout__region--top{
-            .block-region-top{
-            display: flex !important;
-            flex-direction: column;
-            margin-left: 11%;
-            @media screen and (min-width:1100px) {
-                display: flex;
+  .type-les-projets-en-images.layout__region--top{
+    .block-region-top{
+      display: flex !important;
+      flex-direction: column;
+      margin-left: 11%;
+      @media screen and (min-width:1100px) {
+          display: flex;
+      }
+      .block {
+        margin-left: 0;
+      }
+      .block-entity-fieldnodefield-images{
+        margin-top: 5rem;
+        padding: 0;
+        order: 7;
+        .carousel {
+            display: block;
+            max-width: 60vw;
+            margin: auto;
+            text-align: center;
+        
+            .main-image-container {
+              position: relative;
+            //   background: #e0f5ff;
+              height: 500px;
+              max-height: 500px;
+              overflow: hidden;
+              width: 100%;
+              object-fit: contain;
+        
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                transition: transform 0.3s ease-in-out;
+                border: none ;
+                // transition: opacity 0.4s ease-in-out; // à réactiver si fade souhaité
+                &.animate {
+                  transform: scale(1.02); // léger effet smooth sur changement
+                }
+              }
+        
+              .arrow {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                background: #00aaff;
+                border-radius: 50%;
+                padding: 5px 10px;
+                color: white;
+                cursor: pointer;
+                content
+        
+                &.left {
+                  left: 10px;
+                }
+        
+                &.right {
+                  right: 10px;
+                }
+              }
+                // #prevArrow{
+                //     &::before{
+                //     content:url("../images/pictos/fleche-droite-dans-rond.png");
+                //     display: block;
+                //     transform: scaleX(-1);
+                //     width: 50px;
+                // }
+                // }
+                // #nextArrow{
+                //     &::before{
+                //         content:url("../images/pictos/fleche-droite-dans-rond.png");
+                //         display: block;
+                //     }
+                // }
             }
-            .block {
-                margin-left: 0;
+        
+            .caption {
+              margin-top: 10px;
+              font-family: sans-serif;
             }
-            .block-entity-fieldnodefield-images{
-              margin-top: 5rem;
-                padding: 0;
-                order: 7;
-
-                .carousel {
-                    display: block;
-                    max-width: 60vw;
-                    margin: auto;
-                    text-align: center;
-                
-                    .main-image-container {
-                      position: relative;
-                    //   background: #e0f5ff;
-                      height: 500px;
-                      max-height: 500px;
-                      overflow: hidden;
-                      width: 100%;
-                      object-fit: contain;
-                
-                      img {
-                        width: 100%;
-                        height: 100%;
-                        object-fit: contain;
-                        transition: transform 0.3s ease-in-out;
-                        border: none ;
-                        // transition: opacity 0.4s ease-in-out; // à réactiver si fade souhaité
-                        &.animate {
-                          transform: scale(1.02); // léger effet smooth sur changement
-                        }
-                      }
-                
-                      .arrow {
-                        position: absolute;
-                        top: 50%;
-                        transform: translateY(-50%);
-                        background: #00aaff;
-                        border-radius: 50%;
-                        padding: 5px 10px;
-                        color: white;
-                        cursor: pointer;
-                        content
-                
-                        &.left {
-                          left: 10px;
-                        }
-                
-                        &.right {
-                          right: 10px;
-                        }
-                      }
-                        // #prevArrow{
-                        //     &::before{
-                        //     content:url("../images/pictos/fleche-droite-dans-rond.png");
-                        //     display: block;
-                        //     transform: scaleX(-1);
-                        //     width: 50px;
-                        // }
-                        // }
-                        // #nextArrow{
-                        //     &::before{
-                        //         content:url("../images/pictos/fleche-droite-dans-rond.png");
-                        //         display: block;
-                        //     }
-                        // }
-                    }
-                
-                    .caption {
-                      margin-top: 10px;
-                      font-family: sans-serif;
-                    }
-                
-                    .thumbnails-wrapper {
-                      position: relative;
-                      max-width: 100%;
-                      overflow: hidden;
-                      display: flex;
-                      align-items: center;
-                      justify-content: center;
-                
-                      .thumb-arrow {
-                        cursor: pointer;
-                        padding: 5px 10px;
-                        background: #00aaff;
-                        color: white;
-                        border-radius: 50%;
-                        user-select: none;
-                        z-index: 2;
-                        // font-weight: bold;
-                
-                        &.left {
-                          margin-right: 10px;
-                        }
-                
-                        &.right {
-                          margin-left: 10px;
-                        }
-                      }
-                
-                      .thumbnails {
-                        display: flex;
-                        gap: 10px;
-                        overflow-x: auto;
-                        scroll-behavior: smooth;
-                        max-width: 100%;
-                        padding: 10px 0;
-                        scrollbar-width: none; // Firefox
-                
-                        &::-webkit-scrollbar {
-                          display: none; // Chrome, Safari
-                        }
-                
-                        img {
-                          width: 60px;
-                          height: 60px;
-                          object-fit: cover;
-                          border: 2px solid transparent;
-                          cursor: pointer;
-                
-                          &.active {
-                            border-color: #00aaff;
-                          }
-                        }
-                      }
-                    }
-                  }
-                
-                  // Masquer les images Drupal originales (facultatif)
-                  .field__items {
-                    display: none;
+        
+            .thumbnails-wrapper {
+              position: relative;
+              max-width: 100%;
+              overflow: hidden;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+        
+              .thumb-arrow {
+                cursor: pointer;
+                padding: 5px 10px;
+                background: #00aaff;
+                color: white;
+                border-radius: 50%;
+                user-select: none;
+                z-index: 2;
+                // font-weight: bold;
+        
+                &.left {
+                  margin-right: 10px;
+                }
+        
+                &.right {
+                  margin-left: 10px;
+                }
+              }
+        
+              .thumbnails {
+                display: flex;
+                gap: 10px;
+                overflow-x: auto;
+                scroll-behavior: smooth;
+                max-width: 100%;
+                padding: 10px 0;
+                scrollbar-width: none; // Firefox
+        
+                &::-webkit-scrollbar {
+                  display: none; // Chrome, Safari
+                }
+        
+                img {
+                  width: 60px;
+                  height: 60px;
+                  object-fit: cover;
+                  border: 2px solid transparent;
+                  cursor: pointer;
+        
+                  &.active {
+                    border-color: #00aaff;
                   }
+                }
+              }
             }
-            
-            }
-
-            
         }
-
-        &.block-region-third{
-          .block-entity-fieldnodefield-liens,
-          .block-entity-fieldnodefield-projets-liee,
-          .block-entity-fieldnodefield-fichiers{
-            transform: translateY(-45.5rem);
-          }
-          
+        // Masquer les images Drupal originales (facultatif)
+        .field__items {
+          display: none;
         }
-}    
+      }
+    
+    }      
+  }
+
+}    
+body.type-media-reportage-photos,
+body.type-media-vidéos{
+  .block-region-third{
+    .block-entity-fieldnodefield-liens,
+    .block-entity-fieldnodefield-projets-liee,
+    .block-entity-fieldnodefield-fichiers{
+      transform: translateY(-45.5rem);
+    }
+} 
+  
+}