Connectix Boards

Bienvenue, vous n'êtes pas connecté. ( Se connecter - S'enregistrer )

Dernière version sortie: 0.8.4!
Venez tester la version 1.0 beta :)

Connectix Boards > Zone développement > Programmation > [mod] Images Resizer

RSS >  [mod] Images Resizer
Dehas #1 14/01/2009 - 13h01

Groupe : Nouveau
Messages : 9
Enregistré le : 09/01/2009

Hors ligne

Nom du mod : cb_Images Resizer
Auteur : Cela a été écrit initialement par http://www.ncode.nl/ et converti par Déhas
Date de création : 14 janvier 2009
Dernière mise à jour : Aucune
Version de CB : 0.8.4 versions inférieures non testées.

Attention ne retaille pas les images déjà sur votre forum

Modifications apportées aux fichiers déjà existants

ouvrir le fichier:  templates/Official/gen_main.php

après
   <script type="text/javascript" src="include/javascripts/cb_ajax.js"></script>

ajouter
   <script type="text/javascript" src="include/javascripts/ncode_imageresizer.js"></script>    
   <script type="text/javascript">
<!--
NcodeImageResizer.MODE = 'newwindow';
NcodeImageResizer.MAXWIDTH = 550;
NcodeImageResizer.MAXHEIGHT = 0;
NcodeImageResizer.Msg1 = 'Cliquer ICI pour regarder l\'image entiere.';
NcodeImageResizer.Msg2 = 'Cette image a été retaillée. Cliquer ICI pour regarder l\'image entiere.';
NcodeImageResizer.Msg3 = 'Cette image a été retaillée. Cliquer ICI pour regarder l\'image entiere.';
NcodeImageResizer.Msg4 = 'Cliquer ICI pour regarder l\'image plus petite.';
//-->
</script>

fermer et sauvegarder

ouvrir le fichier: bbcode/img.BB
remplacer

<img src="{--CONTENTS--}" alt="Posted Image" />

par

<img src="{--CONTENTS--}" alt="Posted Image" onload="NcodeImageResizer.createOn(this);"/>

Fermer et sauvegarder



ouvrir le fichier skins/Zephir/style.css

ajouter a la fin

/*Image Resizer*/
table.ncode_imageresizer_warning {
text-align:left;
   background: #FFFFE1;
   color: #000000;
   border: 1px solid #CCC;
   cursor: pointer;  
   width:550px;
}

table.ncode_imageresizer_warning td {
text-align:left;
   font-size: 12px;
   color: red;
   vertical-align: middle;
   text-decoration: bold;
   width:550px;
}

table.ncode_imageresizer_warning td.td1 {
   width:20px;
   padding: 5px;

}

table.ncode_imageresizer_warning td.td2 {

text-align:left;
   padding: 2px;

}
/*Image Resizer*/

Fermer et sauvegarder

Créer et sauvegarder un fichier nommé:  ncode_imageresizer.js

mettre ceci dedans

NcodeImageResizer.IMAGE_ID_BASE = 'ncode_imageresizer_container_';
NcodeImageResizer.WARNING_ID_BASE = 'ncode_imageresizer_warning_';

function NcodeImageResizer(id, img) {
this.id = id;
this.img = img;
this.originalWidth = 0;
this.originalHeight = 0;
this.warning = null;
this.warningTextNode = null;

img.id = NcodeImageResizer.IMAGE_ID_BASE+id;
}

NcodeImageResizer.getNextId = function() {
id = 1;
while(document.getElementById(NcodeImageResizer.IMAGE_ID_BASE+id) != null) {
id++;
}
return id;
}

NcodeImageResizer.createOn = function(img) {
isRecovery = false; // if this is a recovery from QuickEdit, which only restores the HTML, not the OO structure
if(img.id && img.id.indexOf(NcodeImageResizer.IMAGE_ID_BASE) == 0 && document.getElementById(NcodeImageResizer.WARNING_ID_BASE+img.id.substr(NcodeImageResizer.IMAGE_ID_BASE.length)) != null) {
newid = img.id.substr(NcodeImageResizer.IMAGE_ID_BASE.length);
resizer = new NcodeImageResizer(newid, img);
isRecovery = true;
resizer.restoreImage();
} else {
newid = NcodeImageResizer.getNextId();
resizer = new NcodeImageResizer(id, img);
}

if (resizer.originalWidth == 0) resizer.originalWidth = img.width;
if (resizer.originalHeight == 0) resizer.originalHeight = img.height;

if((NcodeImageResizer.MAXWIDTH > 0 && resizer.originalWidth > NcodeImageResizer.MAXWIDTH) || (NcodeImageResizer.MAXHEIGHT > 0 && resizer.originalHeight > NcodeImageResizer.MAXHEIGHT)) {
if(isRecovery) {
resizer.reclaimWarning(warning);
} else {
resizer.createWarning();
}
resizer.scale();
}
}

NcodeImageResizer.prototype.restoreImage = function() {
newimg = document.createElement('IMG');
newimg.src = this.img.src;
this.img.width = newimg.width;
this.img.height = newimg.height;
}

NcodeImageResizer.prototype.reclaimWarning = function() {
warning = document.getElementById(NcodeImageResizer.WARNING_ID_BASE+newid);

this.warning = warning;
this.warningTextNode = warning.firstChild.firstChild.childNodes[1].firstChild;
this.warning.resize = this;

this.scale();
}

NcodeImageResizer.prototype.createWarning = function() {
mtable = document.createElement('TABLE');
mtbody = document.createElement('TBODY');
mtr = document.createElement('TR');
mtd1 = document.createElement('TD');
mtd2 = document.createElement('TD');
mimg = document.createElement('IMG');
mtext = document.createTextNode('');

mimg.src = 'skins/Zephyr/attention.gif';
mimg.width = 16;
mimg.height = 16;
mimg.alt = '';
mimg.border = 0;

mtd1.width = 20;
mtd1.className = 'td1';

mtd2.unselectable = 'on';
mtd2.className = 'td2';

mtable.className = 'ncode_imageresizer_warning';
mtable.textNode = mtext;
mtable.resize = this;
mtable.id = NcodeImageResizer.WARNING_ID_BASE+this.id;

mtd1.appendChild(mimg);
mtd2.appendChild(mtext);

mtr.appendChild(mtd1);
mtr.appendChild(mtd2);

mtbody.appendChild(mtr);

mtable.appendChild(mtbody);

this.img.parentNode.insertBefore(mtable, this.img);

this.warning = mtable;
this.warningTextNode = mtext;
}

NcodeImageResizer.prototype.scale = function() {
if(NcodeImageResizer.MAXWIDTH > 0 && this.originalWidth > NcodeImageResizer.MAXWIDTH) {
resized = true;
this.img.width = NcodeImageResizer.MAXWIDTH;
this.img.height = (NcodeImageResizer.MAXWIDTH / this.originalWidth) * this.originalHeight;
}
if(NcodeImageResizer.MAXHEIGHT > 0 && this.originalHeight > NcodeImageResizer.MAXHEIGHT) {
resized = true;
this.img.height = NcodeImageResizer.MAXHEIGHT;
this.img.width = (NcodeImageResizer.MAXHEIGHT / this.originalHeight) * this.originalWidth;
}

this.warning.width = this.img.width;
this.warning.onclick = function() { return this.resize.unScale(); }

if(this.img.width < 450) {
this.warningTextNode.data = NcodeImageResizer.Msg1;
} else if(this.img.fileSize && this.img.fileSize > 0) {
this.warningTextNode.data = NcodeImageResizer.Msg2.replace('%1$s', this.originalWidth).replace('%2$s', this.originalHeight).replace('%3$s', Math.round(this.img.fileSize/1024));
} else {
this.warningTextNode.data = NcodeImageResizer.Msg3.replace('%1$s', this.originalWidth).replace('%2$s', this.originalHeight);
}

return false;
}

NcodeImageResizer.prototype.unScale = function() {
switch(NcodeImageResizer.MODE) {
case 'none':
break;
case 'samewindow':
window.open(this.img.src, '_self');
break;
case 'newwindow':
window.open(this.img.src, '_blank');
break;
case 'enlarge':
default:
this.img.width = this.originalWidth;
this.img.height = this.originalHeight;
this.img.className = 'ncode_imageresizer_original';
if(this.warning != null) {
this.warningTextNode.data = NcodeImageResizer.Msg4;
this.warning.width = this.img.width;
this.warning.onclick = function() { return this.resize.scale() };
}
break;
}

return false;
}

Le mettre dans le dossier: include/javasripts

charger cette image  Posted Image

La renomer attention.gif, la mettre dans: skins/Zephir


screen
Posted Image


Je demande un testeur pour ce Mod
Attention toujours faire une sauvegarde avant de modifier quoique ce soi

J'attends vos réponses
Ce message a été édité par Dehas le 14/01/2009 à 13h41.
kristoch #2 12/11/2009 - 16h38

Groupe : Acharné
Messages : 342
Enregistré le : 05/08/2009

Hors ligne Site Web

personne n'a réagit à l'époque?
c'était bien vu mais pourquoi tout ça?
il serait bien qu'on puisse dans le BBcode img indiquer hauteur et largeur
voilà tout
merci beaucoup Martin! :)

en même temps si il était possible d'ôter le format
tant pour les img BBcodes que toutes celles des templates!

quel besoin de devoir mettre .gif .png .jpg ou .jpeg!? etc...
ah j'ignorais cela Ishi, autant pour moi, ok merci!



je crois me souvenir que la commande BBcode vue ailleurs donnait ce libellé là par ex.:
[img]url:http://etc... largeur: hauteur: [/img]
Ce message a été édité par kristoch le 13/11/2009 à 07h59.
un de mes blogs : chachacha
Martin #3 12/11/2009 - 23h18

Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005

Hors ligne Site Web

On peut limiter leur taille par css aussi, ce qui est fait actuellement sur directwind, et que je vais ajouter à la version 1.0.

.message img {
   max-width:580px;
}
Ce message a été édité par Martin le 12/11/2009 à 23h22.
Posted Image
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges
Ishimaru Chiaki #4 13/11/2009 - 05h32

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

kristoch @ 12/11/2009 - 10h38 a dit:

en même temps si il était possible d'ôter le format
tant pour les img BBcodes que toutes celles des templates!

quel besoin de devoir mettre .gif .png .jpg ou .jpeg!? etc...



je crois me souvenir que la commande BBcode vue ailleurs donnait ce libellé là par ex.:
[img]url:http://etc... largeur: hauteur: [/img]



C'est principalement pour ces deux raisons :
- Pour éviter d'insérer des images qui seront lourdes à mort, ce qui est le cas des BMP
- Pour des raisons de sécurité.  Sans ce filtrage des formats, il y a une faille XSS qui fait qu'un pirate peut insérer n'importe quoi entre les balises [ img ] pour par exemple voler le cookie d'un utilisateur.

Plus d'infos sur cette faille et les façons de le prévenir : http://www.linux-pour-lesnuls.com/xss2.php
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
Martin #5 14/11/2009 - 11h50

Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005

Hors ligne Site Web

CB ne filtre pas les formats dans la balise img.
Et aucun problème de faille XSS dans les messages, c'est protégé :)
Posted Image
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges
kristoch #6 14/11/2009 - 12h01

Groupe : Acharné
Messages : 342
Enregistré le : 05/08/2009

Hors ligne Site Web

Martin @ 14/11/2009 - 11h50 a dit:

CB ne filtre pas les formats dans la balise img.
Et aucun problème de faille XSS dans les messages, c'est protégé :)




AUCUNE image ne s'affiche si je n'en précise pas le type! "posted image"
et jpg c'est pas jpeg hein! huhu...



et quand je remplace les logos, header et autres images du skin, si je change le type d'images, je dois aller changer partout en template sinon aucun affichage!

comme j'ai tendance à foutre du fond invisible donc en PNG plus qu'en GIF, à la place en général de JPG, suis pas enquiquiné à chaque essai! huhu
damned!  :dev:


après je ne suis peut être pas géré chez mon hébergeur comme ici!
peut être une connerie mais par exemple ici quand je déco ou connecte je suis remis en index
alors que sur mon site et quel pied: je déco et reco en restant sur la même page! ça évite bien des pertes de temps et des recherches...
un de mes blogs : chachacha

 >  Réponse rapide

Composez votre message

Connectix Boards > Zone développement > Programmation > [mod] Images Resizer

 >  Informations du forum

1 personne(s) présente(s) durant une période de 15 minutes (0 membre(s) et 1 invité(s)).