SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 72 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > Portfolio plusieurs résolutions

Portfolio plusieurs résolutions

11 janvier 2010 – par sylvain – commentaire

4 votes

Cette contribution ajoute une fonctionnalité au portfolio standard de SPIP : une liste de résolutions pour l’image selectionnée, avec pour chaque résolution deux liens : Telecharger et Afficher

But

Cette contribution ajoute une fonctionnalité au portfolio standard de SPIP. Il permet d’accéder directement a plusieurs résolutions pour l’image sélectionnée, ce qui épargne des efforts de redimensionement aux visiteurs qui veulent télécharger les photos.

Concrètement, une liste de résolutions est ajoutée en dessous de l’image sélectionnée :

Pour chaque résolution, deux liens :

  • Télécharger, qui ouvre la fenêtre de téléchargement du navigateur
  • Afficher, qui affiche l’image dans le navigateur

La contribution est composée de deux squelettes :

  • inc-portfolio-resolutions.html
  • telecharger-photo.html

Le premier squelette contient le code pour afficher le portfolio, le second sert à télécharger la photo, en appelant du code PHP :

J’ai retiré toute la mise en forme CSS dans les squelettes, je vous laisse mettre votre propre style.

Squelette 1 : inc-portfolio-resolutions.html

Le code du fichier inc-portfolio-resolutions.html :

  1. [(#REM) Portfolio : album d'images ]
  2. [(#REM)  ]
  3. <B_documents_portfolio>
  4. <div id="documents_portfolio">
  5.         <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}> 
  6.                 [
  7.                 <a href="(#URL_DOCUMENT)"
  8.                         type="#MIME_TYPE"
  9.                         onclick="location.href='
  10.                                         [(#URL_ARTICLE
  11.                                         |parametre_url{id_document,#ID_DOCUMENT}
  12.                                         )]#documents_portfolio'
  13.                                 ;return false;"
  14.                         [ class="(#EXPOSE)"]
  15.                         [ title="(#TITRE|attribut_html|couper{80})"]>
  16.                         [(#SET{largeur,#LARGEUR|>{#HAUTEUR}?{200,130}})]
  17.                         [(#SET{hauteur,#LARGEUR|>{#HAUTEUR}?{130,600}})]
  18.                         [(#SET{lieu_recadre,#LARGEUR|>{#HAUTEUR}?{center,top}})]
  19.                         [(#FICHIER
  20.                                 |image_reduire{#GET{largeur},#GET{hauteur}}                            
  21.                                 |image_recadre{120,90,#GET{lieu_recadre}}
  22.                                 |inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]}
  23.                         )]
  24.                 </a>
  25.                 ]
  26.         </BOUCLE_documents_portfolio>
  27. </div>
  28. </B_documents_portfolio>
  29.  
  30. [(#REM)
  31.         Afficher en grand le document demande dans l'URL
  32.         + proposer le telechargement et l'affichage pour chacune des resolutions définies dans le tableau "resolutions"
  33. ]
  34. <BOUCLE_afficher_document(DOCUMENTS) {id_document}{id_article} {mode=document}{extension IN png,jpg,gif}>
  35.                 [(#FICHIER|image_reduire{350,*}
  36.                         |inserer_attribut{alt,#TITRE
  37.                                         |attribut_html
  38.                                         |couper{80}})]
  39.         <div>
  40.                 #SET{resolutions,#ARRAY{
  41.                         MINIATURE,100,
  42.                         MOYENNE,500,
  43.                         GRANDE,1024,
  44.                         ORIGINALE,#LARGEUR}}
  45.                 <ul>
  46.                 <BOUCLE_resolutions(POUR){tableau #GET{resolutions}}{par valeur}>
  47.                         <li>
  48.                                 #SET{largeur, #VALEUR}
  49.                                 [(#SET{hauteur,
  50.                                         #_afficher_document:FICHIER
  51.                                         |image_reduire{#VALEUR,*}
  52.                                         |extraire_attribut{height}})]
  53.  
  54.                                 <strong>#CLE - #GET{largeur}x#GET{hauteur}:</strong>
  55.                                 <ul>
  56.                                         <li>
  57.                                                 <a href="
  58.                                                         [(#URL_PAGE{telecharger-photo}
  59.                                                         |parametre_url{id_document,#ID_DOCUMENT}
  60.                                                         |parametre_url{largeur,#GET{largeur}}
  61.                                                         |parametre_url{hauteur,#GET{hauteur}}
  62.                                                         )]">
  63.                                                         Télécharger
  64.                                                 </a>
  65.                                         </li>
  66.                                         <li>
  67.                                                 <a href="
  68.                                                         [(#_afficher_document:FICHIER
  69.                                                         |image_reduire{#GET{largeur},*}
  70.                                                         |extraire_attribut{src}
  71.                                                         |url_absolue)]">
  72.                                                         Afficher
  73.                                                 </a>
  74.                                         </li>
  75.                                 </ul>
  76.                         </li>
  77.                 </BOUCLE_resolutions>
  78.                 </ul>
  79.         </div>
  80.  
  81. </BOUCLE_afficher_document>

Télécharger

Pour configurer la liste des résolutions (qui dépendent uniquement de la largeur, la hauteur étant calculée automatiquement), modifier le tableau « resolutions ».

Les hauteurs et largeurs sont en dur dans le code, et sont à modifier selon vos besoins.

A noter : j’ai modifié la facon dont sont redimensionnées les photos dans la liste de photos (avec un recadrage, qui peut occulter une partie de la photo, mais qui evite d’avoir des bordures et qui respecte le ratio largeur/hauteur).

Squelette 2 : telecharger-photo.html

  1. <!--
  2. Squelette pour forcer le téléchargement d'une image (et non pas l'afficher dans le navigateur
  3.  
  4. Un exemple d'usage de ce squelette, pour telecharger l'image id_document, reduite a 500px de largeur:
  5.  
  6. <BOUCLE_document(DOCUMENTS) {id_document} {id_article} {mode=document}{extension IN png,jpg,gif}>
  7.  
  8.         #SET{largeur, 500}
  9.         [(#SET{hauteur,
  10.                 #_afficher_document:FICHIER
  11.                 |image_reduire{#GET{largeur},*}
  12.                 |extraire_attribut{height}})]
  13.  
  14.         <a href="
  15.                 [(#URL_PAGE{telecharger-photo}
  16.                         |parametre_url{id_document,#ID_DOCUMENT}
  17.                         |parametre_url{largeur,#GET{largeur}}
  18.                         |parametre_url{hauteur,#GET{hauteur}}
  19.                         )]">
  20.                         Telecharger
  21.                 </a>
  22.  
  23. </BOUCLE_document>
  24. -->
  25.  
  26. <BOUCLE_documents(DOCUMENTS) {id_document} {0,1} {mode=document}{extension IN png,jpg,gif} >
  27.         #SET{nom_fichier,
  28.                 #TITRE
  29.                 |choixsivide{image,#TITRE}
  30.                 |concat{_#ENV{largeur},x#ENV{hauteur},.#EXTENSION}}
  31.         [(#SET{lien_fichier,
  32.                 #FICHIER
  33.                 |image_reduire{#ENV{largeur},*}
  34.                 |extraire_attribut{src}
  35.                 |url_absolue})]
  36.         [(#HTTP_HEADER{Content-type: #MIME_TYPE})]
  37.         [(#HTTP_HEADER{Content-Disposition: attachment; filename=#GET{nom_fichier}})]
  38.         [(#EVAL{readfile('[(#GET{vinculo_archivo})]');})]      
  39. </BOUCLE_documents>

Télécharger

Ce squelette appelle du code PHP (readfile) pour lancer le téléchargement de l’image. Normalement, pas de soucis de sécurité, puisque les paramètres d’environnement envoyés à ce squelette sont uniquement :

  • id_document
  • largeur
  • hauteur

L’adresse du fichier est ensuite calculée dans le squelette. Cela restreint donc les fichiers téléchargeables aux images redimensionnées, et devrait donc éviter de pouvoir télécharger des fichiers plus critiques comme config/connect.php.

Si vous n’êtes pas d’accord, et si vous voyez un problème de sécurité, merci de le faire savoir !

Dernière modification de cette page le 11 janvier 2010

Retour en haut de la page

Vos commentaires

  • Le 18 juillet 2011 à 12:47, par celine En réponse à : Portfolio plusieurs résolutions

    Bonjour,

    Je travaille actuellement sur mon site spip en local, j’ai plusieurs images dans mes articles. Dans la colonne de droite, j’ai fait une boucle pour lister toutes les images présentes dans l’article en cours de lecture et ces images s’affichent en vignettes.
    Maintenant, je souhaiterais que lorsqu’on clique sur l’une de ces vignettes dans ma liste de droite, on accède à une page comme vous décrivez avec l’image en grand et en dessous, la possibilité de télécharger librement l’image dans différentes résolutions.
    Mon problème est que je n’arrive pas à lier ma boucle de documents à la page inc-portfolio-resolutions.html que vous décrivez. Actuellement, lorsqu’on clique sur une de ces vignettes de ma colonne de droite, on atterri sur l’image en pleine page.

    Auriez-vous une solution à mon problème ???
    Merci beaucoup,
    Céline

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Passer un site SPIP sous https://

    23 février 2017 – 40 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 17 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)

  • PHANTOM (HTML5UP)

    18 juillet – commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • Cycle2

    7 août 2014 – 119 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)

  • Galleria (fr)

    16 novembre 2011 – 193 commentaires

    Une galerie d’image qui utilise la librairie javascript Galleria. Description Ce plugin vous permet d’ajouter des galeries d’images à vos articles. La galerie créée utilise la librairie javascript Galleria. Le plugin propose un modèle nommé (...)