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 :
- la largeur maximale (>0 sinon ignorée)
- la hauteur maximale (>0 sinon ignorée)
- 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>
Discussions par date d’activité
19 discussions
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
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
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
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
Voilà le message d’erreur que je rencontre lors de l’utilisation du filtre :
Et la ligne concernée, dans son contexte, dans le code de mon fichier mes_fonctions.php3 :
(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 !
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
Bravo mortimer !
Répondre à ce message
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
- 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
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
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 :
et enlevé (4 lignes avant la fin) :
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
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 ?
Oups, excuse-moi !
La ligne 296 correspond à
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 :
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 :
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.
Suivre les commentaires : |