372 visites

Rubrique actualités

jeudi 25 décembre 2014

Version imprimable de cet article Version imprimable

Squelette de la rubrique

La rubrique actualité s’affiche sous la forme d’une liste d’articles (titre + début du texte) à gauche, d’une image à droite et d’un éventuel bloc de liens de pagination en dessous de la liste des articles, si besoin est.

Dans la mesure où la rubrique ne comporte pas de sous-rubrique, le squelette est rubrique=13.html dans le dossier contenu du plugin Zpip.

[(#REM) Actualites ]

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

On reprend la structure habituelle avec le cadre gris.

<B_article_detail>
<div id="expos_detail" class="menu articles">

Pour simplifier, on réutilise des éléments déjà déclarés.

Le cadre principal contient 3 blocs :

  • actus_liste, la liste des actualités (titre + résumé du texte)
  • expos_pagination, les liens de pagination si besoin est
  • actus_photo : la photo

actus_liste

        <div id="actus_liste">
        #ANCRE_PAGINATION
        <ul>
        <BOUCLE_article_detail(ARTICLES){id_rubrique=13} {par date}{inverse}{lang} {pagination 10}>

On travaille sur les articles de la rubrique 13, en les triant pas ordre chronologique inverse (du plus récent au plus ancien), le tout filtré par la langue choisie sur le site, et en sélectionnant 10 articles par page.
Cette boucle SPIP est dans une lite <ul> et les éléments de liste <li> seront donc répétés pour chaque article.

                <li class="hentry">
                                        <h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a> </h3>
                                        [(#TEXTE|couper{80})]

On affiche le titre dans un lien, puis les 80 premiers caractères du texte, obtenus par le filtre |couper{80}.

Il ne reste ensuite plus qu’à fermer l’élément de liste, la liste de la boucle d’affichage, la boucle générale (de détail des articles) étant fermées plus loin de manière à englober le bloc pagination et y générer les liens de pagination.

                                </li>
        </BOUCLE_article_detail>
        </ul>
        </div>

style CSS du bloc :

#actus_liste {
        position:absolute;
        top:0;
        left:0;
        width:60%;
        bottom:50px;
        overflow-y:auto;
        padding-left:50px;
}

Le bloc est fixé dans la page, aux bords gauche et haut, à 50 px du bas pour laisser la place au bloc pagination, et ne prend que 60% de la largeur de son conteneur, pour laisser de la place au bloc photo.
Un espace de 50px entre son bord gauche et le contenu permet de l’aérer visuellement, et grâce à la propriété overflow-y:auto, un ascenseur vertical apparaîtra dans ce cadre si besoin est.

expos_pagination

On y affiche simplement la pagination correspondant à la boucle de sélection des articles.
Le mot clé #PAGINATION n’étant pas valable en dehors d’une boucle, c’est pourquoi la boucle générale de sélection des articles (<B_article_detail>, à ne pas confondre avec la boucle d’affichage, <BOUCLE_article_detail(ARTICLES){id_rubrique=13}....) se referme plus loin.

        <div id="expos_pagination">[<p class="pagination">(#PAGINATION)</p>]</div>

style CSS du bloc :

#expos_pagination {
        position:absolute;
        height:50px;
        left:0;
        right:10px;
        bottom:0;
        text-align:center;
}

Le bloc est fixé dans la page, aux bords gauche et bas, hauteur limitée à 50px pour ne pas déborder sur le cadre précédent, à 10 px du bord droite pour laisser une marge entre le contenu et le bloc général, son contenu (les liens de paginations) étant justement centré.

actus_photo

ici, une autre boucle SPIP va chercher au hasard une photo (et une seule) dans une rubrique dédiée, laquelle est cachée dans la rubrique 1 ("Accueil"), et non visible directement sur le site.

On travaille sur les articles, de la rubrique 38, en triant par hasard, et en se limitant à un seul élément.
Puis le logo de l’article est ensuite affiché.

        <div id="actus_photo">
        <B_actus_photo>
        <BOUCLE_actus_photo(ARTICLES){id_rubrique=38}{par hasard}{pagination 1}>
                        [(#LOGO_ARTICLE)]
        </BOUCLE_actus_photo>
        </B_actus_photo>
        </div>

Style CSS du bloc :

#actus_photo {
        bottom:50px;
        position:absolute;
        top:0;
        right:0;
        width:30%;
}

Le bloc est fixé dans la page, aux bords droit et haut, à 50 px du bas pour laisser la place au bloc pagination, et sa largeur est limitée à 30% de son conteneur, ce qui, avec une largeur de 60% pour son voisin (liste des actualités), laisse 10% de la largeur du bloc général comme marge entre les deux.
L’image du bloc sera traitée par un script JavaScript pour la redimensionner de manière proportionnelle.

Puis on ferme le div principal, la boucle du détail sur les articles, ainsi que les blocs généraux et la boucle de la rubrique.

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

Squelette des articles

Les articles de la rubrique actualité s’affichent sous la forme d’une photo (le logo) à gauche, et du titre + texte à droite.

Dans la mesure où la rubrique ne comporte pas de sous-rubrique, le squelette devrait être article=13.html dans le dossier contenu du plugin Zpip.
Toutefois, le fichier squelette est article-13.html, car plusieurs sous-rubriques étaient prévues avant.

[(#REM) Actualites ]

<BOUCLE_contenu_article(ARTICLES){id_article}>

<div id="expos">
        <div id="expos_image">
                #LOGO_ARTICLE
        </div>       
        <div id="expos_texte">

Le cadre général est divisé en 2 blocs :

  • expos_image, contenant le logo de l’article.
    • fixé dans la page à 80px du haut, 25px du bas, au bord gauche #expos_image { position:absolute; top:80px; left:0; bottom:25px;
    • de largeur limitée à 49% de son conteneur. width:49%; }
    • Son image sera traitée par un script JavaScript.
  • expos_texte ; contenant le cartouche (titres), le contenu "surlignable" (chapeau et texte, y compris documents et images incorporées au texte), le lien vers un article ou site, et les notes de bas de page.
    • fixé lui aussi dans la page à 80px du haut, mais à 0px du bas, et au bord droit #expos_texte { position:absolute; top:80px; right:0; bottom:0;
    • sa largeur est également limitée à 49% de son conteneur, afin que les deux blocs ne se chevauchent pas. width:49%;
    • sa largeur maximale est de 500px afin de limiter la longueur des lignes de texte à lire max-width:500px;
    • un espacement interne de 10px entre son bord droit et le contenu permet de l’aérer visuellement. padding-right:10px;
    • le contenu (texte et images ou documents) pouvant être trop grand pour le cadre, un ascenseur vertical viendra automatiquement en cas de besoin. overflow-y:auto; }

Du reste, les boucles sont quand à elles classiques des articles : logo, titre, texte, lien...

                <div class="cartouche">
                        [<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)</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>]
        </div>
</div>

</BOUCLE_contenu_article>

Répondre à cet article

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