Affichage des images avec ContentBuilder

Dans l'article précédent, nous avons vu comment, à l'aide de ContentBuilder, publier sur le frontend des données enregistrées depuis un formulaire BreezingForms. Nous allons, dans ce petit tuto, aborder les images et leur affichage dans les listes et les vues ContentBuilder.

Vous avez préparé un formulaire avec vos champs nécessaires et un champ de chargement de fichier depuis lequel vous acceptez les différents formats d'images, jpg, png, gif, etc.

Créer la vue

Vous avez, en suivant le pas à pas précédent, mais en l'ayant personnalisée, préparé votre vue selon votre formulaire BreezingForms et cette dernière contient un emplacement pour votre image. Lorsque vous faites un aperçu de vos enregistrements, le nom de l'image est bien affiché dans votre tableau avec son extension (mon_image.jpg)…

images cb 01 tnimages cb 04 tn

Affichage de la vignette d'image

ContentBuilder est livré avec un plugin CSImageScale qui s'est installé lors de l'installation de CB. Il est activé d'office, mais que rien ne vous empêche de le vérifier.
Ce plugin vous permettra d'afficher une vignette de vos images dans le tableau des données.

Rendez-vous dans les paramètres de votre vue et dans la zone Code d'élément de votre image dans la liste, entrez le code qui permettra au plugin de faire son office :

${CBImageScale width:60;}

images cb 02 tn

Pour que le plugin puisse fonctionner, il est indispensable de débuter ce petit code par le signe "dollar" $. {CBImageScale} est l'appel du plugin qui redimensionnera l'image à la dimension que vous indiquez par width:60 (60 étant le nombre de pixels pour le redimensionnement) et terminez l'instruction par un point-virgule ; . Fermez l'accolade en bout de code.

Enregistrez vos modifications et rendez-vous sur votre liste et rechargez votre page pour y voir apparaître la vignette de vos images en admettant que vous ayez opté pour son affichage dans les options de la liste.

images cb 05 tn

Ajout d'un lien à la vignette

Peut-être désirerez-vous que votre vignette ait un lien qui ouvre l'image en taille réelle dans une nouvelle fenêtre. Qu'à cela ne tienne, retournez travailler un peu  ce code en lui ajoutant open:true;

${CBImageScale width:60; open:true;}

images cb 03 tn

Enregistrez vos modifications, rendez-vous sur votre liste et rechargez votre page pour y voir apparaître la vignette de vos images. Cliquez sur l'une d'elles afin de voir la nouvelle fenêtre affichant votre image en taille réelle ou tout au moins aux dimensions maximales de la fenêtre d'affichage.

Et dans la vue ?

Lorsque vous cliquez sur un lien du tableau pour ouvrir la vue de la ligne concernée, le code créé dans le "template de contenu" affiche lui aussi le label du champ image et le nom de l'image sous forme de texte.

Là aussi, vous pouvez, à l'aide d'un plugin, afficher votre image en taille réelle ou redimensionnée.

  1. Affichage image réelle : Remplacez la partie
    {image:value} par le chemin de l'image chargée.
    Exemple :
    <img alt="{image:value}" src="/cheminDeLimage/{image:value}" />
  2. Affichage image réduite à l'aide du plugin : {CBImageScale field: nomDuChampImage; width:200}
  3. Il est possible d'afficher une image réduite avec une ouverture dans un popup
    {CBImageScale field: nomChampImage; width: 200; open: true;}
    Cependant, cette méthode ajoutant une classe .modal au lien, si vous utilisez un template avec Bootstrap, l'image ne s'affichera pas, la classe .modal étant en display:none; dans bootstrap (tout au moins dans certains templates).
    Faites vos essais…

Vous noterez que dans la partie Vue, il est inutile d'utiliser le dollar $ avant le code d'appel du plugin imageScale sous peine d'afficher ce caractère.

Vérifiez maintenant votre vue afin d'y voir apparaître votre image. Si vous utilisez une extension de type mediabox telle JCEMediabox, rien ne vous empêchera d'afficher votre image réduite avec un lien pour son affichage en taille maximale dans un popup de type Lightbox.

images cb 06 tn

5 commentaires

  • Image ne s'affiche pas

    C'est mon cas

    Citation :

    Cependant, cette méthode ajoutant une classe .modal au lien, si vous utilisez un template avec Bootstrap, l'image ne s'affichera pas, la classe .modal étant en display:none; dans bootstrap (tout au moins dans certains templates).

    Avons-nous une solution pour y remédier ?

Connectez-vous pour poster un commentaire

Afin d'éviter les messages indésirables, les commentaires sont réservés aux membres inscrits. Veuillez vous inscrire ou vous connecter pour publier votre commentaire

FAIRE UN DON

paypal btn

Via PayPal

PLUGIN UP DE LOMART

Universal Plugin : UP

De très nombreuses actions pour vos articles en un unique plugin.
up lomart