ajout d'une fonction pour afficher des images en "top" de leur galerie

arbre-img.php

@@ -68,6 +68,32 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                 }
                 break;
             
+                case 'toggle_top':
+                    $image = $_POST['image'] ?? '';
+                    if ($image) {
+                        $imagePath = $currentPath . '/' . basename($image);
+                        if (isSecurePath($imagePath) && file_exists($imagePath)) {
+                            $info = pathinfo($imagePath);
+                            $isTop = strpos($info['filename'], '--top--') !== false;
+                            
+                            if ($isTop) {
+                                // Enlever le tag top
+                                $newName = str_replace('--top--', '', $info['filename']) . '.' . $info['extension'];
+                            } else {
+                                // Ajouter le tag top
+                                $newName = $info['filename'] . '--top--.' . $info['extension'];
+                            }
+                            
+                            $newPath = $currentPath . '/' . $newName;
+                            if (rename($imagePath, $newPath)) {
+                                $_SESSION['success_message'] = $isTop ? "Image retirée des tops." : "Image mise en top.";
+                            } else {
+                                $_SESSION['error_message'] = "Erreur lors de la modification du statut top.";
+                            }
+                        }
+                    }
+                    break;
+            
             case 'delete':
                 $images = $_POST['images'] ?? [];
                 $deleteCount = 0;
@@ -175,7 +201,6 @@ $images = array_map(function($img) {
             <input type="hidden" name="action" value="delete">
             <div class="images-grid">
                 <?php foreach($images as $image): 
-                // Déterminer si nous sommes dans le dossier du carrousel
                     $isCarousel = strpos($currentPath, 'img_carrousel') !== false;
                     
                     if ($isCarousel) {
@@ -187,14 +212,24 @@ $images = array_map(function($img) {
                     <div class="image-item">
                         <input type="checkbox" name="images[]" value="<?php echo htmlspecialchars($image); ?>" 
                             class="image-checkbox" onchange="updateDeleteButton()">
+                        <div class="image-wrapper">
                             <img src="<?php echo htmlspecialchars($imageUrl); ?>" 
                                 alt="<?php echo htmlspecialchars($image); ?>" loading="lazy">
                             <div class="image-actions">
+                                <?php 
+                                $isTop = strpos($image, '--top--') !== false;
+                                ?>
+                                <button type="button" onclick="toggleTop('<?php echo htmlspecialchars($image); ?>')" 
+                                    class="tree-button <?php echo $isTop ? 'tree-button-top' : ''; ?>" 
+                                    title="<?php echo $isTop ? 'Retirer des tops' : 'Mettre en top'; ?>">
+                                    ⭐
+                                </button>
                                 <button type="button" onclick="deleteImage('<?php echo htmlspecialchars($image); ?>')" 
                                     class="tree-button tree-button-danger">🗑️</button>
                             </div>
-</div>
+                        </div>
-<?php endforeach; ?>
+                    </div>
+                <?php endforeach; ?>
             </div>
         </form>
     </div>
@@ -232,6 +267,17 @@ $images = array_map(function($img) {
         uploadForm.submit();
     }
 });
+        // Fonction de mise en top
+        function toggleTop(imageName) {
+            const form = document.createElement('form');
+            form.method = 'post';
+            form.innerHTML = `
+                <input type="hidden" name="action" value="toggle_top">
+                <input type="hidden" name="image" value="${imageName}">
+            `;
+            document.body.appendChild(form);
+            form.submit();
+        }
 
         // Gestion de la suppression
         function deleteImage(imageName) {

galeries.php

@@ -28,7 +28,15 @@ foreach (new DirectoryIterator($currentPath) as $file) {
    }
 }
 
+// Tri modifié pour mettre les images "top" en premier
 usort($images, function($a, $b) {
+    $isTopA = strpos(basename($a), '--top--') !== false;
+    $isTopB = strpos(basename($b), '--top--') !== false;
+    
+    if ($isTopA && !$isTopB) return -1; // a est top, pas b
+    if (!$isTopA && $isTopB) return 1;  // b est top, pas a
+    
+    // Si les deux sont top ou aucun n'est top, on garde le tri par date
     $pathA = realpath('.') . str_replace(getBaseUrl(), '', $a);
     $pathB = realpath('.') . str_replace(getBaseUrl(), '', $b);
     return filectime($pathB) - filectime($pathA);
@@ -98,8 +106,10 @@ if (!isSecurePath($parentPath)) {
    </div>
 
    <div class="gallery-grid" id="gallery-grid">
-    <?php foreach($images as $image): ?>
+    <?php foreach($images as $image): 
-    <div class="gallery-item">
+        $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" 

styles-admin.css

@@ -424,6 +424,15 @@ body {
     color: #ffffff;
 }
 
+/* Styles pour le bouton top */
+.tree-button-top {
+    background-color: rgba(33, 150, 243, 0.7) !important;
+}
+
+.tree-button-top:hover {
+    background-color: rgba(33, 150, 243, 0.9) !important;
+}
+
 /* Styles pour le dossier carousel */
 .carousel-folder > .tree-item-content {
     background: rgba(255, 140, 0, 0.1);
@@ -605,18 +614,26 @@ body {
 /* Styles pour les listes d'images */
 .images-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 1rem;
     padding: 1rem;
 }
 
 .image-item {
     position: relative;
-    aspect-ratio: 1;
+    width: 100%;
+    padding-bottom: 100%;
+    background-color: #2a2a2a;
     border-radius: 0.5rem;
     overflow: hidden;
-    background-color: #2a2a2a;
+}
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+.image-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .image-item:hover {
@@ -626,36 +643,51 @@ body {
 }
 
 .image-item img {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    transition: transform 0.3s ease;
 }
 
 .image-item:hover img {
     transform: scale(1.1);
 }
 
-.image-checkbox {
-    position: absolute;
-    top: 0.5rem;
-    left: 0.5rem;
-    z-index: 2;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    accent-color: #2196f3;
-}
-
-.image-checkbox:hover {
-    transform: scale(1.1);
-}
-
 .image-actions {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
     z-index: 2;
+    display: flex;
+    gap: 0.5rem;
+}
+
+.image-checkbox {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    z-index: 3;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    accent-color: #2196f3;
+    opacity: 0.8;
+}
+
+.image-checkbox:hover {
+    transform: scale(1.1);
+    opacity: 1;
+}
+
+.image-actions {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 2;
+    display: flex;
+    gap: 0.5rem;
 }
 
 .upload-zone {

styles.css

@@ -403,6 +403,20 @@ body {
     display: block;
 }
 
+.gallery-item-top {
+    /* Contour bleu */
+    border: 4px solid #2196f3;
+    /* Animation subtile au survol */
+    position: relative;
+    z-index: 2;
+    transition: all 0.3s ease;
+}
+
+.gallery-item-top:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 12px 24px rgba(33, 150, 243, 0.3);
+}
+
 /* Styles pour la page de partage */
 .share-page {
     background-color: rgba(0, 0, 0, 0.9);