Redimensionner les images d’un article à la volée

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Ce filtre permet de redimensionner à la volée les images ajoutées par un auteur dans le texte d’un article. Il est possible de spécifier la valeur maximale pour la largeur, la hauteur, ou bien pour les deux.

Présentation

Beaucoup de squelettes attendent des images d’une certaine taille pour s’afficher correctement. Cependant, tous les auteurs ne sont pas habitués à ajuster la taille des images manuellement. L’idée est donc d’assurer la cohérence de la taille des images en redimensionnant automatiquement à l’aide d’un filtre, toutes les images illustrant un article .

Comment utiliser ce filtre ?

Ce filtre est une version modifiée du filtre reduire_image.

Le filtre recoit deux arguments :
-  La taille maximale de l’image (en pixel)
-  L’axe le long duquel il faut redimensionner (x,y,both)

La syntaxe est :
reduire_all_images{taille_max,direction}

Par exemple, pour limiter la taille des images à 500 pixels de large on utilise :

<BOUCLE_art(ARTICLES){id_article}>
[(#TEXTE|reduire_all_images{500,x})]
</BOUCLE_art>

Avec ce filtre, une image de 450x600 ne serait pas redimentionnée, mais une image de 600x600 le serait.

Image originale
L’image est plus petite que la colonne et son texte de description n’est pas entièrement visible
Image redimentionnée
L’image a été redimentionnée avec le filtre reduire_all_images{500,x}. Elle est maintenant complètement visible, ainsi que son texte de description

Comme pour tout filtre, le traitement n’est effectif que dans la partie publique. Vous ne pourrez donc pas visualiser l’effet dans la partie privée.

fonctionnement

Si la librairie GD est installée sur le serveur, un nouveau fichier image sera créé la première fois que vous appelez la page appelant le filtre. Cette image sera utilisée pour tous les appels ultérieurs des filtres.

Si la librairie GD n’est pas installée, le redimensionnement sera obtenu simplement en spécifiant les attributs de largeur (width) et de hauteur (height) sur le tag <img> généré pour le code html.

Cache

Les images redimensionnées sont sauvegardées dans un sous répertoire « resized » situé dans le sous répertoire de IMG correspondant à l’extension du fichier.
exemple : IMG/jpg/resized ou IMG/gif/resized

Elles ne sont calculées que la première fois que le filtre est appelé.

Le fichier de sauvegarde de l’image redimensionnée a un nom formé ainsi :
size-axe-imagename.extension

Par exemple, un fichier image nommé image1.jpg redimensionné à 500 pixels selon l’axe des X sera sauvegardée dans le répertoire IMG/jpg avec le nom de fichier : 500-x-image1.jpg

maintenance automatique

Une opération de maintenance automatique a lieu après un certain délai. Cette durée est indiquée dans la variable $maint_delay en début de fichier et peut être changée. C’est une semaine par défaut.

$maint_delay = 3600*24*7; 
// 7 jours de 24h de 3600 secondes

L’opération de maintenance consiste à faire le ménage et à effacer les fichiers inutilisés (un « garbage collector »).

Ainsi, si vous modifiez les squelettes et les tailles des vignettes, ou que vous changez d’images originales, des images préallablement créées deviendront inutiles. La maintenance détectera qu’elles ne sont plus utilisée et les effacera automatiquement du répertoire resized.

Note : Si jamais une image redimensionnée est effacée de manière prématurée (parcequ’elle n’est presque jamais visualisée par exemple), alors elle sera recrée au besoin, donc rien de gênant.

Installation

Pour installer ce filtre, téléchargez l’archive attachée à l’article, décompressez le fichier mes_fonctions.php3 et ajoutez son contenu dans votre propre fichier mes_fonctions.php3 à la racine de votre site Spip. Si vous n’avez pas encore de fichier appellé mes_fonctions.php3 ajoutez simplement celui-ci.

Ce filtre est expérimental, vous êtes libre de me contacter (en italien ou anglais ;o) si vous rencontrez des soucis.

téléchargement
Copiez-coller le code du fichier mes_fonctions dans votre propre fichier mes fonctions

Discussion

10 discussions

  • 1

    Bonjour,

    Pour moi le script marche très bien, mais j’ai une demande concernant la possibilité de rendre clickable l’image afin de pouvoir la consulter dans une nouvelle page (pas une popup) en taille originalle.

    Si quelqu’un a déjà un patch je sui preneur.

    Cordialement.

    • Ecco la soluzione di JoseLuis :

      Merci beaucoup. Que filtro tan estupendo. Yo lo estoy utilizando sobre spip 1.8b2 y no me ha dado ningún problema hasta ahora.

      Quería que las imágenes tuvieran un enlace a la original para verla en grande al cliquear sobre la reducida y he modificado :

      [...]
      if ($imagetime<($last_maint_date+$maint_delay/2) and time()>($last_maint_date+$maint_delay/2)) touch($imagefile);
      
      return "<img src='$imagefile' name='$name' border='0' align='$align' alt='' hspace='$espace' vspace='$espace' class='spip_logos' />";
      [...]
      
      por :
      
      [...]
      if ($imagetime<($last_maint_date+$maint_delay/2) and time()>($last_maint_date+$maint_delay/2)) touch($imagefile);
               
      $enlace_original_ini = "<a href='IMG/$logo' title='$basename'>";
      $enlace_original_fin = "</a>";
         
      return $enlace_original_ini."<img src='$imagefile' name='$name' border='0' align='$align' alt='' hspace='$espace' vspace='$espace' class='spip_logos' />".$enlace_original_fin;
      [...]

      y me funciona bien.

      Un saludo y gracias.

      Ciao

      Cap

    Répondre à ce message

  • Bonjour,

    est-il possible d’appliquer ce filtre à des images en documents joints ?

    Répondre à ce message

  • Bonjour,

    Ceci est ma première tentative avec les filtres et les boucles...

    Donc, j’ai téléchargé et inclu le fichier mes_fonctions.php3 dans mon fichier déjà existant et l’ai envoyé sur le serveur.

    Maintenant, où dois-je ajouter la boucle afin d’activer ce filtre :

    (...) [(#TEXTE|reduire_all_images500,x)] (...)

    Aussi, dois-je modifier quelque chose à l’intérieur de mes_fonctions.php3 ou est-ce qu’il suffit de modifier la boucle précédente ?

    Je vous remercie de votre compréhension et de votre aide ! ;-)

    Répondre à ce message

  • 5

    you seem to prefer english... (tu sembles préférer l’anglais...?)
    so, in english (et en français !)

    nice !! (chouette !)
    good tools (bon outil !)

    how to extend it to image attached as document (not included in article) ? (comment l’étendre aux images attachés comme des documents (non incluses dans l’article) ?

    or for example, using logo ? (ou par exemple en utilisant les logos ? )

    i’m no so expert in php than you ! (je ne suis pas expert php comme toi !)

    i suppose that the core line to be completed could be
    $texte=preg_replace(" !(<table .*

    .*) ?]*src=’[^>]*IMG/[^>]*>(?(1).*

    ) !eisU« , »reduire_image_check(’$0’,$taille,$axes,$last_maint_date,$maint_delay)",$texte) ;

    je suppose que la ligne principale à compléter doit être...

    (the advantage with software tools is that, it’s not a language, it’s just a code... so you don’t need any translation,
    bon, la symétrie de mon message anglo-français est brisée... ce n’est pas la traduction de la ligne $texte=...))

    merci d’avance de me mettre sur la piste..

    pam

    • Hi !!
      Thanks for writing in English and in French. I’m learning a bit more of French :)

      Have you tried to use :

      #DOCUMENT|reduire_all_images{...}
      #LOGOARTICLE||reduire_all_images{...} -> with || and not |

      Right now my main pc is not working so give it a try a let us know if is it working ;)

    •  !! DOCUMENT is not a valid TAG (for loop ARTICLES or DOCUMENTS ? )
      i’ve tried LOGO_DOCUMENT.. without success ...

      I’m trying to use an article without text, just a document or an image...

      pam

    • Sorry for the #DOCUMENT tag. I simply have a big imagination :)

      The point is that this filter works only for tags that output HTML code for the image to be resized (...), such as #TEXTE with embedded images or #LOGO_XXX.
      If you have to resize an image given its URL the filter doesn’t work. So if you put your document in the page using

      #URL_DOCUMENT you cannot write #URL_DOCUMENT|reduire_all_images{.....}

      Remember also that applying the filter to LOGO_XXX does resize the logo and not an optional image linked to the logo.

      So if you write

      #LOGO_DOCUMENT|#URL_DOCUMENT||reduire_all_images{}

      the logo will be resized, but it is already small.
      On the contrary if you click on the logo to display the document itself, it will be displayed without any resizing.

      However #LOGO_DOCUMENT||reduire_all_images{...} should resize the logo if you set a value smaller that the actual logo size.

    • skystan

      Bonjours,

      êtes-vous arrivé à modifier cette fonctionpour pouvoir redimensionner (en créant des vignettes) les logos ?

    • Merci pour cet excellent filtre ! Pour l’appliquer à un logo (et, par extension, à un document attaché), utilisez la syntaxe suivante :

      [(#LOGO_SITE||reduire_all_images{200,x})]

      Les deux barres verticales (au lieu d’une habituellement) servent à ne pas affecter d’URL de lien au logo, comme il est expliqué ici : http://www.spip.net/fr_article901.html (partie « Filtres de logos »).

    Répondre à ce message

  • Bruno Mathieu

    Je suis tombé sur le problème suivant :
    Un article contenait plusieurs images dont le nom commençait par « 25. » Le filtre créait 350-x-25.jpg pour toutes les images. Donc la page affichait une seule image en plusieurs exemplaires (suis-je clair ?). J’ai fait cette modification à la ligne 98 :

          $nom = substr($basename, 0, strpos($basename, "."));
    

    J’ai remplacé strpos par strrpos.

    -- 
    Bruno
    

    Répondre à ce message

  • 1

    j’ai bien fais toutes les modifications (modification du fichier mes_fonctions et installation de la librairie GD) mais le filtre ne marche pas. Je ne sais pas trop où mettre ce filtre. Voici ma boucle :

    <BOUCLE_articles_sommaireG(ARTICLES) {id_secteur} {par date} {inverse} {1,1} {doublons}>
        <div class="articleG">
            [<div class="image"><a href="#URL_ARTICLE"><img src="IMG/(#LOGO_ARTICLE|fichier)"  alt="logo article" /></a></div>]
    	<h1>[(#SURTITRE)]<a href="#URL_ARTICLE">#TITRE</a></h1>
    	[<h2>(#SOUSTITRE)</h2>]
    	<h4>[(#DATE|nom_jour)] [(#DATE|affdate)]</h4>
            [<p>(#INTRODUCTION|supprimer_tags)</p>]
        </div>
    </BOUCLE_articles_sommaireG>

    Ce filtre marche-t-il sur des images déjà sur le site ? Un refresh suffit-il quand on fait des modifs sur le code ?

    Merci

    • I can’t find where you applied the filter.
      You have to write something like
      [(#TEXTE|reduire_all_images{500,x})}

    Répondre à ce message

  • 2
    Rémi Clavier
    1. Chargé le script
    2. copié dans mes fonctions.php
    3. filtré le #texte

    — > fonction impécable du premier coup...

    Bravo et merci

    Dans le cadre de la gestion ’à la volée’ des images, j’ai écrit une procédure squi permet la création d’une image avec superposition de texte.
    Elle est visible sur le site donné en lien en cliquant sur l’une des images présentée dans le bandeau.

    Cela intéresse-t-il quelqu’un ?
    si oui, je peux la transformer en filtre...

    ...me contacter...
    (attention e_mail à corriger)

    • Thanks remi.
      ARNO* is developing these kind of functionalities for SPIP 1.9.

      Making a filter can be usefull to him.

      Cap


    • You can find enclosed here (in french ;-) a post on the gmane.comp.web.spip.user newsgroup...

      Of course, spip contrib is the most interessed people...

      You can give me requested information directly by mail or using the newsgroup.
      Thanks.

      Avertissement :

      Je m’excuse pour la longueur de ce post. Un résumé permet au lecteur de
      voir immédiatement si il peut corresponde à l’un de ces centres d’intérêt.

      Résumé :

      ayant réalisé un script permettant la superposition d’image et de
      texte,par click sur une « miniature ». Je compte le diffuser au sein de la
      communauté SPIP à le demande de plusieurs personnes. Pour une meilleur
      efficacité du travail à venir, je suis à la recheche de la formule
      optimale ( pouvant intéresser un maximum de personnes).

      Des exemples peuvent être vus sur le site

      http://paroissepb.free.fr/rubrique.php3?id_rubrique=16 en cliquant sur
      l’une des images du bandeau supérieur


      Texte complet :

      J’ai réalisé, pour un site dont je m’occupe, un script permetant la
      surimpression « en live » (mais géré en cache pour une meilleur
      efficacité) de texte sur des images et utilise ce script dans SPIP.
      Sur le site en question ce script est utilisé pour affiché une image
      appartennant à un article les informations de cette image. Ce script est
      largement parametrable.

      Le fonctionnement actuel

      -  l’image est une image incluse dans un article
      -  Le texte intégré est composé de la description de l’image ET du titre
      de l’image identifiée comme signature.
      -  Un copyright référençant le #NOM_SITE_SPIP est automatiquement ajouté
      -  Si le titre de l’image commence par [xxx] alors xxx est identifié
      comme étant le propriétaire (de la photo) et le copyright l’indique.
      -  Les textes sont ombrés pour une meilleure visibilité quelque soit la
      photo présentée
      -  les informations suivantes sont parametrables :
      Fonte du texte
      Couleur du texte
      Taille du texte
      Couleur du texte
      Position vertcale du texte dans l’image ( en %)
      Position vetrticale du texte (en %)
      idem pour la signature
      Psiiton relative du texte et de a signature.

      -  Les paramètres (ci dessus) sont pris dans le #DESCRIPTION de l’article
      qui contient les images
      -  L’image présenté est recalculé pour rendre la taille de l’image
      transmise (relativement) indépendante de l’mage d’origine
      Les images textuée sont « cachées » dans le cahe spip /CACHE/*.* ce qui
      optimise le calcul des images textuées et permet une RAZ par un simple
      « vider le cache » de SPIP

      La proposition :

      après discussion au sein de SPIP-AIDE, il semble qu’un nombre important
      de spipiens soint intéressées pour qu’il existe un filtre SPIP
      ( mes_fonctions.php) qui réalise cette foncion, éventuellement completée
      par d’autres (redimensionnement,...).

      Avant de réaliser un tel filtre, il me semble important s’avoir un
      maximum d’avis sur ce que les gens désirent. J’ai à la date
      d’aujourd’hui repréré deux possibilités :

      1. prendre la fonction elle zxiste à l’eure actuelle et l’intégrer comme
        un filtre simple
      2. créer un filtre plus universel et dont les paramètres (textes et
        paramètres grapiques pourraient être fournies à l’appe du filtre dans le
        genre
        (#DOCUMENT.
        mais dans ce cas, j’ignore si elle pourrait être appelé en rempaçant
        texte et titre par #TEXTE et #TITRE.

      D’autre idées peuvent naturellement être envisagées, je fais confiance à
      votre imagination...

      La demande

      Merci de me faire savoir :
      si ous seriez interessé par un telle filtre
      si la proposition 1 ou 2 a votre préférence
      toute autre idée d’amélioration

    Répondre à ce message

  • 3
    Frédéric

    Bonjour, et bravo pour cette contribution, vraiment essentielle.
    Elle l’est tellement pour moi que c’est la mort dans l’âme que j’ai du la retirer de mon site après m’être aperçu que le texte ne coulait plus autour des images ainsi traitées. Il devient impossible d’avoir du texte à côté d’une photo : il passe en dessous.

    Voici le code html généré pour afficher une image à gauche dans une page, avec le filtre :

    <img src="IMG/jpg/IMG_1109_1_.jpg" name="" alt="" class="spip_logos" align="" border="0" height="132" hspace="" vspace="" width="206">

    et sans le filtre :

    <img src="IMG/jpg/IMG_1109_1_.jpg" alt="" style="border-width: 0px; margin: 4px; float: left;" height="132" width="206"> 

    Merci pour votre aide.

    • Hi,
      which SPIP version do you use ?

      SPIP 1.8 introduced many changes and it is possible that this filter isn’t perfect together with 1.8

      However, this filter functionalities are now merged in the latest SPIP version.

    • J’utilise la version 1.8.1

    • If you download the development version of SPIP, you can use the filter reduire_image on #texte too. It has two arguments, max width and max height.

      I’m sorry but version 1.8 introduced the use of css style to align the images and dropped the align attribute.

      As this filter uses align attribute in IMG tag, but SPIP does not create it, you have this alignment problem.

      If you cannot upgrade to the latest version, write me. I’ll try to help you

    Répondre à ce message

  • 1

    Un petit mot pour un grand merci, après être devenu fou plus d’une journée à essayer d’adapter le script php, je me suis aperçu que tu l’avais accompli mieux que je ne le ferais jamais...
    Une petite note pour rappeler que cette fonction est plus qu’essentielle à ceux qui veulent tenter l’accessibilité imode ; le crop des images permettant de rattraper des maquettes presques identiques à la version web.
    Encore bravo et merci, voir même... mazeltov !

    Répondre à ce message

  • 5

    J’ai testé le script avec une image JPG, cela marche correctement.
    Par contre, la fonction de redimentionnement GIF ne fonctionne pas. Je ne suis pas sûre que la bibliothèque GD l’intègre ou alors je n’ai pas la bonne version ... une idée sur la question ?

    • Many GD library versions do not support GIF images. In the SPIP database there is a record called « gd_formats » in « spip_meta » table in which the formats that GD can handle are listed. If your GD library is not GIF enabled you have to remove « gif » from this record. This way SPIP will not use GD library to resize these images. If you can control the web server, you can also install a newer GD version , this time GIF enabled.

    • Yes, your right. You can try the PNG format (suported in many GD versions) in place of GIF, it is a good and free replacement of the GIF format (Unisys patent).

    • Une piste pour vérifier le niveau de la bibliothèque GD : consulte le PHPinfo de ton hébergeur. Tu dois y trouver la configuration complète du serveur pour les scripts PHP.

      Voici l’exemple de Celeonet : tu constateras que la configuration PHP dispose d’une option « -with-gd » (désignant le répertoire d’installation de la librairie GD) et, plus bas, tu trouveras les propriétés de la librairie GD embarquée.
      Pour interprêter ces propriétés, il y a une doc très complète sur http://www.manuelphp.com/php/ref.image.php.

      Ca ne résoudra

    • bonjour,
      cela corespond exactement a ce que je souhaite faire...
      Mais la fonction reuce, ne semble pas fonctionné chez moi. Pourtant, j’ai ajouté le fichier mes_fonctions.php3 sur mon server, j’ai fait un include(mes_fonctions.php3) sur le fichier article.php3 et j’ai mis la même synaxe que ci-dessus dans mes squelette. Mais les images que j’intègre via la balise ne sont pas resizé. quequ’un peu ’il m’indiquere ce que j’ai mal fait.
      Merci
      A bientot

    • You must not put any INCLURE(mes_fonctions.php3) in article.php3. Just copy mes_fonctions.php3 in the root of your spip installation and this functions will be automatically imported by SPIP when you use this filter in your squelette.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom