web/themes/custom/popsu_colloque/css/components/components.scss

@@ -0,0 +1,17 @@
+@import "admin/edit.scss";
+@import "admin/toolbar.scss";
+@import "admin/connect.scss";
+@import "header/header.scss";
+@import "header/sub_menu.scss";
+@import "forms/filter.scss";
+@import "hero.scss";
+@import "sidebar/rs.scss";
+@import "sidebar/role_inter.scss";
+@import "slides/flickity.scss";
+@import "slides/slides.scss";
+@import "thumbnails/thumbnails.scss";
+@import "ressources.scss";
+@import "btn/all_btn.scss";
+@import "footer/footer.scss";
+@import "leaflet/custom_leaflet.scss";
+@import "paragraph/paragraphs.scss";

web/themes/custom/popsu_colloque/css/components/paragraph/_media.scss

@@ -0,0 +1,5 @@
+.media{
+    .paragraph--type--images{
+        width: 100%;
+    }
+}

web/themes/custom/popsu_colloque/css/components/paragraph/paragraphs.scss

@@ -0,0 +1 @@
+@import "media.scss";

web/themes/custom/popsu_colloque/css/components/slides/slides.scss

@@ -41,7 +41,7 @@
         }
       }
       &.first{
-        span{
+        & > span{
           font-family: 'truenolight';
           position: absolute;
           top: -2.5rem;

web/themes/custom/popsu_colloque/css/components/thumbnails/thumbnails.scss

@@ -66,6 +66,9 @@ section{
     }
     .__media{
       padding: 0.5rem 0 0.5rem 0.5rem;
+      .__img{
+        width: 100px;
+      }
     }
     .__wrap{
       padding: 0.5rem;

web/themes/custom/popsu_colloque/css/index.scss

@@ -27,23 +27,8 @@
 @import "pages/publications.scss";
 
 // components
-@import "components/admin/edit.scss";
-@import "components/admin/toolbar.scss";
-@import "components/admin/connect.scss";
-@import "components/header/header.scss";
-@import "components/header/sub_menu.scss";
-@import "components/forms/filter.scss";
-@import "components/hero.scss";
-@import "components/sidebar/rs.scss";
-@import "components/sidebar/role_inter.scss";
-@import "components/slides/flickity.scss";
-@import "components/slides/slides.scss";
-@import "components/thumbnails/thumbnails.scss";
-@import "components/ressources.scss";
-@import "components/btn/all_btn.scss";
-@import "components/footer/footer.scss";
-@import "components/leaflet/custom_leaflet.scss";
-
+@import "components/components.scss";
+ 
 
 .no-flexbox .box { color: red; }
 .flexbox .box { color: green; }

web/themes/custom/popsu_colloque/template/fields/field--node--field-media.html.twig

@@ -0,0 +1,72 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div class="medias">
+      {% for item in items %}
+        <div{{ item.attributes }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      {{ item.content }}
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div>
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

web/themes/custom/popsu_colloque/template/node/node--page-d-accueil.html.twig

@@ -96,17 +96,24 @@
 
   </div>
 
+  {% if content.field_media %}
+    
     <div class="col-12 px-0 col-md-12 col-lg-8">
-      <div class="video">
-        {{content.field_le_direct}}
-      </div>
+        {{content.field_media}}
     </div>
 
+  {% endif %}
+
+  {% if content.field_lien_live %}
+
     <div class="col-12 px-0 col-md-12 col-lg-8">
       <div class="link_live btn">
         {{content.field_lien_live}}
       </div>
     </div>
+
+  {% endif %}
+
   </article>
 
 </article>