Accueil > Développement web > Mes créations > Vader-fr.fr > Affichage d’une rubrique par vignettes
354 visites

Affichage d’une rubrique par vignettes

mardi 17 juin 2014

Version imprimable de cet article Version imprimable

La rubrique de mes Thèmes Zengarden affiche les sous-rubriques et articles par vignettes, et non sous forme de liste comme dans les autres rubriques.

Comment mettre en place ce format d’affichage ?

1) la boucle SPIP

Pour éviter d’avoir ce format d’affichage dans toutes les rubriques, il ne faudra le mettre que dans des squelettes de rubriques dédiés.

Ne faire ce format d’affichage que pour des rubriques avec relativement peu d’articles car il n’y a pas de système de pagination.

à l’intérieur de la <BOUCLE_contenu_rubrique(RUBRIQUES){id_rubrique}>, il faudra créer 2 boucles, une pour les rubriques, auxquelles on ajoute une petite icône style "répertoire", et une pour les articles.

Je ne vais pas expliquer le fonctionnement complet de la boucle SPIP ici, simplement le code HTML généré.

On sélectionne dans la table des rubriques, selon l’identifiant de la rubrique parent (la rubrique affichée) et on trie de manière alphanumérique par le titre au lieu de la date de publication.
Ainsi, les vignettes seront dans l’ordre alphabétique, ce qui est plus simple pour les visiteurs.

        <B_sous_rubriques>
                        <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>

On génère un bloc div, dont la classe de style permettra un traitement adéquat.

                                <div class="vignettes_rubrique">

Dans ce bloc, on affiche le logo de l’article (ou de la rubrique), en le réduisant aux bonnes dimensions, grâce au filtre |image_reduire{250,150}.

En dessous de l’image (en raison de l’utilisation d’un bloc paragraphe), mais toujours dans le même cadre, on affiche le titre de l’article (ou de la rubrique).

                                        <a href="#URL_RUBRIQUE">[(#LOGO_RUBRIQUE|image_reduire{150,70})]<p class="texte">[(#TITRE)]</p></a>
                                </div>
                        </BOUCLE_sous_rubriques>
        </B_sous_rubriques>       

Articles et rubriques auraient pu avoir une classe CSS identique, mais il est préférable de faire une différence afin que celle-ci soit visible pour les visiteurs.

la boucle pour les articles :

        <B_articles>
                <BOUCLE_articles(ARTICLES){id_rubrique} {par num titre, titre}>
                        <div class="vignettes_article">
                                <a href="#URL_ARTICLE">[(#LOGO_ARTICLE|image_reduire{150,70})]<br>#TITRE</a>
                        </div>
                </BOUCLE_articles>
        </B_articles>

2) le style CSS

Toutes les vignettes s’alignent dans le même cadre, grâce à la propriété de style float:left.

Comme il n’y a pas de pagination, il faudra permettre au cadre conteneur de défiler, avec la propriété de style overflow-y:auto, qui affichera donc un "ascenseur" vertical si le contenu dépasse la taille du cadre.
Sauf si le cadre n’est pas "fixé" en taille fixe ou à distance fixe des bords en position:absolute (ou position:relative), auquel cas il pourra s’agrandir à volonté... et la page avec.

Tout d’abord, la taille et le positionnement, communs aux deux classes de vignettes.
La taille doit être cohérente avec celle du filtre de la boucle SPIP, et prévoir la hauteur du texte sous l’image.

La propriété de style float:left permet de faire "flotter" les blocs, qui vont s’aligner les uns à côtés des autres, puis "couler" à la ligne suivante.

.vignettes_rubrique, .vignettes_article {
        width:150px;
        height:100px;
        float:left;
        margin: 10px;
        text-align: center;
}

De même, les images (éléments HTML correspondants à la balise HTML img) contenus dans un bloc de classe vignettes, auront une taille limitée par le style CSS.

Dans la mesure où la taille des images est limitée par le filtre de la boucle SPIP, cette précaution n’est pas nécessaire.

.vignettes_rubrique img, .vignettes_article img {
        max-width:150px;
}

Pour les blocs des vignettes de rubriques, on ajoute une image d’arrière plan, en forme d’icône de répertoire, qui sera positionnée en bas à droite, et non répétée.
Cette image est située dans le même répertoire que le CSS, même si le CSS est question est invoqué par un CSS de thème situé dans un sous-répertoire, dans le cas d’une feuille de style commune (ce qui est le cas pour ce site).

.vignettes_rubrique {
        background-image:url("icon_rep.png");
        background-position:bottom right;
        background-repeat:no-repeat;
}

En raison de la présence de cette vignette, il faut, afin que le texte (titre) des blocs vignettes de rubriques reste lisible et ne passe pas devant, ajouter une marge à droite, ici de 32px.

.vignettes_rubrique .texte {
        margin: 0 32px 0 0;
}

Répondre à cet article

Total 190893 visites depuis 2730 jours | Site réalisé par Vader[FR] | SPIP | | Plan du site | Suivre la vie du site RSS 2.0 | contact mail