[Résolu] Utilisation de Colorbox : les overlay ne s'affichent pas (toujours)

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Bonjour,

Je reviens demander des éclaircissements cette fois au sujet de Colorbox sous Drupal 7. Je vais expliquer mes démarches au fur et à mesure.

Mon but est de pouvoir créer, sur les pages de base, des images en petit format, mais cliquables et qui font apparaître l'image au format original, via un pop-up/layout. Mais sur ces pages, il y aura déjà du texte ; mes images l'illustrent.
Puis je souhaite faire de même pour une galerie complète d'images qui sera classée en catégories mais ça, c'est pour plus tard.

J'ai donc d'abord voulu utiliser Lightbox2. Sauf qu'honnêtement je n'ai pas compris grand-chose à Lightbox - je n'arrive pas à l'utiliser tout court - donc j'ai cherché un autre module capable de faire ces images en pop-up. J'ai donc installé Colorbox avec le module Libraries et le Colorbow plugin, j'ai tout installé et paramétré.

Ensuite, comme je suis débutante sur Drupal, je lis plusieurs explications sur comment l'utiliser et je suis un tutoriel qui normalement me permet d'arriver à ce que je veux. Je vais donc changer les champs format dans Structure/Types de contenu/Gérer les champs de la page de base, et je paramètre le champ Image pour utiliser Colorbox. Content image style passe en medium, et je ne touche à rien d'autre. Ce qui normalement devrait donc suffire pour faire apparaître les images en pop-up.

Sauf que...rien ne se passe. J'utilise CKeditor et passe par mon éditeur WYSISWG pour insérer mes images, soit par "image" soit par "media" (j'ai installé le module media et le module multiupload pour pouvoir prendre plusieurs images à la fois). Mais tout ce que cela fait, c'est insérer les images normalement et quand on clique dessus, rien ne s'ouvre en pop-up, les images ne s'agrandissent pas.

Bon...je vais lire un autre tutoriel qui concerne cette fois les galeries d'images, puisque je ferai une galerie plus tard. Je crée un contenu "Galerie" qui me permet de créer donc des galeries où je peux ajouter des images, autant que je veux cette fois. Et elles s'affichent en pop up ! Bon, ce n'est pas tout à fait ce que je veux, mais c'est déjà ça. Surtout que s'affiche en haut de l'image le terme "gallery" (requis pour le champ) dont je me passerais bien à moins de pouvoir le modifier. Je me rends alors compte que pour ces images fonctionnant en pop-up, je suis passée par non pas mon éditeur de texte mais le simple "Ajouter un nouveau fichier" qui est sur Drupal à la base. Si je passe par mon éditeur de texte, ça ne marche pas. (Du coup, ça a beaucoup servi que j'installe media et multiupload, mais passons).

Croyant trouver une solution, je retrouve sur mon contenu page de base. En insérant des images et en passant par le "Ajouter un nouveau fichier/parcourir..." fourni par Drupal en-dessous du champ de texte de la page, mes images sont bien mises en pop-up ! Sauf que :

-forcément, je ne contrôle pas où elles sont dans la page et s'affichent obligatoirement à la fin. Je ne pourrai pas les afficher au milieu de mon texte par exemple, contrairement à lorsque je passe par mon éditeur WYSIWYG.
-le champ "Image" apparaît à chaque fois au-dessus de l'image, ce qui est inutile et peu esthétique.
-je ne peux pas mettre plus d'une image.
-quand je clique pour la mettre en pop-up, elle prend le titre de la page alors que je voudrais justement pour chaque image pouvoir mettre une légende différente.

Tournant en rond depuis un moment-là dessus donc, je me tourne vers vous pour savoir comment je peux régler tous ces soucis, si j'ai mal fait quelque chose, ou alors s'il y a éventuellement une autre solution plus simple...j'ai déjà écumé plusieurs vidéos de tutoriel, en vain. J'ai aussi cru comprendre qu'il y avait un moyen de faire au moins une galerie avec Views, mais c'est pareil, j'ai beaucoup du mal à en saisir le fonctionnement.

Merci d'avance si vous pouvez m'aider !

Ci-joint deux captures de ce que j'arrive à avoir pour l'instant.

Fichier attachéTaille
Icône image capture_du_2014-07-05_172139.png89.58 Ko
Icône image capture_du_2014-07-05_172608.png248.99 Ko

Il y a 2 manières de lier une image à un contenu :

  • soit via un champ (dans ce cas, l'image apparaît en dehors du texte)
  • soit via media, dans ce cas tu peux positionner l'image dans le flux du texte.

Le paramétrage Colorbox est différent dans les 2 cas.
Dans le cas d'un champ, il faut effectivement aller dans le paramétrage de l'affichage, et utiliser Colorbox (cf http://www.hebinweb.com/content/olympique-croisien).
Il me semble qu'il faut aussi choisir le bon paramétrage Colorbox (notamment le style. Dans l'exemple c'est Exemple1).

Si on veut utiliser dans le corps du texte, je pense qu'il faut aussi cocher la case "Enable Colorbox inline ", dans admin/config/media/colorbox

Merci beaucoup pour ces indications, Vincent, encore une fois. Lier l'image par un champ, à la fin du contenu, ne m'est pas très utile donc je me suis penchée sur ce que tu suggérais ensuite et j'ai recherché une solution à partir de là, en rebondissant dessus.

J'ai donc cherché comment le faire avec le corps du texte et j'ai trouvé deux tutoriels qui m'ont aiguillée. Tout d'abord il faut en effet bel et bien cocher la case "Enable Color inline" mais ce n'est pas suffisant.
Il faut installer le module Insert et le lier ensuite au type de contenu qu'on souhaite utiliser. Il devient une autre manière d'uploader les images, en plus du "ajouter un fichier" classique ou de ceux fournis par Media. Il n'y a qu'ainsi que j'arrive à mettre les images là où je veux dans mon corps de texte, tout en permettant de les afficher en overlay/pop-up.

Dans les paramètres de widget du contenu, il faut bien le relier à "image" et non plus "media" comme c'était le cas pour moi auparavant, sinon ça ne marchera pas non plus. Egalement aussi pour le contenu : les champs de légende (titre, alt) sont à cliquer pour les rendre valides et permettre ainsi de donner un titre propre à chaque image (mais on ne peut le faire qu'une fois qu'on a remis le bon type de widget). Enfin, grâce au module "Insert", on a une sous-section dans ces paramètres (toujours dans le contenu puis "modifier" en onglet) qu'il ne faut pas oublier de déplier, pour cocher "enable insert button" et les trois formats possibles ColorBox large, ColorBox medium et ColorBox Thumbnail).

Ainsi, quand on insère finalement notre image dans le texte, on peut choisir la taille de l'aperçu, et on aura l'image originale en cliquant dessus. Plus les titres qu'on aura choisi de lui donner (l'alt servant pour les moteurs de recherche).

Bref, mission accomplie grâce à ta suggestion qui m'a permis de voir plus loin ! Pour les tutoriaux suivis, c'est ceux-ci et même si la version était Drupal 7 beta, ça marche encore très bien : http://vimeo.com/19122850

Merci encore à toi !!

PS : Tiens, même bug que l'autre jour !