add lightbox

composer.json

@@ -24,6 +24,7 @@
         "drupal/core-recommended": "^8.8",
         "drupal/entity_browser_enhanced": "^1.0",
         "drupal/field_group": "^3.0",
+        "drupal/field_pager": "^2.0@beta",
         "drupal/field_token_value": "^1.0",
         "drupal/geocoder": "^3.7",
         "drupal/geofield": "^1.15",
@@ -48,6 +49,7 @@
         "drupal/transliterate_filenames": "^1.4",
         "drupal/varbase_total_control": "^6.11",
         "drupal/video_embed_field": "^2.4",
+        "drupal/views_infinite_scroll": "^1.7",
         "drupal/views_url_path_arguments": "^1.1",
         "drush/drush": "^10.2",
         "geocoder-php/chain-provider": "^4.2",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "c99b8032f0c1003b6bc4c819b9f0afb2",
+    "content-hash": "a227b81fa65a8149cb57650099cde6cf",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -111,12 +111,12 @@
             "version": "v1.5.0",
             "source": {
                 "type": "git",
-                "url": "https://github.com/clue/php-stream-filter.git",
+                "url": "https://github.com/clue/stream-filter.git",
                 "reference": "aeb7d8ea49c7963d3b581378955dbf5bc49aa320"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/clue/php-stream-filter/zipball/aeb7d8ea49c7963d3b581378955dbf5bc49aa320",
+                "url": "https://api.github.com/repos/clue/stream-filter/zipball/aeb7d8ea49c7963d3b581378955dbf5bc49aa320",
                 "reference": "aeb7d8ea49c7963d3b581378955dbf5bc49aa320",
                 "shasum": ""
             },
@@ -2874,6 +2874,50 @@
                 "issues": "https://www.drupal.org/project/issues/field_group"
             }
         },
+        {
+            "name": "drupal/field_pager",
+            "version": "2.0.0-beta1",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/field_pager.git",
+                "reference": "2.0.0-beta1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/field_pager-2.0.0-beta1.zip",
+                "reference": "2.0.0-beta1",
+                "shasum": "a00f784e2cd666d8ae35421a62afb3e6c587a9b5"
+            },
+            "require": {
+                "drupal/core": "^8 || ^9"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "2.0.0-beta1",
+                    "datestamp": "1601500230",
+                    "security-coverage": {
+                        "status": "not-covered",
+                        "message": "Project has not opted into security advisory coverage!"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "NuWans",
+                    "homepage": "https://www.drupal.org/user/3250178"
+                }
+            ],
+            "description": "Field Pager (field_pager) To use fields as multiple pages",
+            "homepage": "https://www.drupal.org/project/field_pager",
+            "support": {
+                "source": "https://git.drupalcode.org/project/field_pager"
+            }
+        },
         {
             "name": "drupal/field_token_value",
             "version": "1.0.0",
@@ -5067,6 +5111,62 @@
                 "source": "https://git.drupalcode.org/project/video_embed_field"
             }
         },
+        {
+            "name": "drupal/views_infinite_scroll",
+            "version": "1.7.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/views_infinite_scroll.git",
+                "reference": "8.x-1.7"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/views_infinite_scroll-8.x-1.7.zip",
+                "reference": "8.x-1.7",
+                "shasum": "42ff1b7c835a2cb0755425999bb8251f19c62fac"
+            },
+            "require": {
+                "drupal/core": "^8.8 || ^9"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "8.x-1.7",
+                    "datestamp": "1584489857",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "Bobík",
+                    "homepage": "https://www.drupal.org/user/123612"
+                },
+                {
+                    "name": "Neslee Canil Pinto",
+                    "homepage": "https://www.drupal.org/user/3580850"
+                },
+                {
+                    "name": "Remon",
+                    "homepage": "https://www.drupal.org/user/143827"
+                },
+                {
+                    "name": "Sam152",
+                    "homepage": "https://www.drupal.org/user/1485048"
+                }
+            ],
+            "description": "A pager which allows an infinite scroll effect for views.",
+            "homepage": "https://www.drupal.org/project/views_infinite_scroll",
+            "support": {
+                "source": "https://git.drupalcode.org/project/views_infinite_scroll"
+            }
+        },
         {
             "name": "drupal/views_url_path_arguments",
             "version": "1.1.0",
@@ -9858,12 +9958,12 @@
             "version": "1.9.1",
             "source": {
                 "type": "git",
-                "url": "https://github.com/webmozart/assert.git",
+                "url": "https://github.com/webmozarts/assert.git",
                 "reference": "bafc69caeb4d49c39fd0779086c03a3738cbb389"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/webmozart/assert/zipball/bafc69caeb4d49c39fd0779086c03a3738cbb389",
+                "url": "https://api.github.com/repos/webmozarts/assert/zipball/bafc69caeb4d49c39fd0779086c03a3738cbb389",
                 "reference": "bafc69caeb4d49c39fd0779086c03a3738cbb389",
                 "shasum": ""
             },
@@ -10011,7 +10111,9 @@
     "packages-dev": [],
     "aliases": [],
     "minimum-stability": "dev",
-    "stability-flags": [],
+    "stability-flags": {
+        "drupal/field_pager": 10
+    },
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": [],

web/sites/development.services.yml

@@ -4,6 +4,9 @@
 # 'example.settings.local.php' file, which sits next to this file.
 parameters:
   http.response.debug_cacheability_headers: true
+  twig.config:
+    debug: true
+    auto_reload: true
 services:
   cache.backend.null:
     class: Drupal\Core\Cache\NullBackendFactory

web/themes/custom/popsu_colloque/css-compiled/lightbox.css

@@ -0,0 +1,204 @@
+body.lb-disable-scrolling {
+  overflow: hidden;
+}
+
+.lightboxOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background-color: black;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+  opacity: 0.8;
+  display: none;
+}
+
+.lightbox {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  text-align: center;
+  line-height: 0;
+  font-weight: normal;
+  outline: none;
+}
+
+.lightbox .lb-image {
+  display: block;
+  height: auto;
+  max-width: inherit;
+  max-height: none;
+  border-radius: 3px;
+
+  /* Image border */
+  border: 4px solid white;
+}
+
+.lightbox a img {
+  border: none;
+}
+
+.lb-outerContainer {
+  position: relative;
+  *zoom: 1;
+  width: 250px;
+  height: 250px;
+  margin: 0 auto;
+  border-radius: 4px;
+
+  /* Background color behind image.
+     This is visible during transitions. */
+  background-color: white;
+}
+
+.lb-outerContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.lb-loader {
+  position: absolute;
+  top: 43%;
+  left: 0;
+  height: 25%;
+  width: 100%;
+  text-align: center;
+  line-height: 0;
+}
+
+.lb-cancel {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0 auto;
+  background: url(../images/loading.gif) no-repeat;
+}
+
+.lb-nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+
+.lb-container > .nav {
+  left: 0;
+}
+
+.lb-nav a {
+  outline: none;
+  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
+}
+
+.lb-prev, .lb-next {
+  height: 100%;
+  cursor: pointer;
+  display: block;
+}
+
+.lb-nav a.lb-prev {
+  width: 34%;
+  left: 0;
+  float: left;
+  background: url(../images/prev.png) left 48% no-repeat;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition: opacity 0.6s;
+  -moz-transition: opacity 0.6s;
+  -o-transition: opacity 0.6s;
+  transition: opacity 0.6s;
+}
+
+.lb-nav a.lb-prev:hover {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+.lb-nav a.lb-next {
+  width: 64%;
+  right: 0;
+  float: right;
+  background: url(../images/next.png) right 48% no-repeat;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition: opacity 0.6s;
+  -moz-transition: opacity 0.6s;
+  -o-transition: opacity 0.6s;
+  transition: opacity 0.6s;
+}
+
+.lb-nav a.lb-next:hover {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+.lb-dataContainer {
+  margin: 0 auto;
+  padding-top: 5px;
+  *zoom: 1;
+  width: 100%;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.lb-dataContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.lb-data {
+  padding: 0 4px;
+  color: #ccc;
+}
+
+.lb-data .lb-details {
+  width: 85%;
+  float: left;
+  text-align: left;
+  line-height: 1.1em;
+}
+
+.lb-data .lb-caption {
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 1em;
+}
+
+.lb-data .lb-caption a {
+  color: #4ae;
+}
+
+.lb-data .lb-number {
+  display: block;
+  clear: left;
+  padding-bottom: 1em;
+  font-size: 12px;
+  color: #999999;
+}
+
+.lb-data .lb-close {
+  display: block;
+  float: right;
+  width: 30px;
+  height: 30px;
+  background: url(../images/close.png) top right no-repeat;
+  text-align: right;
+  outline: none;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+  opacity: 0.7;
+  -webkit-transition: opacity 0.2s;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+
+.lb-data .lb-close:hover {
+  cursor: pointer;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}

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

@@ -1,5 +1,19 @@
-.media{
+.medias{
     .paragraph--type--images{
         width: 100%;
     }
+    .paragraph--type--video{
+        margin: 4rem 0;
+        & > div{
+            font-family: dukefill;
+            font-size: 2rem;
+            line-height: normal;
+            text-align: center;
+            margin-bottom: 1rem;
+            text-transform: uppercase;
+            @media screen and (min-width: 768px) {
+                text-align: left;   
+            }
+        }
+    }
 }

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

@@ -67,7 +67,7 @@
     }
   }
 }
-
+#block-views-block-gallerie-block-1,
 #block-views-block-slide-programme-block-1,
 #block-views-block-slide-programme-node-intervenant-block-1,
 #block-views-block-dernieres-publications-block-1{

web/themes/custom/popsu_colloque/css/pages/front.scss

@@ -81,6 +81,75 @@ header{
   }
 }
 
+#block-views-block-gallerie-block-1{
+  section:not(.wrap_head){
+    display: flex;
+    flex-wrap: wrap;
+    margin:0 -1rem!important;
+    figure{
+      padding: 1rem;
+      margin: 0;
+      width: 100%;
+      max-height: 400px;
+      @media screen and (min-width: 768px) {
+        width: calc( 100% / 3);
+        max-height: 300px;
+      }
+      @media screen and (min-width: 1024px) {
+        width: calc( 100% / 6);
+        max-height:200px;
+      }
+      img{
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+  .pager{
+    text-align: center;
+    margin: 2rem;
+    .wrap--btn{
+      a{
+        @include shadow;
+        background: white;
+        width: fit-content;
+        margin: auto;
+        padding: 0.5rem 1rem;  
+        font-size: 12px;
+        display: block;
+        font-family: 'truenobold';        
+        color: $color2;
+      }
+    }
+  }
+
+}
+
+.lightbox{
+  position: fixed!important;
+  top: 50%!important;
+  transform: translateY(-50%)!important;
+ }
+
+.lb-dataContainer{
+  width: 100%;
+  background:white;
+  .lb-details{
+    width: 100%;
+  }
+  span{
+    display: block;
+    text-align: center;
+    color: black;
+  }
+  .lb-number{
+    font-family: 'truenobold';
+    padding-bottom:0;
+  }
+}
+
+#block-views-block-gallerie-block-1,
 #block-views-block-slide-programme-block-1,
 #block-views-block-dernieres-publications-block-1{
   margin: 2rem 0;

web/themes/custom/popsu_colloque/js/script.js

@@ -393,7 +393,68 @@ function scrollReaveal(){
   ScrollReveal().reveal(nodes.node_moment, showUp);
 }
 
-  $( document ).ready(function() {
+function pagination(){
+
+  const $next = $('#block-views-block-gallerie-block-1 .pager a');
+  
+  $next.on("click",function(event){
+      event.preventDefault();    
+  
+      const $url = $(this).attr('href');
+      var PageMax = $(this).attr('data-totalpages');
+
+      var split = $url.split('=');
+      var base_uri = split[0];
+      var currentPage = split[1];
+      currentPage++;
+  
+      ajaxPage(base_uri, currentPage, $url);  
+  
+      if (currentPage > PageMax) {
+          $(this).remove();
+      }
+  
+  });
+  
+  function ajaxPage(base_uri, currentPage, $url) {
+      $('.loader').addClass('show');
+
+      $.ajax({
+          method: "GET",
+          url: $url,
+          async: true,
+          cache: false,
+          dataType: "html",
+          statusCode: {
+              //traitement en cas de succès
+            200: function() {
+              $('.loader').removeClass('show');
+            },
+          }
+      })
+      .done(function( data ) {
+              let $data = $(data).find(".wrap--image");
+              $( "#block-views-block-gallerie-block-1 section.d-flex" ).append($data);
+              
+              $next.attr('href', base_uri +'='+ currentPage);
+     
+      });
+  }
+
+}
+
+function Light(){
+  lightbox.option({
+    'resizeDuration': 200,
+    'wrapAround': true,
+    'alwaysShowNavOnTouchDevices':true,
+    'positionFromTop': 50,
+    'disableScrolling':true
+  })
+}
+
+
+$( document ).ready(function() {
     // currenturl();
     scrollReaveal();
     notes();
@@ -403,6 +464,8 @@ function scrollReaveal(){
     select_custom();
     remove_isactive();
     hidden_morelinkMoment();
+    pagination();
+    Light();
   });
 
 })(jQuery);

web/themes/custom/popsu_colloque/popsu_colloque.libraries.yml

@@ -4,6 +4,7 @@ global-styling:
     theme:
       css/bootstrap/css/bootstrap-reboot.min.css: {}
       css/bootstrap/css/bootstrap.min.css: {}
+      css-compiled/lightbox.css: {}
       css-compiled/index.min.css: {}
 
 global-scripts:
@@ -11,6 +12,7 @@ global-scripts:
     css/bootstrap/js/bootstrap.min.js: {}
     js/lazysizes.min.js: {}
     js/flickity.pkgd.min.js: {}
+    js/lightbox.js: {}
     js/script.js: {}
   dependencies:
     - core/jquery

web/themes/custom/popsu_colloque/template/fields/image.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Default theme implementation of an image.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the img tag.
+ * - style_name: (optional) The name of the image style applied.
+ *
+ * @see template_preprocess_image()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{% if style_name == "lightbox" %}
+{#     
+    <img{{ attributes }} />  
+     #}
+    {# <pre>
+        {{ dump(attributes) }}
+    </pre> #}
+    <a href="{{attributes.src}}" data-lightbox="lightbox" data-title="{{attributes.title}}">
+        <img src="{{attributes.src}}" alt="">
+    </a>
+    {# <a href="{{attributes.src}}" data-lightbox="lightbox">image</a> #}
+    
+    {% else %}
+        
+    <img{{ attributes }} />
+{% endif %}

web/themes/custom/popsu_colloque/template/pager--gallerie.html.twig

@@ -0,0 +1,45 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a pager.
+ *
+ * Available variables:
+ * - heading_id: Pagination heading ID.
+ * - items: List of pager items.
+ *   The list is keyed by the following elements:
+ *   - first: Item for the first page; not present on the first page of results.
+ *   - previous: Item for the previous page; not present on the first page
+ *     of results.
+ *   - next: Item for the next page; not present on the last page of results.
+ *   - last: Item for the last page; not present on the last page of results.
+ *   - pages: List of pages, keyed by page number.
+ *   Sub-sub elements:
+ *   items.first, items.previous, items.next, items.last, and each item inside
+ *   items.pages contain the following elements:
+ *   - href: URL with appropriate query parameters for the item.
+ *   - attributes: A keyed list of HTML attributes for the item.
+ *   - text: The visible text used for the item link, such as "‹ Previous"
+ *     or "Next ›".
+ * - current: The page number of the current page.
+ * - ellipses: If there are more pages than the quantity allows, then an
+ *   ellipsis before or after the listed pages may be present.
+ *   - previous: Present if the currently visible list of pages does not start
+ *     at the first page.
+ *   - next: Present if the visible list of pages ends before the last page.
+ *
+ * @see template_preprocess_pager()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if items %}
+
+  <div class="pager" role="navigation" aria-labelledby="{{ heading_id }}">
+    <div class="wrap--btn">
+      <a href="{{ items.next.href }}" data-totalpages="{{items.pages|length}}" title="{{ 'Go to last page'|t }}"{{ items.last.attributes|without('href', 'title') }}>
+        More
+      </a>
+    </div>
+  </div>
+  
+{% endif %}

web/themes/custom/popsu_colloque/template/views/fields/views-view-fields--gallerie.html.twig

@@ -0,0 +1,62 @@
+{#
+/**
+ * @file
+ * Default view template to display all the fields in a row.
+ *
+ * Available variables:
+ * - view: The view in use.
+ * - fields: A list of fields, each one contains:
+ *   - content: The output of the field.
+ *   - raw: The raw data for the field, if it exists. This is NOT output safe.
+ *   - class: The safe class ID to use.
+ *   - handler: The Views field handler controlling this field.
+ *   - inline: Whether or not the field should be inline.
+ *   - wrapper_element: An HTML element for a wrapper.
+ *   - wrapper_attributes: List of attributes for wrapper element.
+ *   - separator: An optional separator that may appear before a field.
+ *   - label: The field's label text.
+ *   - label_element: An HTML element for a label wrapper.
+ *   - label_attributes: List of attributes for label wrapper.
+ *   - label_suffix: Colon after the label.
+ *   - element_type: An HTML element for the field content.
+ *   - element_attributes: List of attributes for HTML element for field content.
+ *   - has_label_colon: A boolean indicating whether to display a colon after
+ *     the label.
+ *   - element_type: An HTML element for the field content.
+ *   - element_attributes: List of attributes for HTML element for field content.
+ * - row: The raw result from the query, with all data it fetched.
+ *
+ * @see template_preprocess_views_view_fields()
+ *
+ * @ingroup themeable
+ */
+#}
+{% for field in fields -%}
+  {{ field.separator }}
+  
+  {%- if field.wrapper_element -%}
+    <{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
+  {%- endif %}
+
+  {%- if field.label -%}
+    {%- if field.label_element -%}
+      <{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
+    {%- else -%}
+      {{ field.label }}{{ field.label_suffix }}
+    {%- endif %}
+  {%- endif %}
+
+  {%- if field.element_type -%}
+    <{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}>
+  {%- else -%}
+
+    {{ field.content }}
+
+
+  {%- endif %}
+
+  {%- if field.wrapper_element -%}
+    </{{ field.wrapper_element }}>
+  {%- endif %}
+  
+{%- endfor %}

web/themes/custom/popsu_colloque/template/views/lists/views-view-unformatted--gallerie.html.twig

@@ -0,0 +1,33 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a view of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+{% for row in rows %}
+  {%
+    set row_classes = [
+      default_row_class ? 'wrap--image',
+    ]
+  %}
+  <figure class="wrap--image">
+    {{- row.content -}}
+  </figure>
+{% endfor %}

web/themes/custom/popsu_colloque/template/views/views-mini-pager.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Theme override for a views mini-pager.
+ *
+ * Available variables:
+ * - items: List of pager items.
+ *
+ * @see template_preprocess_views_mini_pager()
+ */
+#}
+{% if items.previous or items.next %}
+  <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
+    <h4 class="pager__heading visually-hidden">{{ 'Pagination'|t }}</h4>
+    <ul class="pager__items js-pager__items">
+      {% if items.previous %}
+        <li class="pager__item pager__item--previous">
+          <a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}>
+            <span class="visually-hidden">{{ 'Previous page'|t }}</span>
+            <span aria-hidden="true">{{ items.previous.text|default('‹‹'|t) }}</span>
+          </a>
+        </li>
+      {% endif %}
+      {% if items.current %}
+        <li class="pager__item is-active">
+          {% trans %}
+            Page {{ items.current }}
+          {% endtrans %}
+        </li>
+      {% endif %}
+      {% if items.next %}
+        {# <pre>
+          {{ dump(items.next) }}
+        </pre> #}
+        <li class="pager__item pager__item--next">
+          <a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>
+            <span class="visually-hidden">{{ 'Next page'|t }}</span>
+            <span aria-hidden="true">{{ items.next.text|default('››'|t) }}</span>
+          </a>
+        </li>
+      {% endif %}
+    </ul>
+  </nav>
+{% endif %}

web/themes/custom/popsu_colloque/template/views/views-view--gallerie.html.twig

@@ -0,0 +1,70 @@
+{#
+/**
+ * @file
+ * Default theme implementation for main view template.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A CSS-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   Javascript.
+ *
+ * @see template_preprocess_views_view()
+ *
+ * @ingroup themeable
+ */
+#}
+
+
+<div class="views">
+
+  {{ title_prefix }}
+  {{ title }}
+  {{ title_suffix }}
+
+  {% if header %}
+    <section class="wrap_head">
+      {% include 'themes/custom/popsu_colloque/template/components/header_slide.html.twig' with { croix : true } %}
+    </section>
+  {% endif %}
+
+  {{ exposed }}
+  {{ attachment_before }}
+
+  {% if rows -%}
+    <section class="d-flex">
+      {{ rows }}
+    </section>
+  {% elseif empty -%}
+    {{ empty }}
+  {% endif %}
+  {{ pager }}
+
+  {{ attachment_after }}
+
+  {% if footer %}
+    <footer>
+      {{ footer }}
+    </footer>
+  {% endif %}
+
+  {{ feed_icons }}
+</div>