411 visites

Rubriques revue de presse et liens

samedi 13 décembre 2014

Version imprimable de cet article Version imprimable

Ces deux rubriques fonctionnent exactement sur le même principe et ont donc le même squelette

En haut à gauche, un menu des sous-rubriques liste les sous-rubriques qui contiennent des articles, une barre verticale séparant ce menu du contenu : liste des articles sous forme de vignettes (page rubrique) ou contenu de l’article (page article).

Le squelette étant le même pour les rubriques que les sous rubriques, les fichiers correspondants dans le répertoire contenu du plugin Zpip sont :

  • rubrique-33.html pour la rubrique "Revue de presse" et ses sous rubriques (articles de presse et médias télévision/radio)
  • rubrique-37.html pour la rubrique "Liens" et ses sous rubriques (artistes, réseaux, galeries et salon)
  • article-33.html pour les articles de la rubrique "Revue de presse" et ses sous rubriques
  • article-37.html pour les articles de la rubrique "Liens" et ses sous rubriques

Squelette des rubriques

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>

Squelette des articles

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>

Inclusion de vidéo

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).

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>

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