Rubriques biographie et expositions

mercredi 22 octobre 2014 (), par Vader[FR]

Ces deux rubriques fonctionnent exactement sur le même principe et ont donc le même squelette, à l’exception d’un appel à un sous-squelette qui contient un paramètre de boucle SPIP différent.

Une "barre de navigation" liste les 3 articles de la rubrique, celui dont les données sont affichées étant sur fond blanc.

En dessous, un cadre gris affiche les données du premier article rédigé, texte et logo.
Le squelette de la rubrique appelle en fait le squelette article, lequel inclut celui de la barre de navigation.

Exemple pour la rubrique 2 (biographie) :

Squelette de la rubrique

Fichier de squelette rubrique=2.html dans le répertoire contenu du plugin Zpip.

[(#REM) RUBRIQUE 2 = biographie ]

[(#REM)	MAIN NAVIGATION / NAVIGATION PRINCIPALE ]

<BOUCLE_contenu_rubrique(RUBRIQUES){id_rubrique}>
	<B_articles>
		<BOUCLE_articles(ARTICLES){id_rubrique} {par id_article}{lang} {pagination 1}>
			#INCLURE{fond=contenu/article,id_article,env}
		</BOUCLE_articles>
	</B_articles>
</BOUCLE_contenu_rubrique>

Ce squelette est extrêmement simple puisqu’il sélectionne un et un seul ({pagination 1}) article de la rubrique correspondant à la langue choisie (filtre {lang}), le tout trié par numéro d’article ({par id_article}).
Cela aurait pu être un tri sur le titre des articles, ou bien un article au hasard.

Une fois l’article sélectionné, on appelle le squelette article avec le numéro l’article à afficher.
SPIP sélectionnera automatiquement le squelette le plus approprié pour cet article.

Squelette article

Fichier de squelette article=2.html dans le répertoire contenu du plugin Zpip.

[(#REM) RUBRIQUE 2 = biographie ]

[(#REM)	MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
<INCLURE{fond=inclure/barre-nav-bio,env}>

Le squelette de l’article inclut celui de la barre de navigation.
De fait, la boucle contenue dans ce sous-squelette aurait pu être incluse directement dans le squelette article, mais la conception d’origine de cette rubrique impliquait deux squelettes rubrique/article bien distincts, qui partageaient la même boucle de barre de navigation, laquelle a donc été externalisée.

Voir onglet suivant pour la barre de navigation.

<BOUCLE_contenu_article(ARTICLES){id_article}>

Que ce soit dans la page d’affichage de l’article ou via l’appel depuis la page d’affichage de la rubrique, un numéro d’article est fourni, il n’y a donc pas besoin de filtre particulier.

<div class="contenu-principal galeries">
	<div class="surlignable">
		[<div class="#EDIT{chapo} chapo">(#CHAPO|image_reduire{500,0})</div>]
		<div id="bio">
			[<div id="bio_texte" style="overflow-y:auto;">(#TEXTE|image_reduire{500,0})</div>]
			<div id="bio_image">[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{275,0})]</div>
		</div>
	</div>

	[<p class="#EDIT{hyperlien} hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)" target="_blank" class="spip_out">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]

[(#REM) Gestion du portfolio et des documents ]
[(#INCLURE{fond=inclure/documents}{id_article})]

</div>

</BOUCLE_contenu_article>

L’indentation permet de suivre la hiérarchie des blocs.
Le reste du squelette est assez classique.

Style CSS associé

#bio, #peintures {
	position:absolute;
	left:0;
	top:55px;
	bottom:55px;
	right:55px;
	background-color:#999999;
}

Pour le bloc principal, fond gris et positionnement de manière absolute = fixé aux bords de son cadre conteneur (div de classe surlignable dans le div de classe galeries).
l’espace au dessus (55px) est dédié à l’affichage de la barre de navigation.

div.galeries {
	position:absolute;
	top:50px;
	bottom:0;
	left:0;
	right:5px;
	overflow-y:auto;
}

l’espace au dessus (50px) correspond à l’entête de la page.
le bloc de classe surlignable n’a pas de style CSS.

#diapo_image, #bio_texte, #peintures_image {
	position:absolute;
	left:25px;
	top:25px;
	bottom:25px;
}
#bio_texte { 
	right:300px; 
}
#diapo_texte, #bio_texte, #peintures_contenu {
	overflow-y:auto;
}

Le texte des articles de la rubrique biographie partage les mêmes propriétés de positionnement et de taille que les images des blocs peintures et diapo, utilisés dans d’autres pages.
Ici, le bloc image étant de taille fixe (275px de large), c’est le cadre texte qui s’adaptera en étant fixé à 300 pixels du bord droite, laissant toujours la même place libre pour le cadre image.
Les images étant redimensionnées automatiquement par un script JavaScript, seuls les blocs de texte disposeront d’un ascenseur vertical si besoin est (overflow-y:auto;).

#bio_image{
	width:275px;
}

#diapo_image img, #bio_image img, #peintures_image img {
	max-height:100%;
	max-width:100%;
}

#diapo_texte, #bio_image, #peintures_contenu {
	position:absolute;
	bottom:0;
	top:25px;
	right:5px;
	padding-right:5px;
}

L’image (logo) des articles de la rubrique biographie partage les mêmes propriétés de positionnement et de taille que les textes des blocs peintures et diapo, utilisés dans d’autres pages.
Seule la taille fixe est particulière au bloc image de la rubrique biographie.

Squelette barre de navigation

Fichier de squelette barre-nav-bio.html dans le répertoire inclure du plugin Zpip.

<div id="nav_bio">			
	<B_sous_bio>
		<div class="menu-liste">
			<BOUCLE_sous_bio(ARTICLES) {id_rubrique=2} {par id_article}{lang}>
			<div class="menu-entree">
				<a href="#URL_ARTICLE" [ class="(#EXPOSE)"]>[(#TITRE)]</a>
			</div>
			</BOUCLE_sous_bio>
		</div>
	</B_sous_bio>
</div>

Cette boucle va simplement chercher les articles de la rubrique n°2 (biographie) afin de lister leurs titres.
Le mot clé SPIP [ class="(#EXPOSE)"] permet de définir la classe CSS "on" sur le lien, si le contenu de l’article ou de la rubrique est "exposé", et donc affiché dans la page.
Cela permettra d’appliquer le style CSS suivant :

#nav a.on, #nav_bio a.on, #nav_expo a.on {
	background-color:white;
}

Ce qui mettra une couleur de fond blanche sur le lien de l’article dans la barre de navigation si celui-ci est affiché.

Style CSS associé aux barres de navigation (biographie, expositions..)

#nav, #nav_bio, #nav_expo {
	margin: 0;
	overflow: hidden;
	border: 0px solid #000000;
	position:absolute;
	top:30px;
	height:50px;
	left:0px;
	right:0;
}

#nav ul, #nav_bio ul, #nav_expo ul {
	margin: 0;
	padding: 0 0 0 0;
	list-style: none;
	line-height: normal;
}

#nav li, #nav_bio li, #nav_expo li {
	display: inline;
	text-align: center;
}

#nav a, #nav_bio a, #nav_expo a {
	display: block;
	height: 20px;
	text-decoration: none;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
	color: black;
	font-family: EurocentricRegular,Arial,Helvetica,sans-serif;
}

#nav .menu-liste, #nav_bio .menu-liste, #nav_expo .menu-liste {
	padding-left: 2%;
	padding-right: 2%;
}

#nav .menu-entree, #nav_bio .menu-entree, #nav_expo .menu-entree {
	border: 1px solid black;
	float: left;
	padding: 5px;
	text-align: center;
	width: 22%;
	background-color:#999999;
}

En ce qui concerne la taille du bloc du lien d’un article dans la barre de navigation, la propriété partagée définie ci-dessus est surchargée et donc remplacée par celle définie ci-dessous, car définie après la précédente.

#nav_bio .menu-entree, #nav_expo .menu-entree {
	width:30%;
}

Il y a également des propriétés de couleur et de taille de police pour l’évènement hover, correspondant au survol de la souris, et ce aussi bien pour les liens que pour les blocs.

#nav a:hover, #nav .active a, #nav .menu-entree.on a, #nav_bio a:hover, #nav_bio .active a, #nav_bio .menu-entree.on a, #nav_expo a:hover, #nav_expo .active a, #nav_expo .menu-entree.on a {
	color: #110404;
}

#nav .menu-entree:hover, #nav_bio .menu-entree:hover, #nav_expo .menu-entree:hover {
	background-color:#DEDEDE;
	font-size:1em;
}

De même pour les items de menu de la barre de navigation.

#nav .menu-entree .menu-liste, #nav .menu-entree .menu-liste a, #nav_bio .menu-entree .menu-liste, #nav_bio .menu-entree .menu-liste a, #nav_expo .menu-entree .menu-liste, #nav_expo .menu-entree .menu-liste a {
	display:inline;
	line-height:0;
	font-size:0px;
	height:0;
	padding-left:2px;
	padding-right:2px;
}
#nav .menu-entree:hover .menu-liste, #nav .menu-entree:hover .menu-liste a, #nav_bio .menu-entree:hover .menu-liste, #nav_bio .menu-entree:hover .menu-liste a, #nav_expo .menu-entree:hover .menu-liste, #nav_expo .menu-entree:hover .menu-liste a {
	font-size:0.825em;
	line-height:20px;
	height:20px;
}