info:concrete5:thumbnail_page_list

Concrete5: liste de page avec vignettes

kw: page_list thumbnail

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

Parfois, vous voulez une image pour aider à représenter une page de votre site - par exemple, une miniature dans une liste de pages Concrete5 (c5)

Pour y parvenir, le plus simple est d'utiliser les “Attributs de page”. Les “Attributs de page” fournissent un moyen de joindre des informations à une page l'afficher en tant que contenu.

Voici comment créer un attribut d'image et l'afficher dans un modèle de liste personnalisé de page.

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

(autour de la ligne n ° 54), mais l'emplacement exact dépendra de la conception et de la CSS de votre thème. Notez que ce code différera également de l'exemple.

Lorsque vous avez terminé ces trois étapes, vous devriez vous retrouver avec ce type de code (extrait):

<?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; ?>

Maintenant que nous avons notre ensemble d'attributs et de notre code préparés, nous devons assigner au bloc de la liste de pages notre nouveau modèle personnalisé.

Accédez à la page qui a le bloc de la liste de pages et passez en mode Edit (ou ajoutez un nouveau bloc de liste de la page à une page si vous ne l'avez pas déjà fait).

Ensuite, pendant que vous êtes encore en mode d'édition, cliquez sur le bloc de la liste de pageS et choisissez “modèle personnalisé” dans le menu contextuel:

Ensuite, choisissez votre modèle personnalisé (“Vignette Images» dans notre exemple) et cliquez sur le bouton “Enregistrer”.

Here it is!

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

En images: Concrete5: réaliser une liste de page avec vignettes (thumbnails)

  • info/concrete5/thumbnail_page_list.txt
  • Dernière modification : 2018/07/18 09:46
  • de radeff