Redimensionner les images d’un article depuis l’espace privé

Cette contribution propose une modification des modèles standards img.html et doc.html de SPIP qui ajoute des paramètres de redimensionnement d’image. Ces nouveaux modèles sont compatibles avec les plugins FancyBox et Thickbox, dans la mesure où les images deviennent cliquables et pourront être agrandies.

Avec ces modèles, on peut utiliser 2 nouveaux paramètres de manière à redimensionner les images insérées dans un texte.

Note importante : Ces possibilités ont été intégrées dans les modèles img et doc de SPIP3 : Lire http://www.spip.net/fr_article5427.html
Ce qui rend ce plugin - en partie - obsolète...

Il suffit d’installer les fichier img.html et doc.html dans le répertoire « modeles » de son dossier squelettes. Les versions jointes sont compatibles SPIP 2.0 mais elles sont facilement adaptables à la version 1.9.2

Utilisation des modèles

On peut alors utiliser les paramètres largeur et hauteur suivants (tailles en pixels) dans les modèle img et doc :

<imgxxx|left|largeur=200>
<imgxxx|right|hauteur=150>
<docxxx|center|largeur=100>
<docxxx|right|hauteur=80>

Si on ne souhaite pas que l’image devienne cliquable pour Thickbox ou Fancybox, il faut ajouter le paramètre « nolien ». Exemple :

<imgxxx|center|largeur=300|nolien=oui>
<docxxx|left|hauteur=70|nolien=oui>

Remarque

-  Le modèle doc modifié assure le redimensionnement en mode=image. Cela concerne les images qui NE sont PAS dans le portfolio de l’article. En effet, SPIP semble affecter automatiquement mode=document aux images qui se trouvent dans le portfolio. Pour ceux qui souhaitent que le redimensionnement affecte TOUTES les images, il faudrait mettre un test non pas sur mode mais sur extension, du type :

[(#EXTENSION|in_array{#ARRAY{0,jpg,1,png,2,gif}}|oui)]

Historique des modifications

-  16-08-2009 : Ajout du modèle doc.html modifié
-  23-08-2009 : Ajout de la remarque concernant mode=image
-  07-06-2011 : Diffusion comme un plugin
-  09-2013 - Les fonctionnalités du plugin ont été intégrées à SPIP 3 : voir les notes de sortie de SPIP 3.

Discussion

10 discussions

  • 2

    Bonjour,

    J’ai recopié ces modèles dans le dossier modeles et les ai renommé img_taille et doc_taille
    afin de ne pas interférer avec les modèles standards

    Cependant, les appels <img_taille123|largeur=300> ne fonctionnent pas : il faut faire <img_taille|id_document=123|taille=300> ce qui va être difficile à mémoriser car inhabituel.

    Comment cela se fait il ?Pourquoi ça marche avec <img...> alors que la boucle est la même sur DOCUMENTS ?
    Pour pouvoir également juste écrire <img_taille123|largeur=300> , j’ai transformé le critère {id_document} en {id_document=#ENV{id}} mais je ne comprend pas pourquoi c’est nécessaire alors que le modèle de base ne nécessite pas cela.

    • Bonjour,
      je n’ai pas d’explication à te donner : une subtilité liée à la version de SPIP que tu utilises ?

      De toute façon, tu as trouvé une solution fonctionnelle !
      C’est l’essentiel !

      Bonne journée.

    • Mouais.
      Ya une autre subtilité d’ailleurs : le pseudofiltre left ne marche pas non plus, je dois écrire align=left !

    Répondre à ce message

  • 3

    On règle des problèmes et d’autres apparaissent...

    Le dernier en date : http://malle-arts.org/spip.php?article177

    A l’onglet « Baudelaire », les titres des docs apparaissent dans la colonne de gauche mais pas dans celle de droite. Où faut-il corriger ?

    Un grand merci à vous.

    Robert

    • Bonjour,

      en spip 3, des fonctionnalités du plugin ont été intégrés en standard dans le modèle doc (je ne suis pas peu fier de cette intégration :) ).

      Voir ici : http://www.spip.net/fr_article5427.html

      Raccourcis
      ...
      Les modèles de document peuvent prendre en argument la largeur ou la hauteur pour réduire leur dimension : <docxx|largeur=150>.
      ...

    • ashledombos

      Punaise, je trouve enfin la réponse à mon questionnement, après exploration de je ne sais combien de pages... SPIP c’est super, mais la documentation, c’est pas encore ça :)

    • Je l’ai ajouté dans le texte de cette page de doc.

    Répondre à ce message

  • 2
    Père Dom

    Bonjour,

    J’ai un site hébergé chez 1&1.
    Mon modèle img.html marchait bien (sous spip2) jusqu’à ce que je fasse la mise à jour vers spip 3.0.5. Depuis, il a fallu changer de moteur de redimensionnement d’image (maintenant GD2, taille max : 4.007 millions de px), et un certain nombre d’images du site se trouvent désormais au-dessus de la taille maximale supportée par le serveur pour les redimensions.

    Cela suscite un bug d’affichage sérieux.

    D’où deux questions :
    -  Est-ce que je peux tricher pour augmenter la taille max ? (c’est un serveur mutualisé)
    -  Est-ce que je peux repérer et remplacer toutes les images trop lourdes sans les prendre une à une et sans avoir à changer tous les articles concernés ?

    Merci !

    • Bonjour,
      Tu peux te connecter en ftp, telecharger toutes les images quu se trouvent dans IMG/jpg et les redimensionner en série (avec imagemagic ou xnvuew)

    • Père Dom

      Merci !
      J’avais peur que ça perturbe spip de modifier les images sans lui.

    Répondre à ce message

  • 5

    Problème avec Thickbox...

    <imgxxx|center|largeur=450> thickbox ne marche pas...

    • Bon... Là, j’ai résolu (erreur dans le fichier img.html)...

    • Bonjour

      merci pour ce plugin
      les images sont redimensionnées, c’est impecc. Par contre La place prise par l’image reste celle de l’image non redimensionnée du moins en largeur : or j’aimerais pouvoir coller plus le texte à l’image.
      je ne sais pas si je me suis fait comprendre car je ne suis pas spécialiste.

      Y a t’il une manip pour remédier à cela ?

      Cordialement

      Rachel

    • Bonjour,

      quel modèle utilisez-vous : img ou doc ?

    • Bonjour

      j’utilise img

      Merci pour votre aide

    • Le modèle img du plugin indique bien dans le code html les dimensions de l’image redimensionnée.

      Vous devriez vérifier votre code html généré et le code CSS (en utilisant par exemple le plugin firebug de firefox).

    Répondre à ce message

  • 4

    Au secours !
    Le plug in semble fonctionner coté admin mais pas du tout coté client ... Cache vidé, etc ... mais toujours des images redimensionnées à 150px de large coté client ...

    • Thierry Kauffmann

      Bonjour,

      avez-vous bien utilisé la syntaxe

      <imgxx|largeur=200>
      ou
      <imgxx|hauteur=300>

      par exemple ?

    • Oui et j’ai vidé les caches divers et variés, navigateur, spip, etc ...
      Les images ne font pas partis du portfolio non plus ...

    • Bonjour,

      J’ai le mm problème que ab72. As-tu résolu trouver une solution ?

      Cordialement,

    • Peut-être un [(#TEXTE|image_reduire{150,0})] qui trainerait dans vos squelettes ... ?

    Répondre à ce message

  • 10

    Bonjour,

    Avec SPIP 2.1.2 :

    Modèle très intéressant, mais avec le modèle d’origine, le code <img4934|left> réduisait l’image à la valeur réglée dans la configuration, soit en général 150 px (plus de 1000 articles ainsi réglés), maintenant avec le nouveau modèle et cette balise <img4934|left>, l’image est affichée en grandeur réelle, par exemple 1200 pixels, ce qui me forcerait à corriger tous les articles concernés.

    Par contre le code <img4934|center|largeur=300> fonctionne très bien et affiche bien une image cliquable de 300 pixels de large, ce qui irait très bien pour les nouveaux articles.

    Avez-vous une possibilité de rendre ces modèles « compatibles » avec les anciens réglages ?

    Cordialement

    FDG

    • Fixer une valeur alternative si valeur n’est pas passé en parametre répondrait sans doute à tes besoins ... quelque chose comme

      #SET{largeur_finale,(#ENV{largeur}|sinon{150})}
      #SET{hauteur_finale,(#ENV{hauteur}|sinon{150})}

      et appliquer ensuite image reduire largeur_finale,hauteur_finale ?

    • Je viens de mettre en ligne une version modifiée.
      Il SE PEUT qu’elle réponde à tes besoins... à tester.

    • Par curiosité, j’ai voulu voir les modifications que tu avais apportées... Je viens donc de télécharger le « zip du dossier modèle » mais chez moi, le zip est toujours daté du 30 juillet dernier... Tes modifications ont-elles bien été prises en compte ?

    • Bonjour,

      En effet les anciens et nouveaux fichiers sont identiques !

      Manifestement quelque chose n’a pas passé.

      Peux-tu remettre en ligne la version modifiée STP !

      Cordialement

      FDG

    • François Daniel Giezendanner

      Cher Thierry,

      Selon notre message (Manu et moi-même) du 18 janvier, peux-tu mettre en ligne ta version corrigée du 17 janvier STP.

      Bien cordialement

      FDG

    • Je pense qu’il faudrait vider le cache de vos navigateurs car le fichier n’a pas changé de nom.

    • Bonjour,

      Les fichiers du .zip dans le lien datent du 30/07, même après avoir vidé le cache du navigateur.

      Cdlt

    • Bonjour,

      Chez mois aussi, les fichiers du .zip dans le lien datent du 30/07 14h33, même après avoir vidé le cache du navigateur et même en changeant de navigateur.

      Cordialement

      FDG

    • Modèle très intéressant, mais avec le modèle d’origine, le code <img4934|left> réduisait l’image à la valeur réglée dans la configuration, soit en général 150 px (plus de 1000 articles ainsi réglés),

      Après réflexion, je ne pense pas que ce soit le fonctionnement standard de spip. Spip m’a toujours affiché les images dans leur taille d’origine !

    • J’ai mis à jour le fichier à télécharger. Il s’installe désormais comme un plugin. Je viens de tester et ça fonctionne :

      Si tu déposes ton image dans le portfolio et que tu l’insères avec un code <imgxxx|left>, elle sera bien aux dimensions définies dans la configuration avancée pour les vignettes.

      @+

    Répondre à ce message

  • Génial ! Exactement ce que je cherchais !

    Merci merci merci ....

    Pelep

    Répondre à ce message

  • 3

    Désolé de déranger encore...

    Chez moi, ça fonctionne avec img pas avec doc...

    Je ne sais plus quoi faire.

    Une aide ?

    • Thierry Kauffmann

      Désolé de déranger encore... Chez moi, ça fonctionne avec img pas avec doc... Je ne sais plus quoi faire. Une aide ?

      Le redimenssionement dans le modèle doc.html est prévu pour fonctionner en mode=image. Ce mode est sélectionné automatiquement pour les images liées à l’article et qui NE sont PAS dans le portfolio. Dès que les images sont déposées dans le portfolio (elles apparaissent alors dans la partie basse du mode de pré-visualisation), elles acquièrent automatiquement le mode=document (allez savoir pourquoi... mais c’est comme ça !).

      Personnellement, j’ai du mal à comprendre ce fonctionnement de SPIP. Il me semble qu’une refonte de ces 2 modèles livrés en standard ou du fonctionnement standard de SPIP concernant les images est nécessaire.

    • Bonjour,

      Merci pour cet intéressant plugin.

      J’ai juste un problème : il fonctionne avec de petites images. Avec des images qui dépassent 1000 pixels (largeur ou hauteur), l’image réduite conserve toujours une largeur de 500 pixels...

    • Ce fonctionnement ne dépend pas de ce « plugin ». La limitation sur les possibilités de redimensionnement est lié à l’hébergement. Les images trop volumineuses ne peuvent pas être redimensionnées « à la volée ».

    Répondre à ce message

  • 3

    Peut-on faire la même chose pour doc.html ?

    Merci

    • Thierry Kauffmann

      Je ne vois pas l’intérêt de « faire la même chose » pour le modèle doc. Celui-ci affiche déjà une miniature des documents de type « image ».

    • Les vignettes des images sont générées automatiquement à taille fixe... ça permettrait de personnaliser...

      Je ne sais pas si je suis clair

    • Thierry Kauffmann

      Les vignettes des images sont générées automatiquement à taille fixe... ça permettrait de personnaliser... Je ne sais pas si je suis clair

      Tout d’abord, voir cette discussion

      Tout les spipeurs ont effectivement remarqué que la balise #LOGO_DOCUMENT affiche une miniature de l’image quand c’en est une et non pas un logo représentant jpg ou gif ou png ou ...

      Il suffit donc dans la partie suivante du fichier doc.html de rédéfinir les affectations à partir de #FICHIER avec un redimensionnement.

      Partie originale :

      [(#MODE|=={image}|?{'',' '})
      	[(#SET{fichier,[(#LOGO_DOCUMENT||extraire_attribut{src})]})]
      	[(#SET{width,[(#LOGO_DOCUMENT||extraire_attribut{width})]})]
      	[(#SET{height,[(#LOGO_DOCUMENT||extraire_attribut{height})]})]
      	#SET{url,#ENV{lien,#URL_DOCUMENT}}
      ]

      Partie modifiée :

      [(#MODE|=={image}|?{'',' '})
      	[(#SET{mavignette},
      		#FICHIER|image_reduire{#ENV{largeur},#ENV{hauteur}})]
      	[(#SET{fichier,#GET{mavignette}|extraire_attribut{src}})]
      	[(#SET{width,#GET{mavignette}|extraire_attribut{width}})]
      	[(#SET{height,#GET{mavignette}|extraire_attribut{height}})]
      	#SET{url,#ENV{lien,#URL_DOCUMENT}}
      ]

      Enfin c’est l’esprit ! (non testé et à compléter)

    Répondre à ce message

  • 1

    Mais j’ai un autre problème

    <imgxx|center|largeur=450> ne me met pas l’image au centre...

    Je dois compléter le CSS ? mais où ?

    Merci

    • Thierry Kauffmann

      Mais j’ai un autre problème <imgxx|center|largeur=450> ne me met pas l’image au centre... Je dois compléter le CSS ? mais où ? Merci

      L’alignement des images n’a pas été modifié donc cela « devrait » fonctionner parfaitement pourvu que tes squelettes utilisent bien le fichier css spip_style.css qui contient en particulier la classe .spip_document_center.

      Ça fonctionne bien chez moi en tout cas.

    Répondre à ce message

Ajouter un commentaire

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

Dernière modification de cette page le 3 février 2016