Parlons Code

caroussel d'images


< link rel="stylesheet" href="{{ asset('/css/caroussel.css') }}"> // lien fichier css dans Laravel

  < div class="slideshow-container">
    < ?php
      $dir = public_path('/assets/caroussel/'); // Dossier à parcourir
      $allowed_types = array('jpg','jpeg','png','gif'); // Types de fichiers autorisés

      $filelist = scandir($dir); // Obtient une liste de tous les fichiers dans le dossier

      foreach($filelist as $file) {
        $ext = pathinfo($file, PATHINFO_EXTENSION); // Obtient l'extension du fichier

        // Vérifie si le fichier est une image valide
        if (in_array($ext, $allowed_types)) { // si oui, elle est affichée
          echo '< div class="mySlides fade">< img src="' . asset('/assets/caroussel/' . $file) . '" width=180px>< /div>';
        }
      }
    ?>
  < /div>

  < script src="{{ asset('/js/caroussel.js') }}">< /script> // lien fichier js dans Laravel



    
Ce qui est intéressant ici, est la lecture automatique des images dans un dossier.
Pour cela, on utilise la fonction scandir() qui va lister tous les fichiers d'un dossier.
Pas besoin de base de données, ni de fichier texte, ni de fichier json.
On peut donc ajouter ou supprimer des images dans le dossier, sans avoir à modifier le code.
Vous pouvez retrouver un exemple dans la card "Matériels" de ce site www.lvrpoirier.fr

Cards automatiques

Sur le même principe que le caroussel, on peut créer des cards automatiques.

$directory = base_path('resources\views\vig'); // version locale
// $directory = base_path('resources/views/vig'); // version serveur

$files = scandir($directory);
$cards = [];

foreach ($files as $file) {
    $pathinfo = pathinfo($file);

    if ($pathinfo['extension'] === 'php') {
        $title = str_replace('_', ' ', $pathinfo['filename']);
        $title = str_replace('.blade', '', $title);
        $title = str_replace('vig', '', $title);

        if (isset($cards[$title]) || in_array($title, $ordre)) {
            continue;
        }

        $cards[$title] = [
            'title' => $title,
            'include' => 'vig.vig' . $title,
            'url' => strtolower($title),
        ];
    }
}


Et pour l'affichage :

< div class="container">
    < div class="row">
        < div class="card-deck">
            < div class="container">
                < div class="row">
                    @foreach ($cards as $card)
                    < div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        < a href="{{ $card['url'] }}" class="text-dark text-decoration-none">
                            < div class="card mb-4" style="background-color: rgba(255, 255, 0, 0.7); border: 4px solid blue;">
                                < div class="card-body">
                                    < h5 class="bg-white rounded p-3">{{ $card['title'] }}
                                    < p class="card-text">@include($card['include'])
                                < /div>
                            < /div>
                        < /a>
                    < /div>
                    @endforeach
                < /div>
            < /div>
        < /div>
    < /div>
< /div>

L'ordre d'affichage des cards est par ordre alphabétique.
Ces cards sont des fichiers php qui se trouvent dans le dossier "resources/views/vig".
Pour les afficher, il suffit de créer un fichier "vigLeNomDeLaCard.blade.php" qui va représenter la vignette.
Le fichier leNomDeLaCard.blade.php est dans "resources/views" et fait appel à la vignette.

@include('vig.vigContact')

Pour changer l'ordre, il suffit de modifier le tableau $ordre.
Ici, je n'en ai mis que 3, mais on peut en mettre autant que l'on veut.
Le reste des cards sera affiché par ordre alphabétique.
Voici le code complet avec les explications :

$directory = base_path('resources\views\vig'); // Chemin du répertoire contenant les fichiers à scanner
// $directory = base_path('resources/views/vig'); // Version serveur (commentée pour le moment)

$files = scandir($directory); // Scanner le répertoire et récupérer la liste des fichiers
$cards = []; // Tableau pour stocker les informations des cartes

// Définir l'ordre souhaité des fichiers
$ordre = ['Qui', 'Materiels', 'Tarifs'];

foreach ($ordre as $filename) {
    // Rechercher le fichier correspondant dans $files
    $foundFile = null; // Variable pour stocker le fichier trouvé

    foreach ($files as $file) {
        $pathinfo = pathinfo($file); // Obtenir les informations sur le fichier
        if ($pathinfo['extension'] === 'php' && $pathinfo['filename'] === 'vig'.$filename.'.blade') {
            // Vérifier si le fichier correspond aux critères (extension et nom)
            $foundFile = $file; // Stocker le nom du fichier trouvé
            break; // Sortir de la boucle si le fichier est trouvé
        }
    }

    if ($foundFile !== null) {
        $pathinfo = pathinfo($foundFile); // Obtenir les informations sur le fichier trouvé
        $title = str_replace('_', ' ', $pathinfo['filename']); // Modifier le titre pour enlever les underscores
        $title = str_replace('.blade', '', $title); // Enlever l'extension ".blade" du titre
        $title = str_replace('vig', '', $title); // Enlever le préfixe "vig" du titre
        $cards[$title] = [
            'title' => $title, // Titre de la carte
            'include' => 'vig.vig' . $title, // Fichier à inclure pour afficher la carte
            'url' => empty($title) ? "#" : strtolower($title), // URL associée à la carte
        ];
    }
}

foreach ($files as $file) {
    $pathinfo = pathinfo($file); // Obtenir les informations sur le fichier

    if ($pathinfo['extension'] === 'php') { // Vérifier si l'extension du fichier est "php"
        $title = str_replace('_', ' ', $pathinfo['filename']); // Modifier le titre pour enlever les underscores
        $title = str_replace('.blade', '', $title); // Enlever l'extension ".blade" du titre
        $title = str_replace('vig', '', $title); // Enlever le préfixe "vig" du titre

        if (isset($cards[$title]) || in_array($title, $ordre)) {
            // Vérifier si le titre existe déjà dans les cartes ou s'il est dans l'ordre prédéfini
            continue; // Passer à la prochaine itération de la boucle
        }

        $cards[$title] = [
            'title' => $title, // Titre de la carte
            'include' => 'vig.vig' . $title, // Fichier à inclure pour afficher la carte
            'url' => strtolower($title), // URL associée à la carte (convertie en minuscules)
        ];
    }
}

// Réindexer les clés du tableau
$cards = array_values($cards);


Il est important de respecter la casse des fichiers, des titres et de leurs emplacements.
Pour voir un exemple, vous pouvez aller sur le site www.lvrpoirier.fr (encore).
Et vous pouvez cliquer sur "Commenter" ci-dessous.