PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 20/02/2018 15:24:03

Framboisier
Membre
Inscription : 25/01/2018
Messages : 15

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

Bonjour à tous,

La page d'accueil de mon bientôt superbe site smile 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 smile, fonctionne, mais uniquement en mode affichage d'articles individuels sad
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.

Dernière modification par Framboisier (23/02/2018 13:41:45)

Hors ligne

#2 20/02/2018 16:06:30

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 087
Site Web

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

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.

Hors ligne

#3 20/02/2018 17:45:33

Gzyg
Membre
Inscription : 25/09/2006
Messages : 871
Site Web

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

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/W … :nth-child


à plus,

Gzyg

Hors ligne

#4 20/02/2018 18:01:02

niqnutn
Membre
Inscription : 21/09/2015
Messages : 366

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

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

Hors ligne

#5 21/02/2018 10:59:33

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 087
Site Web

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

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  big_smile

Hors ligne

#6 21/02/2018 23:40:21

Framboisier
Membre
Inscription : 25/01/2018
Messages : 15

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

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.

Hors ligne

#7 23/02/2018 13:39:49

Framboisier
Membre
Inscription : 25/01/2018
Messages : 15

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

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!

Hors ligne

#8 23/02/2018 16:51:44

Gzyg
Membre
Inscription : 25/09/2006
Messages : 871
Site Web

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

Bien joué ! smile

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

Hors ligne

#9 23/02/2018 23:50:53

Framboisier
Membre
Inscription : 25/01/2018
Messages : 15

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

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 tongue
A plus!

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2018 PluXml.org, tous droits réservés