[résolu] Comment alterner image d'accroche à gauche et à droite ?

Réponses

• bazooka07 PluXml Lead Developer, Moderator

  février 2018

  Les templates article.php et Cie n'affichent qu'un article à la fois.
  
  Pour aficher plusieurs articles , il faut utiliser les templates home.php, categorie.php ou archives.php et modifier la boucle des articles comme suit :

  [== PHP ==]
  $impaire = true;
  <?php while($plxShow->plxMotor->plxRecord_arts->loop()) { ?>
      if($impaire) { $plxShow->artThumbnail(); }
      $plxShow->artChapo();
      if(!$impaire) { $plxShow->artThumbnail(); }
      $impaire = !$impaire;
  <?php } ?>
  

  
  Attention aux points d'exclamation qui signifient la négation ou l'inverse.

  Accès à mon dépôt de plugins et thèmes
  installe PluXml plus vite que ton ombre avec kzInstall2
• Gzyg Member

  février 2018

  Salut,
  
  Tu peux aussi le faire en css (qui est fait pour la présentation) avec :even et :odd si ton affichage est n*2 ou en jouant avec les nth-child
  
  https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child
  
  
  à plus,
  
  Gzyg
• niqnutn Member

  février 2018

  @Gzyg: je pense aussi que passer par du css est plus pertinent.
• bazooka07 PluXml Lead Developer, Moderator

  février 2018

  Je propose une solution plus simple à quelqu'un qui ne maitrise pas forcément toutes les subtilités du CSS3.
  De plus cela se passe côté serveur, c'est sensé être rapide et non dépendant du navigateur
  
  J'ose espérer que vous suggérez l'emploi du flexbox en css3

  Accès à mon dépôt de plugins et thèmes
  installe PluXml plus vite que ton ombre avec kzInstall2
• Framboisier Member

  février 2018

  Waouwww! Quel déferlement d'idées! Merci à tous!
  Cette fois-ci j'y ai pas coupé: j'ai bien dû me plonger, pour la première fois, dans la doc php et css... ben pour me rendre compte, je le pensais bien, que c'est vaste... d'où mon temps à réagir.
  
  @ l'approche php:
  je ne comprends pas bien comment fonctionne ton script, Bazooka07. Je ne doute pas qu'il est bon, et plus que bon sûrement, mais y a trop de trucs qui m'échappent encore en php. Alors j'ai simplement copié-collé, à la hussarde, ton script à la place de la ligne:
  <?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
  de mon home.php, mais du coup la page d'accueil ne s'affiche plus. Que dois-je rectifier?
  Je vois aussi que ton scripte joue sur pair et impair, mais je ne vois pas où se fait le lien avec image à gauche et image à droite. Peux-tu m'expliquer en deux mots?
  
  @ l'approche css:
  :nth-child(even)/(odd) : ça pourrait être la solution la plus simple, presque trop simple: peut-elle s'appliquer dans mon cas où il ne s'agit pas à proprement parler d'une liste? Ou comment faire d'une boucle une liste? Mes essais n'ont en tout cas pas réussi, mais je l'ai peut-être mal appliquée, voilà ce que j'ai tenté:
  

  [== CSS ==]
  }
  .article img.art_thumbnail:nth-child(odd) {
      display: inline-block;
      float: left;
      padding: 5px 10px 10px 0;
  }
  .article img.art_thumbnail:nth-child(even) {
      display: inline-block;
      float: right;
      padding: 5px 10px 10px 0;
  }
  

  
  Essayé aussi avec:
  .article:nth-child(odd) img.art_thumbnail
  Essayé aussi:
  .article img.art_thumbnail:nth-of-type(odd) {
  
  - ":even et :odd si ton affichage est n*2": que veut dire n*2, Gzyg ? :even et :odd semblent plus liés à jQUERY que Css ? compatibles ?
  
  -Quant à flexbox, je m'en vais voir de ce pas de quoi il retourne, et je vous dis quoi.
  Merci d'avance pour vos retours.
• Framboisier Member

  février 2018

  YESSSS!!!
  
  C'était bien :nth-of-type qui convenait, simplissime, mais j'avais encore une fois dû l'écrire comme un pied (c'est le cas de le dire pour mes premiers pas en css)...
  Avec ceci, ça passe effectivement comme une lettre à la poste (si on peut encore employer cette expression):
  

  [== CSS ==]
  }
  .article:nth-of-type(odd) img.art_thumbnail {
      display: inline-block;
      float: left;
      padding: 5px 10px 10px 0;
  }
  .article:nth-of-type(even) img.art_thumbnail {
      display: inline-block;
      float: right;
      padding: 5px 10px 10px 0;
  }
  

  
  Merci encore pour vos interventions, et à bientôt!
• Gzyg Member

  février 2018

  Bien joué !
  
  Sinon, sauf cas particulier, tes deux padding sont identiques ce qui ne me semble pas cohérent avec un affichage alterné.
  L'image calée à droite devrait avoir un padding de 0 à droite et de 10px à gauche (inverse de l'image calée à gauche).
  
  
  à plus,
  
  Gzyg
• Framboisier Member

  février 2018

  Juste, Gzyg, c'est bien noté, merci, je vais tester différents paddings.
  Et je viens de découvrir aussi et d'ajouter un border-radius qui adoucit impeccablement les coins des photos :P
  A plus!