la grille des galeries est maintenant gérée en CSS et non plus en JS

galeries.php

@@ -105,52 +105,30 @@ if (!isSecurePath($parentPath)) {
        <?php endif; ?>
    </div>
 
-   <div class="gallery-grid" id="gallery-grid">
-    <?php foreach($images as $image): 
-        $isTop = strpos(basename($image), '--top--') !== false;
-    ?>
-    <div class="gallery-item<?php echo $isTop ? ' gallery-item-top' : ''; ?>">
-        <a href="partage.php?image=<?php echo urlencode($image); ?>" target="_blank">
-            <img src="<?php echo htmlspecialchars($image); ?>" 
-                 alt="Image de la galerie" 
-                 loading="lazy"
-                 onload="this.parentElement.parentElement.style.opacity = '1'">
-        </a>
+    <div class="gallery-grid">
+        <?php foreach($images as $image): 
+            $isTop = strpos(basename($image), '--top--') !== false;
+            $size = getSecureImageSize(realpath('.') . str_replace(getBaseUrl(), '', $image));
+            $aspectRatio = $size ? $size['width'] / $size['height'] : 1;
+            $spanClass = '';
+            
+            if ($aspectRatio > 1.7) {
+                $spanClass = 'gallery-item-wide';
+            } elseif ($aspectRatio < 0.7) {
+                $spanClass = 'gallery-item-tall';
+            }
+        ?>
+        <div class="gallery-item <?php echo $isTop ? 'gallery-item-top' : ''; ?> <?php echo $spanClass; ?>">
+            <a href="partage.php?image=<?php echo urlencode($image); ?>" target="_blank">
+                <img src="<?php echo htmlspecialchars($image); ?>" 
+                    alt="Image de la galerie"
+                    loading="lazy">
+            </a>
+        </div>
+        <?php endforeach; ?>
     </div>
-    <?php endforeach; ?>
-   </div>
 
-   <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
-   <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
    <script>
-   document.addEventListener('DOMContentLoaded', function() {
-    const grid = document.querySelector('#gallery-grid');
-    const loadingClass = 'is-loading';
-    
-    // Ajouter une classe de chargement
-    grid.classList.add(loadingClass);
-    
-    // Initialiser Masonry avec imagesLoaded
-    imagesLoaded(grid, function() {
-        const masonry = new Masonry(grid, {
-            itemSelector: '.gallery-item',
-            columnWidth: '.gallery-item',
-            gutter: 20,
-            fitWidth: true,
-            transitionDuration: 0 // Désactiver l'animation pour le premier rendu
-        });
-        
-        // Retirer la classe de chargement
-        grid.classList.remove(loadingClass);
-        
-        // Réactiver les animations après le premier rendu
-        setTimeout(() => {
-            masonry.options.transitionDuration = '0.3s';
-            masonry.layout();
-        }, 100);
-    });
-   });
-
    // Gestion du contenu mature
    function acceptMatureContent() {
        document.body.classList.remove('content-blurred');

styles.css

@@ -370,6 +370,10 @@ body {
 }
 
 .gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    grid-auto-flow: dense;
+    gap: 1rem;
     padding: 2rem;
     max-width: 1800px;
     margin: 0 auto;
@@ -381,13 +385,10 @@ body {
 }
 
 .gallery-item {
-    width: calc((100% - (7 * 20px)) / 8);
-    min-width: 200px;
-    margin-bottom: 20px;
+    position: relative;
     border-radius: 8px;
     overflow: hidden;
-    background-color: #1e1e1e;
-    opacity: 0;
+    min-height: 200px;
     transition: transform 0.3s ease;
 }
 
@@ -397,10 +398,18 @@ body {
 
 .gallery-item img {
     width: 100%;
-    height: auto;
-    min-height: 150px;
+    height: 100%;
     object-fit: cover;
     display: block;
+    transition: transform 0.3s ease;
+}
+
+.gallery-item-wide {
+    grid-column: span 2;
+}
+
+.gallery-item-tall {
+    grid-row: span 2;
 }
 
 .gallery-item-top {
@@ -522,8 +531,14 @@ body {
     .albums-grid {
         grid-template-columns: repeat(4, 1fr);
     }
-    .gallery-item {
-        width: calc((100% - (3 * 20px)) / 4);
+    .gallery-grid {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+    
+    .gallery-item-wide,
+    .gallery-item-tall {
+        grid-column: span 1;
+        grid-row: span 1;
     }
 }
 
@@ -550,6 +565,12 @@ body {
         width: calc((100% - (2 * 20px)) / 3);
     }
 
+    .gallery-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 0.5rem;
+        padding: 1rem;
+    }
+    
     .gallery-header {
         height: 300px;
     }