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 format 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 faite 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 pugin : {CBImageScale field: nomDuChampImage; width:200}
  3. Il est possible d'afficher une image réduite avec une ouverture dans une 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

Cet article vous a plu ?
N'hésitez pas à laisser une évaluation en haut de page afin de me faire part de votre impression !

 Commentaires  
Florian
0#image ne s'affiche pasFlorian06-08-2019 15:11
c'est mon cas Citer :
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 ?
Répondre | Répondre en citant | Citer
Eddy
0#RE: image ne s'affiche pasEddy06-08-2019 15:40
Bonjour Florian.

Êtes-vous certain que vous êtes dans le cas ?
Si oui, dans votre fichier custom.css (ou user.css (dépend du template)) ajoutez le code suivant :
td.hidden-phone a.modal {
display: inherit !important;
position: inherit !important;
}
Cela résout le problème.
Répondre | Répondre en citant | Citer
Florian
0#RE: image ne s'affiche pasFlorian06-08-2019 15:55
Oui certain j'essais et je vous dis
merci
Répondre | Répondre en citant | Citer
Florian
0#RE: image ne s'affiche pasFlorian06-08-2019 16:08
Bon j'ai pas de fichier custom.css ou user.css ou je ne les trouves pas
une autre idée ?
Répondre | Répondre en citant | Citer
Eddy
0#RE: image ne s'affiche pasEddy06-08-2019 16:23
Florian.

Un template est rarement fourni avec un fichier custom.css.
Il suffit alors de le créer dans le répertoire des fichiers css de ce template afin qu'il soit chargé par la page du site. Il permet de personnaliser certaines choses et que ces personnalisations ne soient pas écrasées par la mise à jour de ce template. ;)
Répondre | Répondre en citant | Citer
 Ajouter un commentaire
En utilisant ce formulaire de commentaires, vous acceptez que les informations demandées soient enregistrées, affichées ci-dessous et utilisées pour un éventuel contact (dans ce cas, n'oubliez pas de renseigner votre e-mail). L'adresse e-mail n'est jamais affichée aux visiteurs.