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

Framboisier

Bonjour à tous,

La page d'accueil de mon bientôt superbe site se compose(ra) d'une dizaine d'articles très courts, sans chapo, et avec image d'accroche de surface quasi équivalente au texte, et sans sidebar. D'un point de vue esthétique, assez important dans ce cas-ci, je voudrais que ces images d'accroche alternent de la gauche à la droite, d'un article à l'autre. Sans quoi, l'impression est assez lourde et pataude, les photos étant en quelque sorte "empilées".

J'ai essayé d'obtenir ça en créant un template (le premier de ma vie!) article-full-width-imageàdroite.php qui, à ma grande surprise , fonctionne, mais uniquement en mode affichage d'articles individuels .
Que ce soit en page d'accueil, page statique ou affichage de catégories, les photos sont de nouveau toutes empilées à gauche.

Quelqu'un verrait-il une façon de résoudre ça ??
Merci d'avance pour votre attention.

bazooka07

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.

Gzyg

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

@Gzyg: je pense aussi que passer par du css est plus pertinent.

bazooka07

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

Framboisier

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

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

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

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!