L'affichage des différentes tailles d'image dans les premières versions de Willow CMS devenait fastidieux et répétitif. Dans cet article, je vais vous expliquer comment j'ai utilisé les fonctionnalités PHP et les méthodes magiques pour créer une solution propre et maintenable pour la génération d'URL d'images.

Comprendre les caractéristiques de PHP

Les traits fournissent un mécanisme de réutilisation du code dans les langages à héritage unique comme PHP. Ils vous permettent d'encapsuler des méthodes à inclure dans plusieurs classes, et les classes peuvent avoir plusieurs traits. Au lieu de dupliquer du code ou de créer des hiérarchies d'héritage complexes, les traits nous permettent de « mélanger » des fonctionnalités là où c'est nécessaire en utilisant leuse mot-clé. Cette approche permet de maintenir les principes DRY (Don't Repeat Yourself).

Méthodes magiques en PHP

Les méthodes magiques en PHP sont des méthodes spéciales qui commencent par un double trait de soulignement (__ ). Ils sont automatiquement appelés dans des situations spécifiques, ce qui nous permet de définir un comportement personnalisé pour les opérations courantes. Par exemple, lorsque vous essayez d'accéder à une propriété qui n'est pas directement accessible, PHP appelle la fonction__get() méthode magique si vous avez un code pour faire exister cet attribut « magiquement ».

Présentation d'ImageUrlTrait

LeImageUrlTrait combine la puissance des traits et des méthodes magiques pour simplifier la génération d'URL d'image. Au lieu de définir explicitement des méthodes ou des attributs pour chaque taille d'image (micro, minuscule, petite, moyenne, grande, extra-large, massive), ce trait gère dynamiquement la génération d'URL en fonction de la taille souhaitée. Cela signifie que nous pouvons obtenir des URL d'image pour une classe en utilisant le trait avec$image->smallImageUrl ou$image->largeImageUrl sans écrire de méthodes/attributs spécifiques pour chaque taille.

Comment fonctionne ImageUrlTrait

Jetez un œil au code avec les commentaires . Décomposons les composants clés du trait :

protected function _getImageUrl(): string
{
    return str_replace('webroot/', '', $this->dir . $this->image);
}

Cette méthode permet d'obtenir l'URL du fichier image d'origine à l'aide d'un attribut tel que$image->imageUrl ou$user->imageUrl . La méthode génère l'URL de l'image d'origine en combinant le répertoire et le nom de fichier et en supprimant le préfixe « webroot/ » (puisque ledir La colonne dans la base de données contient le chemin relatif du répertoire du système de fichiers suivant la structure du dossier du projet CakePHP).

public function &__get(string $attribute): mixed
{
    if (preg_match('/^(.+)ImageUrl$/', $attribute, $matches)) {
        $size = lcfirst($matches[1]);
        $imageSizes = SettingsManager::read('ImageSizes');
        if (isset($imageSizes[$size])) {
            $url = $this->getImageUrlBySize($size);

            return $url;
        }
    }
    return parent::__get($attribute);
}

La magie opère ici. Lorsque vous accédez à une propriété comme$iamge->smallImageUrl ou$image->massiveImageUrl , cette méthode :

1. Vérifie si le nom de la propriété se termine par « ImageUrl » à l’aide d’une expression régulière etpreg_match
2. Extrait le préfixe de taille (par exemple, « petit ») dans$size
3. Vérifie que la taille existe dans notre configuration
4. Appelle une méthode dans le trait pour récupérer l'URL pour la taille donnée
5. Renvoie l'URL
6. Si aucune correspondance n'est trouvée, appelle le parent__get() méthode (parce que CakePHP utilise également des méthodes magiques et nous ne voulons pas briser la chaîne d'appel de méthode)

L'ancienne méthode : verbeuse et sujette aux erreurs

Avant d'implémenter le trait, l'affichage des images avec des aperçus nécessitait du code détaillé :

$this->Html->image(SettingsManager::read('ImageSizes.small', '200') . '/' . $user->picture, 
    ['pathPrefix' => 'files/Users/picture/', 
    'alt' => $user->alt_text, 
    'class' => 'img-thumbnail', 
    'width' => '50',
    'data-bs-toggle' => 'popover',
    'data-bs-trigger' => 'hover',
    'data-bs-html' => 'true',
    'data-bs-content' => $this->Html->image(SettingsManager::read('ImageSizes.large', '400') . '/' . $user->picture, 
        ['pathPrefix' => 'files/Users/picture/', 
        'alt' => $user->alt_text, 
        'class' => 'img-fluid', 
        'style' => 'max-width: 300px; max-height: 300px;'])
    ]) 

Beurk ! Cette approche posait plusieurs problèmes :

• Appels répétés àSettingsManager::read() avec une notation par points délicate pour choisir une taille d'image
• Appels d'aide HTML imbriqués complexes
• Code difficile à lire
• Risque accru de fautes de frappe dans les noms de taille ou les chemins lors du copier/coller dans les vues

La nouvelle méthode : propre et facile à entretenir

Maintenant, avecImageUrlTrait et un élément simple, nous pouvons écrire du code beaucoup plus propre :

    $this->element('image/icon', [
        'model' => $article, 
        'icon' => $article->smallImageUrl, 
        'preview' => $article->largeImageUrl
    ]); 

Les avantages sont clairs :

• Code plus lisible
• Moins de répétition
• Risque d'erreur réduit
• Gestion cohérente des images dans l'ensemble de l'application
• Il est facile de modifier les tailles d'image (si je veux que l'image d'aperçu soit plus grande, je le fais simplement'preview' => $article->massiveImageUrl )