Rubriques revue de presse et liens

Fichier de squelette rubrique-33.html dans le répertoire contenu du plugin Zpip, strictement identique à rubrique-37.html à l’exception d’un filtre de boucle SPIP

[(#REM) LIENS ]
<BOUCLE_contenu_rubrique(RUBRIQUES){id_rubrique}>
<div class="contenu-principal galeries">
<div class="surlignable">
<div id="bio">

On déclare d’abord les conteneurs généraux de la page, qui formeront le grand cadre gris, avant de créer les deux cadres liste des rubriques sous forme de menu à gauche, et liste des articles sous forme de vignettes à droite.

<div id="liens_rubrik" class="menu">
	<B_sous_rubriques>
		<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent=33 }{par num titre, titre}>
				<a href="#URL_RUBRIQUE">[(#TITRE)]</a><br>
		</BOUCLE_sous_rubriques>
	</B_sous_rubriques>
</div>

La boucle de sélection des rubriques est extrêmement simple, on sélectionne les sous rubriques de "Revue de presse", à savoir donc les rubriques dont la rubrique parent est de numéro 33.
Puis on affiche simplement les liens ligne par ligne dans un cadre "liens_rubrik".

le style CSS correspondant est ;

#liens_rubrik {
	position:absolute;
	top:0;
	left:0;
	width:130px;
	border-right:1px solid black;
	font-size:15px;
	padding-left: 5px;
	padding-top: 5px;
}

Le cadre est fixé dans le bord haut gauche, sa largeur est fixe, de 130 pixels.
Sa hauteur est variable selon le nombre de lignes de liens qui s’afficheront dedans, ce qui permet à la bordure droite de ne pas dépasser les lignes.

<div id="liens_artikles">
	[(#REM) puis les articles - même taille ]
	<B_articles>
		<BOUCLE_articles(ARTICLES){id_rubrique}{lang} {par date}{inverse}>
			<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>

La boucle de sélection des articles n’est pas très compliquée, et l’affichage par vignettes se fait comme pour la rubrique Galerie (Sculpture et Peinture).
On prend les articles (ARTICLES) de la rubrique et de ses sous-rubriques en les filtrant par langue {lang} et en les triant par date du plus récent au plus ancien {par date}{inverse}

Style CSS du cadre des articles :

#liens_artikles {
	position:absolute;
	top:0;
	left:140px;
	right:5px;
	bottom:0;
	overflow-y:auto;
	padding-left: 5px;
	padding-top: 5px;
}

le cadre des articles est fixés à 140 pixels du bord gauche (puisque le cadre des rubriques fait 130 pixels de largeur), aux bords bas et haut, et à 5 pixels du bord droite, afin de prendre le reste de la page.
Un ascenseur vertical apparaîtra si besoin est overflow-y:auto;

Puis on ferme le cadre général

</div></div></div>
</BOUCLE_contenu_rubrique>

Fichier de squelette article-33.html dans le répertoire contenu du plugin Zpip, strictement identique à article-37.html à l’exception d’un filtre de boucle SPIP

<BOUCLE_contenu_article(ARTICLES){id_article}>

<div class="contenu-principal galeries">
<div class="surlignable">
<div id="bio">
<div id="liens_rubrik" class="menu">
	<B_sous_rubriques>
		<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent=33 }{par num titre, titre}>
				<a href="#URL_RUBRIQUE">[(#TITRE)]</a><br>
		</BOUCLE_sous_rubriques>
	</B_sous_rubriques>
</div>

<div id="liens_artikles">
	<B_articles>

Comme pour le squelette précédent, on retrouve les différents cadres : le cadre général (bio), le cadre de la liste des rubriques à gauche, et le grand cadre contenu à droite, qui cette fois ne contiendra pas les vignettes des articles mais le contenu de l’article sélectionné.

	<div class="cartouche">
		[(#LOGO_ARTICLE||image_reduire{200,200})]
		[<p class="#EDIT{surtitre} surtitre">(#SURTITRE)</p>]
		<h1 class="h1 #EDIT{titre}">#TITRE</h1>
		[<p class="#EDIT{soustitre} soustitre">(#SOUSTITRE)</p>]

		[(#REM) Inclure le modele des liens de traductions ]
		#MODELE{article_traductions}
	</div>

	<div class="surlignable">
		[<div class="#EDIT{chapo} chapo">(#CHAPO|image_reduire{500,0})</div>]
		[<div class="#EDIT{texte} texte">(#TEXTE|image_reduire{500,0})</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>]

	[<div class="ps">
		<h2 class="h2"><:info_ps:></h2>
		<div class="#EDIT{ps} surlignable">(#PS|image_reduire{500,0})</div>
	</div>]
	</B_articles>
</div>

La boucle d’affichage du contenu de l’article sélectionné est la même que pour les autres articles, on affiche le logo dans le cartouche avec le titre, et le texte avec ses documents en dessous.

</div></div></div>
</BOUCLE_contenu_article>

Dans un des articles de revue de presse, une courte vidéo est incluse au texte de l’article.
Cela est possible grâce au plugin SPIP "Lecteur de médias de MediaSPIP" (mediaspip_player).

• Lien de téléchargement dans le catalogue des plugins de SPIP : mediaspip_player.
• Documentation du plugin

Une fois le document (fichier vidéo) téléversé sur le site SPIP, on peut inclure le lecteur par le lien "emb" (embedded).

Afin d’être sûr que la taille du lecteur correspond à celle de la vidéo, j’ai mis le lien <emb dans un cadre.

<div style="max-width:720px;max-height:576px;"> 
<emb19|center|largeur=720|hauteur=576|autobuffer=auto>
</div>