Implement dynamic photo gallery with slider and modular structure

.github/workflows/build.yml

@@ -21,3 +21,4 @@ jobs:
         name: Install bundle
       - run: bundle exec jekyll build
         name: Build website
+

.gitignore

@@ -3,4 +3,4 @@
 
 # Ignore local build
 Gemfile.lock
-_site/
+_site/

assets/css/customsty.css

@@ -346,3 +346,107 @@ a.iconlink:hover {
   color:#0F79D0 !important;
   transition: 0.3s;
 }
+
+/* Image Gallery Slider Styles */
+.gallery-slider-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 30px 0;
+}
+
+.gallery-scroll-wrapper {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;  /* IE 10+ */
+  width: 100%;
+  scroll-behavior: smooth;
+  padding: 10px 0; /* Add padding for translateY hover translations */
+}
+
+.gallery-scroll-wrapper::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+
+.image-gallery-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: max-content;
+  margin: 0;
+}
+
+.image-gallery-row {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  width: max-content;
+}
+
+.image-gallery-row a {
+  position: relative;
+  display: block;
+  height: 180px;
+  width: auto;
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  background-color: #f0f0f0;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.image-gallery-row a:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+.image-gallery-row a img {
+  height: 100%;
+  width: auto;
+  display: block;
+  margin: 0;
+  transition: filter 0.3s ease;
+}
+
+/* Slider buttons for the thumbnail grid */
+.slider-btn {
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  font-size: 18px;
+  color: #333333;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.2s, color 0.2s, transform 0.2s;
+  z-index: 10;
+  user-select: none;
+}
+
+.slider-btn:hover {
+  background-color: #0F79D0;
+  color: #ffffff;
+  border-color: #0F79D0;
+  transform: scale(1.05);
+}
+
+.prev-btn {
+  margin-right: 15px;
+}
+
+.next-btn {
+  margin-left: 15px;
+}
+
+
+
+
+
+

conference/2026.md

@@ -5,7 +5,6 @@ image: assets/img/fenics2026/universityofchicagoparis.jpg
 image-zoom: fill
 permalink: /fenics-2026/
 ---
-
 # Description
 
 The FEniCS 2026 conference is an opportunity for all those interested in
@@ -25,6 +24,43 @@ and dedicated time for discussions and coding.
 
 Links to previous FEniCS conferences can be found [here](index.md).
 
+## Photo Gallery
+
+<div class="gallery-slider-container">
+  <button class="slider-btn prev-btn" onclick="document.getElementById('gallery-scroll-wrapper').scrollBy({left: -300, behavior: 'smooth'})">&#10094;</button>
+  <div class="gallery-scroll-wrapper" id="gallery-scroll-wrapper">
+    <div class="image-gallery-container">
+      <div class="image-gallery-row">
+        <!-- GALLERY_ROW1_START -->
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/IMG_9738.jpeg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/IMG_9738.jpeg" loading="lazy" alt="Photo 1" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9756.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9756.jpg" loading="lazy" alt="Photo 12" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9759.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9759.jpg" loading="lazy" alt="Photo 15" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9761.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9761.jpg" loading="lazy" alt="Photo 17" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9763.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9763.jpg" loading="lazy" alt="Photo 19" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9766.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9766.jpg" loading="lazy" alt="Photo 22" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9768.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9768.jpg" loading="lazy" alt="Photo 24" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9771.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9771.jpg" loading="lazy" alt="Photo 27" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9777.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9777.jpg" loading="lazy" alt="Photo 33" /></a>
+        <!-- GALLERY_ROW1_END -->
+      </div>
+      <div class="image-gallery-row">
+        <!-- GALLERY_ROW2_START -->
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9781.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9781.jpg" loading="lazy" alt="Photo 37" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9782.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9782.jpg" loading="lazy" alt="Photo 38" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9783.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9783.jpg" loading="lazy" alt="Photo 39" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9784.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9784.jpg" loading="lazy" alt="Photo 40" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9785.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9785.jpg" loading="lazy" alt="Photo 41" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9787.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9787.jpg" loading="lazy" alt="Photo 43" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9789.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9789.jpg" loading="lazy" alt="Photo 45" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9790.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9790.jpg" loading="lazy" alt="Photo 46" /></a>
+        <a href="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9794.jpg" target="_blank" rel="noopener noreferrer"><img src="http://pub.fenicsproject.org/photos/fenics26-paris/jpeg/IMG_9794.jpg" loading="lazy" alt="Photo 47" /></a>
+        <!-- GALLERY_ROW2_END -->
+      </div>
+    </div>
+  </div>
+  <button class="slider-btn next-btn" onclick="document.getElementById('gallery-scroll-wrapper').scrollBy({left: 300, behavior: 'smooth'})">&#10095;</button>
+</div>
+
 ## FEniCS 2026 Awardees
 
 In this edition of the FEniCS Conference, alongside the main awards, the Award
@@ -255,3 +291,4 @@ Best Presentation and Poster Awards.
 
 If you have any questions about the conference organization, please contact:
 [fenics-2026@dalembert.upmc.fr](mailto:fenics-2026@dalembert.upmc.fr?cc=corrado.maurini%40sorbonne-universite.fr%2Cridg%40uchicago.edu&subject=FEniCS26%3A%20).
+