Rubriques galeries
dimanche 2 novembre 2014 (), par
Galerie
Tout comme la page de garde, la rubrique galerie contient un diaporama des articles des sous-rubriques.
Par défaut, le logo de la rubrique galerie est affiché, avant le lancement du diaporama ou au cas où JavaScript serait désactivé.
Fichier de squelette rubrique=3.html dans le répertoire contenu du plugin Zpip.
[(#REM) RUBRIQUE 3 = galeries ]
[(#REM) barre de navigation : sous-rubriques de rubrique 3 ]
[(#REM) MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
<INCLURE{fond=inclure/barre-nav-gal,env}> Tout comme pour les rubriques biographie et expositions, on inclut un squelette commun de barre de navigation.
Les squelettes de la rubrique galerie (rubrique=3.html), ses sous rubriques (rubrique-3.html) et les articles de la rubrique galerie ou de ses sous rubriques (article-3.html) partageant la même barre de navigation, pour des squelettes qui peuvent ensuite différer, l’inclusion prend ici tout son sens.
En effet, affiche/bitume et peinture/sculpture ont des aspects complètement différents dans l’espace public, les premiers étant affichés en grand avec une liste de vignettes en dessous, les autres avec des vignettes par sous rubriques (séries ou formats) et articles.
<BOUCLE_contenu_rubrique(RUBRIQUES){id_rubrique}>
<div class="contenu-principal galeries">
<div id="diapo">
<input type="hidden" name="nrubrique" id="nrubrique" value="#ID_RUBRIQUE"/>
<input type="hidden" name="mindepth" id="mindepth" value="0"/>
<input type="hidden" name="maxdepth" id="maxdepth" value="3"/>
<input type="hidden" name="lang" id="lang" value="#LANG"/>
<div id="diapo_image">
[(#LOGO_RUBRIQUE)]
</div>
<div id="diapo_texte">
<h1 class="h1 #EDIT{titre}">#TITRE</h1>
<font color="red"><b>JavaScript doit être activé pour que le diaporama puisse démarrer</b></font>
</div>
</div>
</BOUCLE_contenu_rubrique>
</div> <!-- contenu principal-->Pour le reste, le principe est le même que pour la page de garde.
Barre de navigation
<div id="nav">
<B_sous_rubriques>
<div class="menu-liste">
<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent=3} {par id_rubrique}>
<div class="menu-entree">
<a href="#URL_RUBRIQUE" [ class="(#EXPOSE)"]>[(#TITRE)]</a>
</div>
</BOUCLE_sous_rubriques>
</div>
</B_sous_rubriques>
</div>Comme pour les autres, on liste les sous-rubriques de la rubrique galerie, à savoir donc les rubriques dont la rubrique parente est la numéro 3.
Les sous-rubriques sont classées non pas par ordre alphabétique, mais par numéro de rubrique, et donc l’ordre dans lesquelles elles ont été créées.
la balise #EXPOSE de SPIP, comme classe CSS éventuelle [1] du lien permet de définir une classe CSS particulière (class="on") sur le lien d’une sous-rubrique si le contenu de celle-ci est affiché dans la page.
Une règle CSS commune aux liens des trois barres de navigation #nav a.on, #nav_bio a.on, #nav_expo a.on permet de définir une propriété de couleur d’arrière plan du lien background-color:white; afin de le mettre en valeur.
Affiche et Bitume
Ces deux sous-rubriques de galerie ne contenant que des articles, car il y a moins d’œuvres de ce type que de peintures et sculptures, les œuvres (articles) sont affichées en grand, logo à gauche, texte à droite, avec une liste de vignette en dessous, laquelle est paginée.
Les squelettes rubrique-5.html et rubrique-18.html dans le répertoire contenu de Zpip sont donc strictement identiques.
[(#REM) barre de navigation : sous-rubriques de rubrique 3 ]
[(#REM) MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
<INCLURE{fond=inclure/barre-nav-gal,env}>
<BOUCLE_contenu_rubrique(RUBRIQUES){id_rubrique}>On travaille sur le contenu d’une rubrique, la boucle principale est bien sûr invoquée.
<div class="contenu-principal galeries">
<div id="peintures"">
[(#REM) articles au dessus, logo à gauche, texte à droite ]
<B_contenu_edition>
<BOUCLE_contenu_edition(ARTICLES){id_rubrique}{par date}{inverse}{lang}{pagination 1}{debut_pagination_articles, 1}>Étant donné que l’on va afficher le contenu d’un article, il faut créer une boucle :
- travaillant sur les articles,
(ARTICLES) - de la rubrique précédemment sélectionnée par la boucle principale
{id_rubrique} - on trie par date, depuis le plus récent
{par date}{inverse} - en n’affichant qu’un seul article,
{pagination 1}{debut_pagination_articles, 1}
<div id="peintures_image">
[(#LOGO_ARTICLE_RUBRIQUE)]
</div>
<div id="peintures_contenu">
[<h1 class="h1 #EDIT{titre} titre_article">#TITRE</h1>(#TEXTE)]
</div>
</BOUCLE_contenu_edition>On affiche ensuite logo, titre et texte de l’article.
Puis la pagination par vignettes, via une boucle SPIP.
</B_contenu_edition>
<div id="peintures_pagination">
<hr>
[(#REM) pagination par date + précédent/suivant ]
<B_pagination_articles>
#PAGINATION{precedent_peintures}
<BOUCLE_pagination_articles(ARTICLES){id_rubrique}{par date}{inverse}{lang}{pagination 10}>
<a href="#URL_ARTICLE" title="#TITRE">[(#LOGO_ARTICLE|image_reduire{150,63})]</a>
</BOUCLE_pagination_articles>
#PAGINATION{suivant_peintures}
</B_pagination_articles>
</div>
</div>
</BOUCLE_contenu_rubrique>
</div> <!-- contenu principal-->La pagination étant particulière (boucle sur les articles pour vignettes + liens "précédent" et "suivant"), voici le détail
Peinture et Sculpture
Ces deux sous-rubriques de galerie contenant aussi bien des sous-rubriques que des articles, les séries/formats (rubriques) et œuvres (articles) sont affichées en vignettes.
Les squelettes rubrique=9.html et rubrique=6.html dans le répertoire contenu de Zpip sont donc strictement identiques.
Les sous-rubriques (séries d’œuvres) de ces sous-rubriques (peinture/sculpture) utilisent un squelette identique au deux rubriques précédentes (affiche/bitume).
Le système est très simple, deux boucles SPIP vont chercher logo, titre et lien des sous-rubriques, puis des articles de la rubrique, chacun étant affiché dans un bloc contenant le lien via le logo et le titre. Le style CSS se charge du reste en faisant "flotter" ces blocs pour les aligner sur une grille.
[(#REM) RUBRIQUE 9 = peintures ]
[(#REM) barre de navigation : sous-rubriques de rubrique 3 ]
[(#REM) MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
<INCLURE{fond=inclure/barre-nav-gal,env}>
<BOUCLE_contenu_rubrique(RUBRIQUES){id_rubrique}>
<div class="contenu-principal galeries">
<div id="diapo" style="overflow-y:auto;padding:20px;">
[(#REM) D'abord les sous-rubriques avec une icône spéciale style "dossier" en bas à droite ]
<B_sous_rubriques>
<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par date}{inverse}>
<div class="vignettes_rubrique">
<div class="vignette_img">
<a href="#URL_RUBRIQUE">[(#LOGO_RUBRIQUE|image_reduire{100,100})]</a>
</div>
<a href="#URL_RUBRIQUE"><p class="texte">[(#TITRE)]</p></a>
</div>
</BOUCLE_sous_rubriques>
</B_sous_rubriques>
[(#REM) puis les articles - même taille ]
<B_articles>
<BOUCLE_articles(ARTICLES){id_rubrique} {par date}{inverse}{lang}>
<div class="vignettes_article">
<div class="vignette_img">
<a href="#URL_ARTICLE">[(#LOGO_ARTICLE|image_reduire{100,100})]</a>
</div>
<a href="#URL_ARTICLE"><p class="texte">#TITRE</p></a>
</div>
</BOUCLE_articles>
</B_articles>
</div>
</BOUCLE_contenu_rubrique>
</div> <!-- contenu principal-->Style CSS des vignettes :
.vignettes_rubrique, .vignettes_article {
float:left;
width:130px;
height:130px;
margin: 20px;
padding:20px;
text-align: center;
background-color:#DEDEDE;
}Les blocs de classe vignette_rubrique et articles sont donc positionnés de manière "flottante", en les alignant les uns après les autres en commençant à gauche. D’où la propriété de style float:left
Afin de permettre un bon alignement, les blocs ont une taille fixe. Le contenu (le texte du lien ainsi que l’image) est centré, et le fond est grisé. Un espace intérieur (padding) de 20 px s’ajoute à un autre, extérieur (margin), pour séparerle bord du cadre de son contenu, et les vignettes entre elles.
.vignettes_rubrique img, .vignettes_article img{
max-width:100px;
}
.vignette_img {
height:100px;
}Bien que la boucle SPIP génère une image de bonne taille grâce au filtre "image réduire" [(#LOGO_ARTICLE|image_reduire{100,100})], dans le doute, on limite la taille des images à celle de leur bloc, 100 pixels.
.vignettes_rubrique .texte, .vignettes_article .texte {
margin:0;
padding-bottom: 5px;
padding-top: 5px;
}Articles
Par la suite, les articles ont la même structure que pour les affiches ou les bitumes, avec l’œuvre en grand et la liste paginée des autres articles sous forme de vignettes en dessous.
De la même manière que pour les rubriques, les squelettes des articles article-5.html, article-6.html, article-9.html et article-18.html sont strictement identiques.
La boucle est la même que celle dans le squelette rubrique (affiche/bitume), on y adjoint simplement les liens vers les autres langues de l’article.
[(#REM) barre de navigation : sous-rubriques de rubrique 3 ]
<INCLURE{fond=inclure/barre-nav-gal,env}>
<BOUCLE_contenu_article(ARTICLES){id_article}>
<div class="contenu-principal galeries">
[(#REM) Inclure le modele des liens de traductions ]
#MODELE{article_traductions}
<div id="peintures"">
[(#REM) articles au dessus, logo à gauche, texte à droite ]
<B_contenu_edition>
<BOUCLE_contenu_edition(ARTICLES){id_article}>
<div id="peintures_image">
[(#LOGO_ARTICLE_RUBRIQUE)]
</div>
<div id="peintures_contenu">
[<h1 class="h1 #EDIT{titre} titre_article">#TITRE</h1>(#TEXTE)]
</div>
</BOUCLE_contenu_edition>
</B_contenu_edition>
<div id="peintures_pagination">
<hr>
[(#REM) pagination par date + précédent/suivant ]
<B_pagination_articles>
#PAGINATION{precedent_peinture}
<BOUCLE_pagination_articles(ARTICLES){id_rubrique}{par date}{inverse}{lang}{pagination 10}>
<a href="#URL_ARTICLE" title="#TITRE">[(#LOGO_ARTICLE|image_reduire{150,63})]</a>
</BOUCLE_pagination_articles>
#PAGINATION{suivant_peinture}
</B_pagination_articles>
</div>
</div>
[(#REM) Gestion du portfolio et des documents ]
[(#INCLURE{fond=inclure/documents}{id_article})]
</div>
[<div class="notes surlignable"><h2 class="h2 pas_surlignable"><:info_notes:></h2>(#NOTES)</div>]
</BOUCLE_contenu_article>Notes
[1] car entre [ ], ce qui permet à SPIP de ne rien générer en cas d’absence de contenu, dans le cas présent donc si la cible du lien n’est pas exposée
RSS 2.0