Avoir un texte descriptif sous une image

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.

Submitted by Hermine on

Bonjour,

Je cherche à afficher un copyright et/ou un texte descriptif sous une photo (comme sur ce site par exemple : http://www.cyberpresse.ca/).

J'utilise IMCE et TinyMCE pour ma mise en page. Je peux y paramétrer la description de l'image, le titre, l'Id et avoir une description longue du lien (?). Mais je ne vois pas comment afficher un petit texte sous l'image (dépendant du texte de l'article).

Des idées ?

Forum : 
Support général

Soumis par Hermine le 9 Décembre, 2009 - 15:28

Je suis débutante sur Drupal, pourrais tu m'expliquer plus en détails ?

Quand tu parle de classe c'est dans la css ? Mais si c'est ca je ne vois pas comment l'appliquer à ma description, où insérer la classe et se que mettre dans ma classe...

Et sinon je ne sais pas du tout comment créer un champ cck :(

Je cherche une solution simple sans trop toucher au code des pages, car mes compétences en programmation sont limités...

Soumis par selinav le 9 Décembre, 2009 - 15:30

le cck permet de rajouter des champs aux formulaires de saisie de contenu.

Tu rajoutes un champ image et un champ description. Tu auras donc un bouton parcourir qui te permettra d'insérer une image et un nouveau champ ou tu saisiras ta description.

Pour faire ceci il faut installer le module cck un indispensable à drupal.

Soumis par Hermine le 10 Décembre, 2009 - 19:07

Bon j'ai appris à me servir des cck et j'ai l'air de maitriser :)

Maintenant j'aimerais savoir comment forcer mon texte descriptif à faire la longueur de mon image. Comme j'utilise des images verticales ou horizontales leurs tailles diffèrent.

J'aimerais aussi que l'image soit positionné en haut à droite de mon texte mais comme il s'agit d'un bloc même si j'y applique un style aligné à droite, le texte suivant se place en dessous au lieu de se placer à gauche ...

Soumis par Hermine le 21 Décembre, 2009 - 16:31

Ca fait plusieurs jours que j'essaye de paramétrer mon bloc avec les feuilles de style et je n'arrive à rien :(

Pour le moment j'essaye juste de positionner mon image en haut à droite de mon texte, mais l'image reste seule au dessus de mon texte.

Voici mon code css :

.imgArticle {
float: left;
text-align: left;
padding-right:10px;
padding-bottom:10px;
}

Et mon code sur la page node-article.tpl.php :

div id="Image" class="imgArticle"> 

<?php
 print $node->field_image[0]['view'] 
?>

/div>

Je ne comprends pas ce qui bloque ... (j'ai été obligé d'enlever les deux < de mes balises div, car le forum m'effacait mes balises div sinon)

Soumis par tiffoun le 21 Décembre, 2009 - 22:07

Je n'ai pas d'aide à t'apporter mais plutôt une question (désolé d'avance...)
- arrives-tu, lorsque tu transfère des images par le champ CCK image field, à ce que celles-ci ne soient pas bêtement dans le noeud les unes en dessous des autres verticalement mais plutôt par exemple alignées sur plusieurs rangées , histoire de gagner de la place. Le seul tuto (vidéo)où j'ai vu un type l'évoquer rapidement, il disait qu'il avait rajouté un style pour l'affichage de cette manière...Sans détailler. Je pense que la réponse à ta question sera dans les parages de la mienne.
Si tu as des news... Personnellement quand je jette un oeil aux codes dans les pages...je me perd. Et surtout je ne suis pas sûr de là où il faut fouiller...
Je continue à chercher...

Soumis par Hermine le 21 Décembre, 2009 - 22:46

Quand j'ajoute plusieurs images les unes a la suite des autres elles se collent les unes aux autres... Mais je n'ai rien paramétré pour qu'elles se positionnent ainsi puisque je ne souhaite afficher qu'une image par article.

Je trouve surtout étrange que quand je regarde mon code source une fois l'article mit en ligne il s'affiche en me fermant la balise

<

p> et perd donc la classe ... (voir la capture d'écran attachée)

Soumis par tiffoun le 22 Décembre, 2009 - 00:28

Je n'y connais pas grand chose en css. Mais si ton bout de code css est à destination de l'image, ne devrait-il pas plutôt contenir du float right et non float left ? Et laisser le text-align en left ?...
Ou autre chose...le texte n'est-il pas séparé de l'image dans le traitement ? Que signifie le print $node->field_image[0]['view'] ? il affiche quoi , l'ensemble texte et image ? auquel cas la classe est pour l'ensemble...Donc l'ensemble reste à gauche... en float left .

Bref, désolé si je délire. J'essaie de surnager. Déjà je trouve bien que tu saches quoi mettre dans le tpl.php...Moi je n'en suis pas là.

Soumis par Hermine le 22 Décembre, 2009 - 16:15

Effectivement pourquoi j'ai mis left ? A force de faire des modifications je me suis trompé. C'est bien right, mais ca ne résous pas mon problème malheureusement. L'image reste au dessus de mon texte.

En fait j'ai créé deux champs CCK l'un pour l'image et l'autre pour le texte de l'article. Je voudrais créer plusieurs champs pour l'image, les crédits, la description de l'image. Sauf que si je n'arrive pas à gérer l'alignement, je n'avance pas.

Soumis par tiffoun le 22 Décembre, 2009 - 01:01

Bon
je progresse. J'arrive à afficher mes 4 images sur une ligne ! J'ai été modifier un css que j'ai trouvé par firebug. C'est le css de la classe img ! Il y avait un border:0 auquel j'ai rajouté un simple float:left, et un padding de 3px.
Le seul hic c'est que les photos débordent du bas de l'article...C'est l'inconvénient du float...je suppose. Je continuerai à fouiller demain.

Sinon j'ai aussi eu une piste intéressante en créant et modifiant un node-story.tpl.php avec des bouts de code chopés dans le module content template. Mais je ne comprends pas tout. Je ne saisis pas encore le fonctionnement de toutes les varables proposées, et ni pourquoi il y a des 'view' ou des 'items'...Bref.
Je vais me coucher.

Soumis par Hermine le 22 Décembre, 2009 - 18:48

Bon j'ai changé de tactique !

Cette fois voilà mon code sur la page node-article.tpl.php : 

<?php
<div style="float: right;" id="Image">
<?php print $node->field_image[0]['view'] 
?>

?>

Et voilà ce que je retrouve une fois ma mise en ligne faite : 

<?php
<div style="float: right;" id="Image">
<h6><p><img src="imgArticles/91104c.jpg" class="mceItem" height="167" width="250"></p></h6></div>
    
<div id="Introduction">
<h4>En intro</h4></div>
?>

Le code me semble plutôt correct pour l'affichage que je souhaite, mais ca ne donne pas du tout l'effet voulu :/
Et je ne comprends toujours pas d'où sortent les balises paragraphes