SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 353 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > galerie d’images dimension préétablie > Créer une galerie d’images avec une dimension préétablie

Créer une galerie d’images avec une dimension préétablie

29 février 2008 – par Cap – 19 commentaires

Toutes les versions de cet article : [français] [italiano]

8 votes

Créer une galerie d’images n’est pas compliqué grâce aux fonctionnalités graphiques et rédactionnels de SPIP.

  1. SPIP permet d’envoyer depuis la rédaction plusieurs images d’un seul coup à travers l’utilisation d’archives zip. Il suffit de zipper toutes les images, de les envoyer au serveur et de demander d’ajouter son contenu au portfolio.
  2. SPIP est en mesure de générer des miniatures automatiquement pour les images envoyées. Donc après avoir préparé la boucle pour montrer nos images dans le modèle de l’article, le jeu est fait.

Toutefois l’œil aussi en veut pour son compte, et si les images sont toutes de dimensions diverses, le rendu final ne sera pas toujours convaincant. On pourrait donc penser à créer une galerie dans laquelle les miniatures seraient toutes de dimensions égales mais cela comporte une certaine quantité de travail supplémentaire.

En effet retailler les images à la main pour obtenir des dimensions uniforme est un travail long ennuyeux pour l’administrateur ou l’auteur de la galerie.
En outre, en taillant les images, on pourrait perdre des détails importants, ce qui n’est pas toujours acceptable.

Et si SPIP pouvait présenter aux navigateurs des miniatures qui soient toutes de même dimension, tout en permettant en même temps de visualiser les images complètes, nous aurions résolu tous les problèmes, et sans perdre une seconde pour préparer les images avant de les envoyer à la rédaction, fantastique !

Très bien mais comment fait-on ?
En utilisant les fonctions fantastiques de manipulation des images de SPIP et un peu d’astuces.

L’idée est de redimensionner les images autant qu’il suffit pour les faire rentrer dans la boite de la taille désirée, de façon à ce que leur hauteur ou leur largeur occupe totalement la longueur ou la largeur de la boite même.
Donc tailler la partie de l’image qui sort de la boite, en ayant la perspicacité de montrer la partie centrale d’habitude la plus intéressante.

Pour mieux comprendre le procédé, il s’agit de tailler deux bandes de dimensions égales à partir des images situées en haut et en bas ou à gauche et à droite sur la base des proportions de l’image même et à celle de la miniature désirée.

La première chose à faire est d’évaluer le rapport entre la hauteur de l’image et la hauteur de la miniature désirée, puis de faire la même chose pour la largeur. Les rapports ainsi obtenus, nous indiquerons sur lequel des deux axes nous effectuerons la coupe (en hauteur, nous taillerons alors deux bandes en haut et en bas, ou en largeur et donc les bandes à droite et à gauche)

Supposons que nous voulions obtenir des miniatures 115x115 :

 <BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
         #SET{ratio_x,#LARGEUR|div{115}}
         #SET{ratio_y,#HAUTEUR|div{115}}
 </BOUCLE_img>

Nous avons créé une boucle sur les images dans le portfolio et nous avons calculé les rapports entre la largeur de l’image et de la miniature(ratio_x), puis la même chose pour la hauteur (ratio_y) que nous allons mémoriser dans deux variables, justement ratio x et ratio y avec la balise #SET.

Maintenant nous allons redimensionner autant qu’il suffit notre image afin que la miniature montre la plus grande portion possible de l’image originale.
Nous ajoutons là :

 <BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
         #SET{ratio_x,#LARGEUR|div{115}}
         #SET{ratio_y,#HAUTEUR|div{115}}
         #SET{ratio,#GET{ratio_x}|<={#GET{ratio_y}}|?{#GET{ratio_x},#GET{ratio_y}}}
         [(#FICHIER|image_reduire_par{#GET{ratio}})]
 </BOUCLE_img>

Nous avons calculé le minimum entre les rapports ratio_x et le ratio_y et nous l’avons mémorisé dans la variable ratio puis nous avons redimensionné l’image originale justement de la valeur ratio pour obtenir une miniature avec la hauteur ou la largeur égale à 115, sur la base de ces proportions originales.

Il ne reste plus qu’à couper les bandes superflues de la miniature et de montrer l’image.

 <BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
         #SET{ratio_x,#LARGEUR|div{115}}
         #SET{ratio_y,#HAUTEUR|div{115}}
         #SET{ratio,#GET{ratio_x}|<={#GET{ratio_y}}|?{#GET{ratio_x},#GET{ratio_y}}}
         [(#FICHIER|image_reduire_par{#GET{ratio}}|image_recadre{115,115,center})]
 </BOUCLE_img>

Le filtre graphique image_recadre fait justement cela : il retaille l’image en la mettant aux dimensions voulues (115 x 115), en en montrant que la partie centrale (center).

En dernier nous créons un lien vers l’image complète :

<BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
        #SET{ratio_x,#LARGEUR|div{115}}
        #SET{ratio_y,#HAUTEUR|div{115}}
        #SET{ratio,#GET{ratio_x}|<={#GET{ratio_y}}|?{#GET{ratio_x},#GET{ratio_y}}}
        [<a href="#FICHIER">(#FICHIER|image_reduire_par{#GET{ratio}}|image_recadre{115,115,center})</a>]
</BOUCLE_img>

Nous avons fini :)

Maintenant nous ne devons plus nous préoccuper de rien sinon d’ajouter les images dans le portfolio, et SPIP pense au reste !

Mais si tout cela est vrai, certes, essayez pour y croire.

Dernière modification de cette page le 18 mars 2008

Retour en haut de la page

Vos commentaires

  • Le 13 mai 2010 à 19:30, par ? En réponse à : Créer une galerie d’images avec une dimension préétablie

    Merci pour ce code trés interessant.
    Je suis sous la derniere version de spip 2.1 en local.

    J’ai inséré le code donné apres [(#FICHIER| dans inc-document (en supprimant le redimensionnement initial par défaut) et j’ai enregistré ce fichier html dans mon dossier « squelettes ». J’ai vider le cache MAIS ma page n’afuche pas les modifs !

    J’ai aussi fait la methode avec un fichier mes_options dans dossier « squelettes » comme proposé par Julien...

    je ne comprends pas pourquoi les modifs ne sont pas prises en compte ? C’est comme si systematiquement c’était la distribution dist qui était affichée ? Est c que quelqu’un (e) aurait une idée pour m’aider ?

    Merci d’avance

    Répondre à ce message

  • Le 7 janvier 2010 à 14:54, par mtrs En réponse à : Créer une galerie d’images avec une dimension préétablie

    hello,

    merci pour le plug, mais un question : chez moi le ratio ne semble pas fonctionner ?

    il semble que ça recadre juste sur 115x115 au centre, sans prendre en compte la taille de l’image de base...

    or j’ai servilement copié-collé le code proposé.

    une idée ?

    merci d’avance !

    Répondre à ce message

  • Le 24 décembre 2009 à 09:54, par Caméléon77 En réponse à : Affichage simultané des vignettes et d’une image en grand

    Bonjour. Cette possibilité de SPIP de vignettes carré est vraiment géniale. Cela donne des planches de vignettes très esthétiques et l’affichage est très rapide. Mais je voudrais pouvoir, quand on arrive sur une page, afficher en grand la première image de la série et les vignettes sur le côté, un peu comme le fait Walma. Je suis parvenu à positionner mes vignettes à droite et à positionner l’affichage en grand des photos à gauche, mais je ne sais pas comment, au départ, faire que la première photo de la série s’affiche d’emblée en grand à droite des vignettes. Le résultat est qu’à l’affichage de la page il y a un grand vide à droite des vignettes. Je débute en SPIP et j’ai besoin de votre aide. Merci !

    Répondre à ce message

  • Le 7 mars 2009 à 01:28, par Spip4ever En réponse à : Créer une galerie d’images avec une dimension préétablie

    Bonjour,
    J’utilise la version adaptée aux logo, mais malheureusement j’obtiens une erreur :

    Code d’affichage du logo :
    #SETratio_x,#LOGO_RUBRIQUE||largeur|div50
    #SETratio_y,#LOGO_RUBRIQUE||hauteur|div50
    #SETratio,#GETratio_x|<=#GETratio_y| ?#GETratio_x,#GETratio_y
    #GETratio
    [(#LOGO_RUBRIQUE||image_reduire_par#GETratio|image_recadre50,50,center|image_masque#CHEMINimages/masque.png)]

    Erreur :
    "Warning : Division by zero in D :\Programmes\xampp\htdocs\utopic_graphic_2.0\ecrire\inc\filtres_images_mini.php on line 817
    Warning : Division by zero in D :\Programmes\xampp\htdocs\utopic_graphic_2.0\ecrire\inc\filtres_images_mini.php on line 818« Apparemment ce serait lors du redimmentionnement que l’écureuil coince (j’ai l’impression qu’il n’arrive pas à lire la variable »#GETratio")

    Merci d’avance.

    PS : J’utilise la dernière version de Spip (2.0.5).

    Répondre à ce message

  • Le 26 mai 2008 à 09:42, par Julien En réponse à : Un filtre pour simplifier un peu ;)

    Voici un petit filtre à mettre dans mes_fonctions.php que je viens de concocter qui fait la même chose (et simplifie pas mal le process quand on a pas mal d’images que l’on veut réduire et recadrer en différentes tailles) :

    function image_reduire_recadre($img, $largeur, $hauteur, $position='center') {
            include_spip('inc/filtres_images');
            $img = 'IMG/'.$img;
            list ($ret["hauteur"],$ret["largeur"]) = taille_image($img);
            $ratio_x = $ret["largeur"]/$largeur;
            $ratio_y = $ret["hauteur"]/$hauteur;
            $ratio   = ($ratio_x <= $ratio_y) ? $ratio_x : $ratio_y;
            return image_recadre(image_reduire_par($img, $ratio), $largeur, $hauteur, $position);
    }

    Cela s’utilise le plus simplement du monde, comme n’importe quel autre filtre image : [(#FICHIER|image_reduire_recadre{115,115})]

    • Le 26 juin 2008 à 06:57, par Hélène En réponse à : Un filtre pour simplifier un peu ;)

      Bonjour,

      Je ne maîtrise vraiment pas spip et j’ai copié votre script dans mes_options.php. Faut-il l’encadrer de quelque chose de particulier (? ou <) ? Pour mon site ça ne met que des messages d’erreur.

      Par ailleurs, j’aimerais pouvoir faire en entête du site une mosaïque de petites photos (par exemple 2 lignes de 13 colonnes) piochées dans 3 articles précis du site mais je n’y parviens pas.

      Merci par avance pour votre aide.

    • Le 26 août 2008 à 21:12, par zaa En réponse à : Un filtre pour simplifier un peu ;)

      J’avais des erreurs qui s’affichaient avec ce code lorsqu’il n’y avait pas de logos associées à mon article. J’ai donc bloqué la fin de la fonction lorsque la variable $img est vide.

      Voici la fonction sans erreur

      /* Fonction qui perment de recadrer et reduire les images */
      function image_reduire_recadre($img, $largeur, $hauteur, $position='center') {
             include_spip('inc/filtres_images');
              $img = 'IMG/'.$img;
             if ($img!='IMG/'){
                  list ($ret["hauteur"],$ret["largeur"]) = taille_image($img);
                  $ratio_x = $ret["largeur"]/$largeur;
                  $ratio_y = $ret["hauteur"]/$hauteur;
                  $ratio   = ($ratio_x <= $ratio_y) ? $ratio_x : $ratio_y;
                  return image_recadre(image_reduire_par($img, $ratio), $largeur, $hauteur, $position);
                  }
      }

      Et pour ceux qui se posait la question comment intégrer la fonction pour un logo, voici le code :
      [(#LOGO_ARTICLE|fichier|image_reduire_recadre{70,70})]

    • Le 3 décembre 2008 à 09:37, par Rainer Müller En réponse à : Un filtre pour simplifier un peu ;)

      Génial, merci beaucoup

    Répondre à ce message

  • Le 10 mars 2008 à 10:04, par AlainF En réponse à : Créer une galerie d’images avec une dimension préétablie

    Merci pour ce beau travail

    une preuve de plus qu’il est nécessaire de bien poser un problème pour lui trouver une solution !

    j’ai tourné un moment sans penser au ratio pour essayer de résoudre cette situation.

    Répondre à ce message

  • Le 22 mai 2008 à 15:00, par nathbni En réponse à : Et si on veut un format Portrait ?

    J’ai modifié le script pour obtenir un format proportionnel au travaux des élèves (153x115). Cà rend super bien. J’ai aussi résolu mes pbs d’espacement.
    Ouf !

    Mais voilà-ti-pas que mon client souhaite que certaines expos soient « vignetées » au format « portrait », d’autres au format « paysage », selon les oeuvres des enfants (dans une expo, toutes les oeuvres seraient photographiées dans la même orientation).
    Comment je fais moi ? Est-ce qu’on pourrait mettre un test pour savoir si la 1re valeur (LARGEUR) est supérieure ou inférieure à l’autre et exécuter ensuite le bon script de redimensionnement ?
    Cela dépasse un peu mes compétences.
    Quelqu’un pourrait m’aider SVP ?
    voir ici : http://www3.ac-nancy-metz.fr:80/eco-p-montet-nancy/spip.php?rubrique15 (l’expo avec les arbres ne comporte que des oeuvres en format portrait)
    Mille mercis !

    Répondre à ce message

  • Le 9 mai 2008 à 15:03, par nathbni En réponse à : Créer une galerie d’images avec une dimension préétablie

    Merci pour cette moulinette ! c’est génial pour les maniaques du calage comme moi !!!
    Mon souci, c’est que je n’arrive pas à avoir l’espacement entre les lignes de vignettes (elles sont bien espacées à droite et gauche, mais entre chaque ligne non).
    J’ai cherché dans tous mes fichiers css pour comprendre ce qui définissait les bordures autour de ces vignettes mais je ne trouve pas, ou s’il y avait un pb de compatibilité... J’y arrive pas !!!

    http://www3.ac-nancy-metz.fr:80/eco-p-montet-nancy/spip.php?rubrique15

    Ma boucle :

    <B_documents_portfolio>          <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date} {doublons}>
           #SET{ratio_x,#LARGEUR|div{115}}
           #SET{ratio_y,#HAUTEUR|div{115}}
           #SET{ratio,#GET{ratio_x}|<={#GET{ratio_y}}|?{#GET{ratio_x},#GET{ratio_y}}}
           [<a href="#URL_DOCUMENT" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE|parametre_url{id_document,#ID_DOCUMENT})]#documents_portfolio';return false;"[
    title="(#TITRE|couper{80}|texte_backend)"] >(#FICHIER|image_reduire_par{#GET{ratio}}|image_recadre{115,115,center})</a>]

    </BOUCLE_documents_portfolio>
    </B_documents_portfolio>

    Qu’est-ce qu’on doit toucher pour changer les bordures de ces vignettes, les margin et padding et tout et tout ?

    • Le 9 mai 2008 à 15:38, par nathbni En réponse à : Créer une galerie d’images avec une dimension préétablie

      J’ai détourné le problème en créant une class ImgVignette (border-bottom : 5px solid #fff ) et ceci :

      (#FICHIER|image_reduire_par{#GET{ratio}}|image_recadre{115,115,center}|inserer_attribut{class,'ImgVignette'})

      Mais c’est pas très propre. Alors si quelqu’un a une idée de ce qui se passe, j’aurai meilleur conscience ;-)

    Répondre à ce message

  • Le 1er mars 2008 à 02:43, par jam En réponse à : Créer une galerie d’images avec une dimension préétablie

    Super, merci pour cette boucle, je me demande comment l’adapter pour que cela puisse fonctionner pour un logo d’un article, pour ne plus avoir à retailler l’image avant sous un programme.

    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

  • Mode portail Communiquant pour SoyezCréateurs

    29 septembre 2010 – 20 commentaires

    5e mode d’affichage de la page d’accueil, ce mode se distingue des autres par une animation proposant un fondu/enchaîné des logos des articles à la une. Zonage Configuration Zone d’entête Nom du site Slogan si plugin bandeau présent (...)

  • Configurer Sparkpost

    25 avril – 14 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

  • Plugin Logo SVG : pouvoir utiliser des logos SVG

    17 octobre – commentaires

    Le SVG est un format vectoriel donc très léger et redimensionnable sans pertes, mais SPIP ne l’acceptait pas sur les logos. Ce plugin comble ce manque. Comment ça fonctionne ? Vous installez ce plugin, vous l’activez, et c’est tout. Crédits Une (...)

  • Utilisez le framework Foundation dans vos squelettes !

    13 août 2013 – 58 commentaires

    Foundation est un framework CSS et Javascript très complet pour réaliser des sites sur une grille propre et homogène. Mais surtout, il permet de rendre un site responsive très facilement ! Ce plugin ajoute le framework Foundation sur l’espace (...)

  • LinkCheck : vérificateur de liens

    13 février 2015 – 65 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

Ça spipe par là