Skip to content

Accueil > Solution documentaire PMB > PMB : afficher la couverture des périodiques

PMB : afficher la couverture des périodiques

jeudi 14 mars 2013, par Florian Reynaud

Cet article présente la procédure qui permet l’affichage des illustrations des couvertures des derniers périodiques reçus au CDI, comme présenté sur la page d’accueil du catalogue du CDI en lien ici : http://www.clg-rimbaud-aubergenville.ac-versailles.fr/pmb/opac_css/

Dès que je reçois un nouveau numéro, je récupère une illustration de la couverture sur Internet et la passe en largeur 100px, hauteur 130px, et je la nomme par exemple z-leonard_78.jpg :

  • z- pour retrouver toutes les vignettes de périodiques à la fin de mon répertoire /images/vignettes/ (après les couvertures en 978... pour les livres),
  • au milieu un terme pour le nom de la revue,
  • puis le numéro reçu.
  • Exemples : z-micro_757.jpg pour le numéro 757 de Micro Hebdo, z-wapiti_154 pour le numéro 154 de Wapiti.

Par ailleurs, dépouillement fait ou reçu, je copie l’adresse de l’image dans les notices. Avec les codes présentés ci après, il suffit de récupérer les illustrations sur ce même modèle à chaque réception et de les enregistrer dans le répertoire /images/vignettes/.

Dans le fichier /opac_css/includes/index.inc.php j’ajoute la ligne suivante, juste après la ligne 9 (affichage recherche) :

require_once ($base_path.'/includes/vignettes.php');

Attention ! Le fichier /opac_css/includes/index.inc.php est écrasé à chaque mise à jour de PMB (mais peu fréquente). Il faut donc penser à recoder cette ligne après une mise à jour.

Je crée un fichier vignettes.php qui sera donc dans /opac_css/includes/ :

<?php

// Je vais chercher chaque série de couvertures, par revue, dans chaque série de trois lignes ci-dessous ; elles sont ordonnées et on sait quelle est la dernière (quand on a qu'un nombre de chiffres, on propose *, par exemple les numéros de 125 à 154 ; on met le nombre de ? qui convient quand on a plusieurs nombres de chiffres, par exemple quand on passe, pour Virgule, du n° 99 au n° 100, car l'astérisque cherche le chiffre le plus élevé, pas le nombre le plus élevé).

$dir_arkeo = "../images/vignettes/z-arkeo_*.{jpg}";
$arkeo = glob($dir_arkeo,GLOB_BRACE);
$v_arkeo = end ($arkeo);

$dir_leo = "../images/vignettes/z-leonard_*.{jpg}";
$leo = glob($dir_leo,GLOB_BRACE);
$v_leo = end ($leo);

$dir_micro = "../images/vignettes/z-micro_*.{jpg}";
$micro = glob($dir_micro,GLOB_BRACE);
$v_micro = end ($micro);

$dir_julie = "../images/vignettes/z-julie_*.{jpg}";
$julie = glob($dir_julie,GLOB_BRACE);
$v_julie = end ($julie);

$dir_okapi = "../images/vignettes/z-okapi_*.{jpg}";
$okapi = glob($dir_okapi,GLOB_BRACE);
$v_okapi = end ($okapi);

$dir_virgule = "../images/vignettes/z-virgule_???.{jpg}";
$virgule = glob($dir_virgule,GLOB_BRACE);
$v_virgule = end ($virgule);

$dir_cosinus = "../images/vignettes/z-cosinus_*.{jpg}";
$cosinus = glob($dir_cosinus,GLOB_BRACE);
$v_cosinus = end ($cosinus);

$dir_english = "../images/vignettes/z-english_*.{jpg}";
$english = glob($dir_english,GLOB_BRACE);
$v_english = end ($english);

$dir_svj = "../images/vignettes/z-svj_*.{jpg}";
$svj = glob($dir_svj,GLOB_BRACE);
$v_svj = end ($svj);

$dir_studio = "../images/vignettes/z-studio_*.{jpg}";
$studio = glob($dir_studio,GLOB_BRACE);
$v_studio = end ($studio);

$dir_wapiti = "../images/vignettes/z-wapiti_*.{jpg}";
$wapiti = glob($dir_wapiti,GLOB_BRACE);
$v_wapiti = end ($wapiti);

// On crée un tableau array avec le code html de l'appel de l'image, img src et alt, chaque code séparé par une virgule

$tab_vignettes = array ("<img src='".$v_arkeo."' alt='Arkeo junior'  /> ", "<img src='".$v_leo."' alt='Le Petit Léonard'  /> ", "<img src='".$v_micro."' alt='Le Petit Léonard'  /> ", "<img src='".$v_julie."' alt='Julie'  /> ", "<img src='".$v_okapi."' alt='Okapi'  /> ", "<img src='".$v_virgule."' alt='Virgule'  /> ", "<img src='".$v_cosinus."' alt='Cosinus'  /> ", "<img src='".$v_english."' alt='I love english'  /> ", "<img src='".$v_svj."' alt='Science & vie junior'  /> ", "<img src='".$v_studio."' alt='Studio Ciné Live'  /> ", "<img src='".$v_wapiti."' alt='Wapiti'  /> ");

// On crée un système aléatoire avec shuffle pour l'affichage du tableau

shuffle($tab_vignettes);

//On présente l'affichage du slideshow, par 3 images en mode vertical (avec le <br /> à enlever si on veut un affichage horizontal, qui suppose ensuite de modifier en conséquence les valeurs CSS, avec le tableau en aléatoire et retour au premier trio quand on a tout vu (j'en répète une à la fin pour avoir le compte en multiple de 3) ; on crée un lien sur le bloc vers la page de navigation des périodiques.

echo "<a href='./index.php?search_type_asked=perio_a2z'><section id='slideshow'>
        <div class='container'>  
       <div class='c_slider'></div>  
       <div class='slider'>  
       <figure>
                $tab_vignettes[0]<br />$tab_vignettes[1]<br />$tab_vignettes[2]
                <figcaption>derniers magazines re&ccedil;us</figcaption>
        </figure><!--
        --><figure>
                $tab_vignettes[3]<br />$tab_vignettes[4]<br />$tab_vignettes[5]
                <figcaption>derniers magazines re&ccedil;us</figcaption>
        </figure><!--
        --><figure>
                $tab_vignettes[6]<br />$tab_vignettes[7]<br />$tab_vignettes[8]
                <figcaption>derniers magazines re&ccedil;us</figcaption>
        </figure><!--
        --><figure>
                $tab_vignettes[9]<br />$tab_vignettes[10]<br />$tab_vignettes[4]
                <figcaption>derniers magazines re&ccedil;us</figcaption>
        </figure>
        </div>
        </div>
</section></a>";

?>

Dans le CSS (même feuille de style que celle utilisée pour le reste du site), on ajoute pour la présentation :

figure {
        display: inline-block;
}
#slideshow {  
   position: absolute;  
        right:230px;
        top:136px;
   width: 100px;  
   height: 398px;  
   padding: 10px 10px 0px 10px;  
   margin: 0 auto 2em;  
   /*border: 1px solid #ddd;  */
   background-color: #6da9ad;  
   /* CSS3 effects */  
 /*  background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);  */
   border-radius: 0px 0px 10px 10px;  
        border-bottom: 10px solid #102647;
  /* box-shadow: 0 0 3px rgba(25,40,84, 0.2);  */
}  

#slideshow:before {
        left:0;
        -webkit-transform: rotate(-4deg);
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
}
#slideshow:after {
        right:0;
        -webkit-transform: rotate(4deg);
        -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        -o-transform: rotate(4deg);
}

#slideshow .container {
        position:relative;
        width: 100px;
        height: 400px;
        overflow: hidden;
}

@-webkit-keyframes slider {
        0%, 20%, 100%        { left: 0 }
        25%, 45%                { left: -100% }
        50%, 70%                { left: -200% }
        75%, 95%                { left: -300% }
}
@-moz-keyframes slider {
        0%, 20%, 100%        { left: 0 }
        25%, 45%                { left: -100% }
        50%, 70%                { left: -200% }
        75%, 95%                { left: -300% }
}
@keyframes slider {
        0%, 20%, 100%        { left: 0 }
        25%, 45%                { left: -100% }
        50%, 70%                { left: -200% }
        75%, 95%                { left: -300% }
}

#slideshow .slider {
        position: absolute;
        left:0; top:0;
        width: 400%;
        height: 310px;
       
        -webkit-animation: slider 32s infinite;
        -moz-animation: slider 32s infinite;
        animation: slider 32s infinite;
}

#slideshow .c_slider {
        position: absolute;
        left:0; top:0;
        width: 400%;
        height: 310px;
}

#slideshow figure {
        position:relative;
        padding:0; margin:0;
}

@-webkit-keyframes figurer {
        0%, 25%, 50%, 75%, 100%                { -webkit-box-shadow: 0 0 65px rgba(25,40,84, 0) inset; box-shadow: 0 0 65px rgba(25,40,84, 0) inset;        }
        5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%        { -webkit-box-shadow: 0 0 65px rgba(25,40,84, 0.6) inset;        box-shadow: 0 0 65px rgba(25,40,84, 0.6) inset; }
}
@-moz-keyframes figurer {
        0%, 25%, 50%, 75%, 100%                { -moz-box-shadow: 0 0 65px rgba(25,40,84, 0) inset; box-shadow: 0 0 65px rgba(25,40,84, 0) inset;        }
        5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%        { -moz-box-shadow: 0 0 65px rgba(25,40,84, 0.6) inset;        box-shadow: 0 0 65px rgba(25,40,84, 0.6) inset; }
}
@keyframes figurer {
        0%, 25%, 50%, 75%, 100%                { -moz-box-shadow: 0 0 65px rgba(25,40,84, 0) inset; box-shadow: 0 0 65px rgba(25,40,84, 0) inset;        }
        5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%        { -moz-box-shadow: 0 0 65px rgba(25,40,84, 0.6) inset;        box-shadow: 0 0 65px rgba(25,40,84, 0.6) inset; }
}
#slideshow figure:after {
        position: absolute;
        display:block;
        content: " ";
        top:0; left:0;
        width: 100%; height: 100%;
        -webkit-box-shadow: 0 0 65px rgba(25,40,84, 0.6) inset;
        -moz-box-shadow: 0 0 65px rgba(25,40,84, 0.6) inset;
        box-shadow: 0 0 65px rgba(25,40,84, 0.6) inset;
       
        -webkit-animation: figurer 32s infinite;
        -moz-animation: figurer 32s infinite;
        animation: figurer 32s infinite;
}

@-webkit-keyframes figcaptionner {
        0%, 25%, 50%, 75%, 100%                        { bottom: 0px;        }
        5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%        { bottom: 0px;        }
}
@-moz-keyframes figcaptionner {
        0%, 25%, 50%, 75%, 100%                        { bottom: 0px;        }
        5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%        { bottom: 0px;        }
}
@keyframes figcaptionner {
        0%, 25%, 50%, 75%, 100%                        { bottom: 0px;        }
        5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%        { bottom: 0px;        }
}

#slideshow figcaption {
        position:absolute;
        padding: 3px 5px; margin:0;
        left:0; right:0; bottom: 0px;
        text-align:center;
        letter-spacing: 0.05em;
        word-spacing: 0.05em;
        font-family: Tahoma, Trebuchet, Arial;
        font-style:italic;
        background: #102647;
        background: rgba(255,255,255,0.7);
        border-top: 1px solid rgb(225,225,225);
        color: #102647;
        text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
       
        -webkit-animation: figcaptionner 32s infinite;
        -moz-animation: figcaptionner 32s infinite;
        animation: figcaptionner 32s infinite;
}

A adapter ensuite à vos abonnements d’une part, à vos souhaits dans la présentation de votre OPAC d’autre part !

Le contenu de cet article est sous licence CC BY-NC-SA.

Enregistrer au format PDF

Répondre à cet article