Concrete5: liste de page avec vignettes

kw: page_list thumbnail

Source: http://concrete5tricks.com/blog/page-attributes-thumbnail-images/ Traduction Fred Radeff

Tout d'abord, vous devez créer l'attribut via “Tableau de bord” (Dashboard) > Pages & Thèmes> Attributs.

Au bas de cette page, cliquez sur la liste déroulante “Ajouter un attribut” et choisissez “Image file”, puis cliquez sur le bouton “Ajouter”.

“Identifiant unique” (Handle) est un code pour lequel vous devez respecter une certaine syntaxe: minuscules (a-z, sans caractères accentués) et _ (underscore)

Retenez le nom de votre handle car vous en aurez besoin plus tard dans le code de votre liste de la page afin de récupérer cet attribut.

“Nom” (Name) est un nom lisible “humainement” - vos utilisateurs pourront voir ce nom lors de l'édition des propriétés de page.

Vous pouvez laisser le reste des champs avec les valeurs par défaut, et cliquez sur le bouton “Ajouter” en bas à droite de la fenêtre.

Cette étape est facultative, mais c'est généralement une bonne idée. Si vous avez un certain type de page dont vous savez qu'il va utiliser cet attribut, il est utile d'ajouter cet attribut comme option par défaut, de sorte qu'il apparaisse toujours lorsque les utilisateurs ajoutent de nouvelles pages de ce type.

Par exemple, sur un blog, nous avons le “Blog” type de page, et nous voulons qu'on nous propose toujours d'ajouter un attribut “Blog post image” lors de l'ajout de nouvelles pages

Pour le mettre en place, accédez au Tableau de bord> Pages & Thèmes> Types de page, cliquez sur le bouton “Paramètres” à côté du type de page que vous souhaitez, cochez la case à côté de l'attribut, et cliquez sur “Enregistrer”.

Maintenant vient la partie amusante! Nous voulons afficher cet attribut dans un bloc de liste de la page ailleurs sur le site, et nous allons y arriver par la création d'un modèle personnalisé.

Tout d'abord, créer le modèle personnalisé en copiant le fichier /concrete/blocks/page_list/view.php sur /blocks/page_list/templates/thumbnail_images.php.

Notez que vous aurez probablement besoin de créer au préalable le répertoire /blocks/page_list/templates, puis copiez le fichier et renommez la copie thumbnail_images.php.

Ouvrez le nouveau fichier /blocks/page_list/templates/thumbnail_images.php dans votre éditeur de texte favori. Il ya des commentaires dans le code qui expliquent comment utiliser les attributs, et autour de la ligne n° 30, il ya une section spécifique sur les attributs de l'image.

1) Activer l'image aide en décommentant (enlever les deux slash ) les lignes suivantes:

$ih = Loader::helper('image'); 

Nous allons utiliser définir la taille de la vignette de l'image choisie (afin que nous puissions faire en sorte que l'image soit toujours affichée à une certaine taille, quelle que soit l'image que l'utilisateur a choisi).

2) Extraire l'attribut d'image et créer une miniature de limage en ajoutant le code suivant (le placer sous le existant (ligne ≃ 20):

$description = $th→entities($description)

$img = $page->getAttribute('blog_post_image');
if ($img) {
    $thumb = $ih->getThumbnail($img, 64, 9999, false);
}

Les deux chiffres que nous passons dans le $ih→getThumbnail ont la fonction suivante: le premier nombre est la largeur, nous voulons que cette vignette redimensionnée mesure jusqu'à (64 pixels dans cet exemple), avec une hauteur très grande (9999). Cela signifie que nous ne nous soucions pas vraiment de la hauteur - nous voulons juste que la vignette soit réduite à une certaine largeur et que la hauteur soit calculée en proportion de la largeur.

3) Sortie de la balise d'image en ajoutant le code suivant à la balise html dans ce fichier:

<?php if ($img): ?>
    <img src="<?php  echo $thumb->src ?>" width="<?php  echo $thumb->width ?>" height="<?php  echo $thumb->height ?>" alt="" />
<?php endif; ?>

Vous voulez probablement ajouter ce code immédiatement avant ou après l'élément

<?php foreach ($pages as $page):
 
    // Prepare data for each page being listed...
    $title = $th->entities($page->getCollectionName());
    $url = $nh->getLinkToCollection($page);
    $target = ($page->getCollectionPointerExternalLink() != '' && $page->openCollectionPointerExternalLinkInNewWindow()) ? '_blank' : $page->getAttribute('nav_target');
    $target = empty($target) ? '_self' : $target;
    $description = $page->getCollectionDescription();
    $description = $controller->truncateSummaries ? $th->shorten($description, $controller->truncateChars) : $description;
    $description = $th->entities($description); 
     
    $img = $page->getAttribute('blog_post_image');
    if ($img) {
        $thumb = $ih->getThumbnail($img, 64, 9999, false);
    }
    /* End data preparation. */
 
    /* The HTML from here through "endforeach" is repeated for every item in the list... */ ?>
    <h3 class="ccm-page-list-title">
        <a href="<?php echo $url ?>" target="<?php echo $target ?>"><?php echo $title ?></a>
    </h3>
     
    <?php if ($img): ?>
        <img src="<?php echo $thumb->src; ?>" width="<?php echo $thumb->width; ?>" height="<?php echo $thumb->height; ?>" alt="" />
    <?php endif; ?>
     
    <div class="ccm-page-list-description">
        <?php echo $description ?>
    </div>
<?php endforeach; ?>