Contrôler la taille des images dans un article.

Publié le : 26 octobre 2003 – Dernière modification le 22 février 2005 – par mortimer – 65 commentaires

1
2
3
4
5
2 votes
Parfois les images incluses dans un articles sont trop grandes et anéantissent votre belle mise en page calculée au millimètre. Avec ce filtre contrôlez la taille de ces images et évitez ce genre de problème !

Besoin

Je suis en train de développer un squelette spip en 3 colonnes pour les articles et l’insertion d’images trop grandes à l’intérieure de ceux ci faisait un peut éclater ma maquette. Je suis donc tombé sur le filtre redimlogo qui essayait de donner une taille adapté à un logo. Mais les images à l’intérieure de l’article ne sont pas atteignables. Il restait 2 choix :
-  modifier l’interpréteur spip pour qu’il applique redimlogo dans les articles
-  rester le plus compatible avec les versions à vernir de spip et ne pas modifier le code de spip, donc écrire un filtre pour faire ce que je voulais.

Filtre

Si vous utilisez ce filtre n’oubliez pas qu’il faut également inclure le filtre redimlogo (Redimensionner un logo) dans votre fichier mes_fonctions.php3.

/*
 *   +----------------------------------+
 *    Nom du Filtre :    limit_images_size
 *   +----------------------------------+
 *    Date : 21 septembre 2003
 *    Auteur :  Mortimer Porte (mortimer(dot)porte(at)urbanet(dot)ch)
 *   +-------------------------------------+
 *    Fonctions de ce filtre :
 *        redimensionne si nescessaire les images incluses dans le texte d'un article.
 *        param1: largeur maximale (>0, sinon ignorée)
 *        param2: hauteur maximale (>0, sinon ignorée)
 *        [param3: insérer un lien sur l'image (1= oui,0= non)]
 *    Exemple d'application :
 *    [(#TEXTE|limit_images_size{400,0,1})]
 *   +-------------------------------------+
 *  
 * Pour toute suggestion, remarque, proposition d'ajout
 * reportez-vous au forum de l'article :
 * http://www.uzine.net/spip_contrib/article.php3?id_article=251
*/
function limit_images_size($string, $largeur_maxi=0, $hauteur_maxi=0, $with_link=0) {

$reg = "/<img src='IMG\/([^']+)' ?([^ ]+) width='[^ ]+' ?([^ ]+) height='[^ ]+' (([^/]|\/[^>])+)\/>/";

	preg_match_all ($reg, $string, $matches);
	
	$to_return = $string;

	for ($i=0; $i< count($matches[0]); $i++) {
		$img = $matches[1][$i];
		$bef = $matches[2][$i];
		$aft = $matches[4][$i];
		$btw =  $matches[3][$i];
		$size =  redimlogo ($img, $largeur_maxi, $hauteur_maxi);

		$before = "";
		$after = "";

		if($with_link) {
			$before = "<a href='IMG/".$img."'>";
			$after = "</a>";
		}

          $to_return = preg_replace("<".$matches[0][$i].">",
                                $before."<img src='IMG/".$img."' ".$size." ".$bef." ".$btw." ".$aft." />".$after,
                                $to_return,1);
	}	

	return $to_return;
}
// FIN du Filtre limit_images_size

il prend au maximum 3 paramètres :

  1. la largeur maximale (>0 sinon ignorée)
  2. la hauteur maximale (>0 sinon ignorée)
  3. si l’on veut ajouter un lien sur l’image (1=oui, 0=non).

Utilisation

on l’utilisera donc de la façon suivante :
[(#TEXTE|limit_images_size{400,0,1})]

Le dernier paramètre permet de spécifier si l’on veut (ou pas) un lien sur l’image. En effet l’image réduite perd de sa définition, on peut donc vouloir proposer à l’utilisateur un lien (sur l’image) pour ouvrir l’image à sa taille originale.

donc :
<img='IMG/jpg/img1.jpg' width=... height=... ...>
deviendra :
<a href='IMG/jpg/img1.jpg'><img='IMG/jpg/img1.jpg' width=... height=... ...></a>

un exemple

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

19 discussions

  • mybeau

    C’est parfait.
    Le hic c’est que la taille d’une image à afficher
    dépend essentiellement de la résolution d’écran
    du visiteur.

    J’ai plutot capturé cette résolution au login (aidé
    par le fait que dans mon assoc, il faut se logger
    pour acceder au site). Je calcule donc, par utilisateur,
    la taille max à afficher (=largeur écran utilisateur x taux de
    redimension du site) Le taux de redimension est le pourcentage
    de largeur occupé par le texte de l’article par rapport
    a la largeur écran. Dépend du site et non de l’utilisateur)
    Cette taille max calculée est stockée ds les variables
    session car elle dépend de l’utilisateur.
    Quand on doit afficher une image, si sa largeur excède
    la largeur max d’image pour l’utilisateur en session, on
    calcule un ratio qu’on applique a la largeur et a la hauteur
    de l’image.
    Et zou...........

    On en profite pour virer l’horrible petit encart de
    commande qu’Internet Explorer se croit obligé d’afficher
    quand on passe la souris sur l’image.
    Et re-zou....................................

    Répondre à ce message

  • 2
    Tyrien

    Pourquoi vouloir redimensionner les images alors que SPIP le fait très bien à la taille que l’on veut.

    Personnellement, je procède ainsi :

    1/ Dans Administration > Administration de site > Configuration du site > Fonction avancées j’autorise la « Génération automatiquement les miniatures des images » et je renseigne le champ « Taille maximale des vignettes générées par le système : »
    Il s’agit de la largeur, la hauteur étant calculée proportionnellement de façon automatique.

    2/ Ensuite, en mode « écrire » il ne faut pas utiliser le mal nommé « Ajouter une image » mais « Ajouter un document ». Evidemment, le document que vous téléchargerez de votre DD sera une image. À ce stade-là, toutes les possibilités vous sont offertes. Soit inclure l’image (appelée alors vignette) automatiquement redimensionnée par SPIP en utilisant <docXX|YY> ou bien l’image en taille originale avec <embXX|YY>.

    Suprême raffinement, vous pouvez choisir vous-même une taille différente en renseignant les champs « Dimensions : » XX x YY pixels.

    Merci de m’indiquer la faille dans la procédure.

    Tyrien

    • OG

      Il y a une raison pour laquelle SPIP sépare les images des autres documents. Les « images » sont traitées différemment des « documents multimédia » par SPIP, ce qui peut être très utile pour les sites comme le mien qui doivent séparer les deux types, notamment dans l’affichage des articles. Si tu télécharges les images en tant que documents, et non pas en tant qu’images, cette possibilité disparait.

    • Je n’ai pas possibilité d’administrer la génération auto des imagettes à l’endroit indiqué, sans doute y a-t-il quelque chose a faire au préalable ?

      Pareil, je cherche les fonction de génération des ombres sur les imagettes, pas trouvé non plus, je cherche ;o)))

      Merci.

    Répondre à ce message

  • asso.bachant

    magnifique !

    une images qui fait : 200 x 147 pixels
    LE BLASON

    avec ceci [(#TEXTE|limit_images_size400,0,1)]

    comment quelle devient !

    l’exemple vous semble t’il coherent.
    ICI

    Répondre à ce message

  • 1
    emzeweb

    Voilà le message d’erreur que je rencontre lors de l’utilisation du filtre :

    Warning : No ending matching delimiter ’>’ found in /home/collecti/www/public/mes_fonctions.php3 on line 223

    Et la ligne concernée, dans son contexte, dans le code de mon fichier mes_fonctions.php3 :

    $to_return = preg_replace(« <".$matches[0][$i]."> »,

    $before.« < img src=’IMG/".$img."’ ".$size." ".$bef." ".$btw." ".$aft." > ».$after,

    $to_return,1) ; // ligne 223

    (espace ajouté volontairement à l’ouverture du tag IMG en HTML pour éviter interprétation du navigateur)

    Pouvez-vous m’aider ? ce code me semble pourtant identique au vôtre...

    Merci d’avance !

    • emzeweb

      Apparemment il fallait rajouter "/" avant le > de fermeture du tag IMG (ligne 222 dans mon code ci-dessus) puisque mes pages sont écrites en xhtml. Si mon expérience peut servir à quelqu’un...

    Répondre à ce message

  • iiome

    Bravo mortimer !

    Répondre à ce message

  • 1
    Pascal L

    Bonjour !

    -  Je n’ai pas très bien compris comment on afit pour utiliser la fonction. Quand je place une image dans un article, je mets <imgX|left> où X est le no de l’image. Comment je le remplace par : [(#TEXTE|limit_images_size{400,0,1})] ?

    -  Est-ce que cette fonction génère une deuxième image redimensionnée ou que l’image originale est simplement redimensionnée par le biais des attributs width et height dans la balise IMG ?

    Merci

    • Mortimer

      -  quand tu écrits l’article, il n’y a rien à changer (apparemment il y a quelques pbls avec les documents inclus malheureusement, donc faire attention). C’est quand tu écrits ton squelette pour la page d’article, au lieu de mettre #TEXTE à l’intérieure de ta boucle ARTICLES, il faut mettre [(#TEXTE|limit_images_size400,0,1)]

      -  Ce script en utilise un autre : redimlogo qui recalcule les valeurs WIDTH et HEIGHT de la balise IMG. Il n’y a donc pas création d’une vignette, on compte sur
      le browser pour faire le scale.

      Théoriquement, ce filtre pourrait être la base pour un autre filtre qui crée une vraie vignette et remplace tout la balise IMG, mais je ne connais pas assez le PHP et les librairies d’images existantes pour faire cela.

    Répondre à ce message

  • isabelle A

    Super ! Merci beaucoup. Je débute avec SPIP et j’ai mis en place votre filtre pour faire un album photo en créant une rubrique-10.html. J’ai rajouté le #TEXTE avec le filtre, j’obtiens donc des vignettes. Je vais essayer d’améliorer maintenant, mais j’ai appris bcp de choses.

    Répondre à ce message

  • 1
    Y. Girod

    Salut,

    Merci pour ce script utile.

    Seul problème : le titre de l’image (quand il y en a un) n’apparaît pas. Seul la description apparaît, mais elle suit l’image sur la gauche au lieu d’être en dessous.

    Ma solution (provisoire) :

    -  très intuitivement (càd, au bonheur la chance, car je n’y connait rien en php), j’ai enlevé la ligne :

    $btw =  $matches[3][$i];

    et enlevé (4 lignes avant la fin) :

    ".$btw."

    Ca a l’air de fonctionner, même si ce ".$btw." doit bien servir à qqch... ;-)

    • Hum, pour être sur de rester compatible, j’essaie de capturer les autres paramètres passés à la balise image (titre, etc) avec $btw, $bef et $aft.
      Mais apparemment, ça ne marche pas totalement comme il faut...

      Si j’ai un peu de temps ces prochains jours, je regarderai ces quelques bugs.

      merci

    Répondre à ce message

  • 3

    Bonne idée que cette fonction, qui évite l’explosion des maquettes.

    Il y a cependant un problème avec les vignettes des documents inétgrées dans le texte, un message d’erreur apparait :

    Warning : Compilation failed : missing ) at offset in monsite/spip/mes fonctions.php on line 296

    Je n’ai pas trouvé la source du problème.

    • et il y a quoi exactement ligne 296 de mes_fonctions.php ?

    • Jean-Marc Tourreilles

      Oups, excuse-moi !

      (...)
if($with_link) {
$before = "<a href='IMG/".$img."'>";
$after = "</a>";
}
(...)

      La ligne 296 correspond à

      $after = "</a>";

    • Je fais l’appel exactement comme tu dis qu’il faut faire. Le problème ne se pose que dans les pages qui affichent des vignettes de documents.

      Dans les cas où il n’y a que des images, il n’y a aucun problème, ça fonctionne très bien. Si tu mets des docs dans le #TEXTE, ça part en vrille.

      Voici des pages d’exemples :

      http://www.sahariens.info/spip_sahara3/article.php3?id_article=202&recalcul=oui : ça marche très bien, l’image est retaillée
      Pour info, sans ton filtre, ça donnerait ça :
      http://www.sahariens.info/spip_sahara3/article_2.php3?id_article=202&recalcul=oui

      http://www.sahariens.info/spip_sahara3/article.php3?id_article=426 &recalcul=oui : ça marche pas

      Voilà ce que ça devrait donner
      http://www.sahariens.info/spip_sahara3/article_2.php3?id_article=426 &recalcul=oui

      NB : il y a un autre filtre : « decouper_en_page », mais il n’y a pas d’interaction entre les deux (c’est la première chose que j’ai vérifiée)

      Si on regarde le source, les vignettes sont codées sous la forme suivante :

      cafe-s.jpg (...)

      Il suffirait peut-être de ne pas traiter les images en dessous de la taille maxi ou d’une certaine taille (typiquement les vignettes), ou de ne pas traiter les images à l’intérieur d’un

      (...)

      Je te demande ton aide parce que les expressions régulières et moi, hein... Je tiens à te remercier de ta prise en charge rapide du problème

      Tant que j’y suis, je te propose une idée : pourquoi ne pas permettre aussi la gestion des pourcentages ? L’idée serait de permettre de limiter la taille des images à 80% de la largeur d’affichage, par exemple, un peu sur le modèles des calques. Mais, bon, ceci est une autre histoire, et je ne sais même pas si c’est possible !

      Merci

    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