phpThumb
És una llibreria que ens permet crear miniatures al vol amb multitud de opcions: reduir-la, girar-la, afegir-hi una marca d'aigua, etc. Utilitzarem aquesta llibreria per generar miniatures de les imatges abans de mostrar la web, així la càrrega de la web serà més ràpida que amb les imatges originals, que normalment pesen molt més.
http://phpthumb.sourceforge.net/

TinyMCE
És una editor WYSIWYG javascript de codi obert, que utilitzen la majoria de gestops de contingut CMS. Així dons aquest tutorial es podrà aplicar a gairebé qualsevol administració.
http://tinymce.moxiecode.com/

Advimagescale
És un plugin per a l'editor TinyMCE que permet tractar les imatges incrustades a l'editor i canviar-ne la ruta. Aquesta característica es permetrà combinar el TinyMCE amb el phpThumb.
http://code.google.com/p/tinymce-plugin-advimagescale/

1.- Instal·lar el PhpThumb
Baixarem el phpThumb, el descomprimirem i el copiarem en una carpeta de la pàgina web, per exemple a la carpeta phpThumb/

Cal cambiar el nom de l'arxiu phpThumb.config.php.default a phpThumb.config.php

Un cop fet comprovem que funciona amb alguna imatge que tingem, per exemple:
http://www.domini.cat/includes/phpThumb/phpThub.php?src=../imatges/prova.jpg&w=200&h=100
És possible que tinguem d'afegir el nostre domini a la llista de dominis vàlids de la configuració:
$PHPTHUMB_CONFIG['nooffsitelink_valid_domains'] = array(@$_SERVER['HTTP_HOST'],'www.domini.cat');

2.- Inserir imatge de la base de dades al TinyMCE en format phpThub
Suposem que tenim algun lloc de la nostra web on tenim un upload de imatges que es guarden físicament i també en una base de dades.

Per incrustar aquestes imatges en format phpThumb al tinyMCE es pot fer de varies formes, jo he triat fer-ho en una llista externa perquè és molt fàcil.

Crearem el fitxer js/myexternallist.php que retornarà un array de imatges en javascript:

var tinyMCEImageList = new Array(
   <?
   $link = mysql_connect('localhost', 'mysql_user', 'mysql_password');
   $sql='SELECT * FROM imatges"
   $res=mysql_query($sql,$link)
   $i=1;
   while ($row=mysql_fetch_assoc($res)) {
      $imp[]="[\"Imatge ".$i."\", \"/phpThumb/phpThub.php?src=../imatges/".$row['fitxer']."\"]";
      $i++;
   }
   echo implode(",",$imp);
   ?>
);

Modificarem l'script d'inici de tinyMCE perquè agafi aquest fitxer<script language="javascript" type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
                mode : "textareas",
                theme : "advanced",
                plugins: 'advimagescale,layer,advhr,advimage,advlink,inlinepopups,contextmenu',
                theme_advanced_buttons1:"bold,italic,underline,|,bullist,numlist,|,indent,outdent,|,image",
                theme_advanced_buttons2 : "",
                theme_advanced_buttons3 : "",
                theme_advanced_buttons4 : "",
                theme_advanced_toolbar_location : "top",
                cleanup_on_startup: true,
                theme_advanced_toolbar_align : "left",
                content_css : "css/tinymce.css",
                external_image_list_url : "./js/myexternallist.php"
});
</script>

Ara inserint una imatge al TinyMCE, ens apareix una nova opció, la llista de imatges, n'hi ha prou en escollir la imatge que volem i clicar Inserir.

3.- Redimensionar les imatges del TinyMCE canviant la la ruta phpThumb
Copiem el plugin avdimageresize a js/avdimageresize.js, carreguem la llibreria just després del tinyMCE.

Ja per últim modifiquem l'script de càrrega del tinyMCE per activar el plugin avdimagescale i que automàticament canviï les rutes de les imatges conservant el phpThumb al redimensionar una foto amb el TinyMCE.

<script language="javascript" type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript" src="js/avdimagescale.js"></script>
<script type="text/javascript">
tinyMCE.init({
                mode : "textareas",
                theme : "advanced",
                plugins: 'advimagescale,layer,advhr,advimage,advlink,inlinepopups,contextmenu',
                theme_advanced_buttons1:"bold,italic,underline,|,bullist,numlist,|,indent,outdent,|,image",
                theme_advanced_buttons2 : "",
                theme_advanced_buttons3 : "",
                theme_advanced_buttons4 : "",
                theme_advanced_toolbar_location : "top",
                cleanup_on_startup: true,
                theme_advanced_toolbar_align : "left",
                content_css : "css/tinymce.css",
                external_image_list_url : "./js/myexternallist.php",
                theme_advanced_statusbar_location : "bottom",
                advimagescale_maintain_aspect_ratio: false,
                advimagescale_fix_border_glitch: true,
                advimagescale_noresize_all: false,
                advimagescale_append_to_url: true,
                advimagescale_url_width_key: 'w',
                advimagescale_url_height_key: 'h',
                advimagescale_min_height: 20,
                advimagescale_min_width:  20,
            });
</script>

Llestos, ja tenim el nostre gestor de contingut configurat per utilitzar miniatures amb el phpThumb, només hem de inserir una imatge i redimensionar-la perquè funcioni.