SPIP - Contrib

[ar] [en] [es] [fr] [it]



Accueil du site > Images, Galeries > Traitement d’images > Archives Traitement d’images > Filitres Images pour avant Spip 1.9

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

samedi 15 janvier 2005, par BoOz, Cap. Dernier ajout mardi 22 février 2005

Toutes les versions de cet article :


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.

JPEG - 12.6 ko
Image originale
L’image est plus petite que la colonne et son texte de description n’est pas entièrement visible
JPEG - 9.9 ko
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.

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

Répondre à cet article

  • ... et les images en documents joints ?

    17 août 2006 03:25, par Ubu

    Bonjour,

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

    Répondre à ce message

    Retour au début des forums

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

    26 janvier 2006 16:58, par sbourdon

    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

    Retour au début des forums

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

    30 novembre 2005 14:34, par gelinp

    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.

    Répondre à ce message

    • 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

    Retour au début des forums

  • 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("!(

    .*)?]*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

    Répondre à ce message

    • 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 ;)

      Répondre à ce message

      • ! ! 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

        Répondre à ce message

        • 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.

          Répondre à ce message

      • Bonjours,

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

        Répondre à ce message

        • Application aux logos 14 août 2005 19:48, par Ben

          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

    Retour au début des forums

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

    17 juin 2005 23:38, par 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

    Retour au début des forums

  • 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 :

    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

    Répondre à ce message

    Retour au début des forums

    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)

    Voir en ligne : cliquer sur l’une des image du bandeau du haut de la page pour voir comment cela marche

    Répondre à ce message

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

      Making a filter can be usefull to him.

      Cap

      Répondre à ce message

      • 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.... 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|imagetext(texte,titre,taille texte, fonte_texte,...))]. 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

        Voir en ligne : exemple :click over a picture at the top of the page...

        Répondre à ce message

    Retour au début des forums

  • >problème d’alignement du texte

    11 mai 2005 20:29, par 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.

    Répondre à ce message

    • > problème d’alignement du texte 11 mai 2005 21:07, par Cap

      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.

      Répondre à ce message

      • J’utilise la version 1.8.1

        Répondre à ce message

        • > problème d’alignement du texte 12 mai 2005 11:13, par Cap

          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

    Retour au début des forums

  • 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

    Retour au début des forums

  • 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 ?

    Répondre à ce message

    • 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.

      Répondre à ce message

    • 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

      Répondre à ce message

      • 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

        Répondre à ce message

    Retour au début des forums

0 | 25



Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | Charte et vie SPIP-Contrib | SPIP | L'autre.net