Format des news

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 Anonyme (non vérifié) on

Bonjour,

Je voulais savoir comment il est possible quand on ajoute un image à une news elle s'affiche automatiquement à gauche du premier paragraphe comme ici http://parolim.power-heberg.com/ j'ai fais un tableau pour le faire mai j'aimerais que ça se fasse automatiquement.

Merci

Forum : 
Support général
Version de Drupal : 
6.x

Soumis par DavP le 4 Août, 2009 - 18:20

En css, avec un "float:left;" (et "display:block;" aussi si tu veux régler les marges) appliqué à l'image et le tour est joué. :)

Faudra sans doute mettre aussi un "overflow:auto;" au conteneur de l'image pour pas que le flux soit pas perturbé par le float.

Sinon, sur le site que tu montre en exemple, ils ont fait une mise en page avec des tableaux, et les images sont contenus aussi dans un tableau mais personnellement je te conseille de faire ça en css. ;)

Soumis par M61t (non vérifié) le 4 Août, 2009 - 18:34

Merci, par contre ce que je voulais dire aussi, il n'y a pas un moyen pour ajouter un champ au formulaire de création d'articles pour envoyer une image, ça serais l'image d'illustration de l'article et elle s'afficherait automatiquement en début de news à gauche du premier paragraphe ?

Soumis par DavP le 4 Août, 2009 - 18:57

Pour faire ça, je te conseille CCK et imagefield.

Dans ton type de contenu articles, tu vas créer un champ personnalisé image que tu configureras pour apparaitre dans le résumé et le tour est joué. :)

A la fin, tu ajoutes une règle css pour que l'image soit positionnée là ou tu veux. :)

Soumis par DavP le 4 Août, 2009 - 21:25

Il te faut juste avoir le module CCK installé.
Puis tu vas dans type de contenu, gérer les champs, tu ajoutes un champ de type texte que tu auras nommé avec une étiquette un nom de variable.

Ensuite tu configures ce champ mais aussi il ne faut pas oublier de configurer l'affichage du champ dans "afficher les champs".
Tu dis notamment si tu veux que l'étiquette apparaisse, si tu veux que ton texte apparaisse dans le résumé, dans le node et la façon dont ça doit apparaitre.

Soumis par DavP le 5 Août, 2009 - 16:46

Il faut cibler les éléments image du type que t'as défini avec CCK.
Regarde ton code source à l'affichage pour bien cibler.

Drupal ajoute toujours des span et/ou des div avec des classes pour enrober les contenu cck ou views.

Le float fait flotter l'élément en le sortant du flux donc ce sera bien en haut à gauche normalement.

Soumis par M61t (non vérifié) le 5 Août, 2009 - 17:05

Voici mon code html de node.tpl.php

<

div id="node-

<?php
 print $node->nid; 
?>

" class="node

<?php
 if ($sticky) { print ' sticky'; } 
?>
<?php
 if (!$status) { print ' node-unpublished'; } 
?>

clear-block">

<?php print $picture ?>

<?php if (!$page): ?>
  <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>

  <div class="meta">
  <?php if ($submitted): ?>
    <span class="submitted"><?php print $submitted ?></span>
  <?php endif; ?>

  <?php if ($terms): ?>
    <div class="terms terms-inline"><?php print $terms ?></div>
  <?php endif;?>
  </div>

  <div class="content">
    <?php print $content ?>
  </div>

  <?php print $links; ?>
</div>

Soumis par DavP le 5 Août, 2009 - 17:15

Regarde le code source de ce qui est vraiment affiché, pas le code du template.

Ca c'est uniquement le template du node; tu n'as pas le détail de ce que contient la variable $content.
C'est dans cette variable qu'il y a tout le contenu du node et ton image cck inluse ...

Le seul moyen est donc d'afficher ta page et de regarder le code source de ta page pour voir dans quoi est contenu ton élément img.

Soumis par M61t (non vérifié) le 5 Août, 2009 - 17:17

Ah d'accord excusez moi.

Voici le code donc :

<div class="field field-type-filefield field-field-image">
    <div class="field-items">
            <div class="field-item odd">
                    <img height="314" width="402" src="http://www.actweo.com/sites/default/files/msn.png?1249484209" alt="" class="imagefield imagefield-field_image"/>        </div>
        </div>
</div>

Soumis par DavP le 5 Août, 2009 - 17:27

Ben alors, y'a même deux classes sur l'image. :P

Tu fais ta règle css sur l'élément "img.imagefield" ou "img.imagefield-field_image".
Et si tu veux être plus précis tu peux spécifier un ou plusieurs blocs parents, ce qui donnera une règle css du style:

div.field div.field-items img.imagefield {
float:left;
}

Soumis par DavP le 5 Août, 2009 - 17:44

Pour cela, il faut le module Imagecache dans lequel tu vas définir des tailles de vignettes (associés à des noms).

Ensuite, tu devras définir dans les paramètres d'affichage de ton imagefield cck, quelle type de vignette afficher dans le teaser ou le node complet.

Bon, je pense que j'ai suffisamment bien aidé pour tout ça, je te laisse te débrouiller pour la suite. :)

Soumis par M61t (non vérifié) le 17 Août, 2009 - 00:57

Bonjour,

Aujourd'hui j'aimerais aussi mettre à gauche ces images sur ma page d'accueil.
Je suppose que le code reste identique ?

div.field div.field-items img.imagefield {
float:left;
}

Mais ou faut t-il le placer dans le CSS ?

Merci