[RÉSOLU] affichage des articles en mosaïque

nicomaxnicomax Member
septembre 2014 modifié dans Modifications
Salutatous,

Le contenu complet de mes articles s'affichent l'un en-dessous de l'autre à raison de 9 articles par page.

Je souhaiterais que ces 9 articles s'affichent,
d'une part, sous forme de mosaïque,
et d'autre part, de façon épurée (1 image + le titre de l'article),
ceci, à raison de 3 par lignes, soit 3 lignes de 3 articles.

Et au clic sur l'un des articles ça affiche le contenu complet de l'article en question.

Je pense dupliquer le fichier "categorie.php" et après renommage l'utiliser comme nouveau template.
Mais je ne sais pas comment coder ce que je souhaite...

Je tourne sur Pluxml 5.1.7 avec le tout dernier Thème Mystique.

Merci d'avance de vos lumières :)
Nico

Réponses

  • chrisschriss Member
    août 2014 modifié
    Bonjour,

    de ce style là: http://codepen.io/chrisss/pen/dLhBk

    EDIT: je n'arrive pas à enlever l'espace entre les colonnes.

    EDIT 2: 'Width' doit être à 24% pour 4 colonnes; 32% pour 3
  • nicomaxnicomax Member
    Bonjour Chriss,

    Pas mal ce code tout en CSS :)
    Je vais essayer ça...

    En fait ce que je souhaite reproduire c'est ça :
    http://www.davidrevoy.com/index.php

    Les articles des catégories sont affichés sous forme de mosaïque (image + titre), et quand on clique dessus ça affiche l'article complet avec ses commentaires.
    Note : qu'est-ce-qu'il est fort David Revoy en tant qu'illustrateur !
  • chrisschriss Member
    août 2014 modifié
    nicomax a écrit:
    Bonjour Chriss,

    Pas mal ce code tout en CSS :)
    Je vais essayer ça...

    En fait ce que je souhaite reproduire c'est ça :
    http://www.davidrevoy.com/index.php

    Les articles des catégories sont affichés sous forme de mosaïque (image + titre), et quand on clique dessus ça affiche l'article complet avec ses commentaires.
    Note : qu'est-ce-qu'il est fort David Revoy en tant qu'illustrateur !

    Merci...pas de mérite, j'utilise knacss pour cela.

    [del]Pour ce que tu veux tu peut là aussi utliser 'grid' de knacss.. c'est que je fais pour un projet d'albums photos.[/del]

    Dans les 'div' tu peut mettre ce que tu veux, comme tu le veux, texte, images, titre, etc...

    EDIT: j'ai modifié mon code, vérifi si cela te vas; Là encore je modifie 'width' dans 'autogrid4' pour tenir compte des margin
  • bg62bg62 Member
    nicomax a écrit:
    Bonjour Chriss,

    Pas mal ce code tout en CSS :)
    Je vais essayer ça...

    En fait ce que je souhaite reproduire c'est ça :
    http://www.davidrevoy.com/index.php

    Les articles des catégories sont affichés sous forme de mosaïque (image + titre), et quand on clique dessus ça affiche l'article complet avec ses commentaires.
    Note : qu'est-ce-qu'il est fort David Revoy en tant qu'illustrateur !
    tiens il a changé le look de son site, une fois de plus :)
    Attention cet homme est dangereux !!!
    Trop fort .... et de passage occasionnellement sur le forum :)

    mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

  • nicomaxnicomax Member
    Cool ça fonctionne parfaitement :cool:

    Dans mon fichier "style.css" j'ai donc ajouté ceci :
    [== CSS ==]
.autogrid3 > * { width: 26%; }

[class*="autogrid"] > * {
    display: inline-block;
}

    Et dans mon fichier "categorie-collection.php", j'ai encadré la boucle while comme ceci :
    [== Indéfini ==]
<div class="autogrid3">
     <?php while($plxShow->plxMotor->plxRecord_arts->loop()): # On boucle sur les articles ?>
          .../...
     <?php endwhile; # Fin de la boucle sur les articles ?>
</div>

    Merci encore Chriss
  • chrisschriss Member
    Bonjour,

    Ok je t'envoie la facture... O:)
  • DeevadDeevad Member
    bg62 a écrit:
    nicomax a écrit:
    En fait ce que je souhaite reproduire c'est ça :
    http://www.davidrevoy.com/index.php
    Les articles des catégories sont affichés sous forme de mosaïque (image + titre), et quand on clique dessus ça affiche l'article complet avec ses commentaires.
    Note : qu'est-ce-qu'il est fort David Revoy en tant qu'illustrateur !
    tiens il a changé le look de son site, une fois de plus :)
    Attention cet homme est dangereux !!!
    Trop fort .... et de passage occasionnellement sur le forum :)

    :D
    Je venais de reprendre la bidouille sur mon pluxml pour un relooking 2015 et en lisant le forum , je suis tombé sur cette discutions. C'est flatteur, merci !
    Je suis dans le coin si il y a besoin d'un truc/d'une méthode qui est sur mon site, j'ai fait pas mal de bidouille mais je veux bien les partager.
    Tout tourne autour du plugin Vignette de Rockyhorror ; ou je récupère une image d'illustration de chaque article et transforme à la volé avec timthumb.
    Le reste, du bidouillage de la classe lastArtList pour afficher aussi une douzaine des dernières vignettes en page statique.
  • PierrePierre Member
    Un petit rappel de sécurité, Timthumb a été la porte d'entrée de plusieurs activités malicieuses comme le défaçage par des petits rigolos. Je n'en ai pas été vicitme personnellement mais notre ami Jerry Wham n'a pas manqué de me le rappeler quand je donnait l'an dernier des suggestions qui incluaient le fameux outil.

    La bonne nouvelle est que Timthumb peut être assez facilement remplacé par un outil nouveau et amélioré appelé Cimage, j'en ai parlé dans la discussion

    http://forum.pluxml.org/viewtopic.php?pid=44702#p44702

    où je relevais mes manches pour un week-end d'acharnement et me suis retrouvé avec une petite opération d'une heure ou deux qui s'est admirablement bien passée. Les fonctions de Cimage incluent toutes et chacunes des configurations auxquelles Timthumb nous avait habitués, et une multitude de nouvelles. L'excuse pour garder Timthumb s'effrite, c'est une question de sécurité.

    Alors, à vos github, l'adresse est https://github.com/mosbth/cimage
Connectez-vous ou Inscrivez-vous pour répondre.