Dans ce tutorial, nous allons voir comment créer en plusieurs étapes un système de gestion d'images complet en PHP pour vos sites web.

L'objectif de ce tutorial est de pouvoir:

• Uploader une ou plusieurs images d'un coup à partir de son pc
• Redimensionner automatiquement et traiter les images uploadées (Version watermark et version originale)
• Ajouter un explorateur d'images pour pouvoir les insérer dans nos billets / articles avec TinyMCE

Plan du tuto:

• Mise en place de la popup d'Upload
• Utilisation d'une classe d'Upload pour gérer l'upload des images
• Création des images redimensionnées et avec watermark
• Modification d'un plugin TinyMCE pour l'exploration et l'insertion de nos images

Modification d'un plugin TinyMCE pour l'exploration et l'insertion de nos images

Dernière étape de notre tutorial, permettre d'explorer nos photos dans l'éditeur HTML TinyMCE et de pouvoir les insérer directement en un clic (en choisissant quel format insérer.)

Téléchargement de TinyMCE et du plugin images

Si ce n'est pas encore fait, téléchargez TinyMCE et mettez le répertoire tiny_mce dans le dossier js/

Téléchargez maintenant le plugin images modifié par la ferme du web.

Il s'agit à l'origine d'un plugin créé par http://dustweb.ru/ mais modifié par mes soins pour qu'il prenne en charge notre système d'images.

Une fois téléchargé, dézippez le répertoire images/ dans /js/tiny_mce/plugins/

Installation de TinyMCE et du Plugin d'images

Nous allons maintenant intégrer notre éditeur HTML dans la page index.php.

Insérez les fichiers javascripts nécessaires pour TinyMCE ... (Voir le Guide d'installation de TinyMCE)

Il faut spécifier à TinyMCE qu'il doit charger notre plugin images, voici un exemple de configuration pour TinyMCE:

tinyMCE.init({
                    theme : "advanced",
                    plugins : "safari,spellchecker,table,advhr,media,compat2x,advlink,advimage,images",
                    mode: "exact",
                    elements : "ID_TEXTAREA",
                    theme_advanced_toolbar_location : "top",
                    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,"
                    + "justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,formatselect,separator,"
                    + "bullist,numlist,outdent,indent,advhr,separator,spellchecker,code",
                    theme_advanced_buttons2 : "link,unlink,anchor,image,images,media,tablecontrols,separator"
                    +"undo,redo,cleanup,separator,sub,sup,charmap",
                    theme_advanced_buttons3 : "",
                    docs_language : "fr",
                    theme_advanced_toolbar_align : "left",
                    theme_advanced_statusbar_location : "bottom",
                    theme_advanced_resizing : true,
                    theme_advanced_path : true,
                    convert_newlines_to_brs : false,
                    preformatted : true,
                    relative_urls : false,
                    theme_advanced_resize_horizontal : false,
                    height:"300px",
                    width:"690px",
                    remove_linebreaks : false,
                    spellchecker_languages : "+Français=fr,English=en",
                    theme_advanced_blockformats : "p,h2,h3,h4,h5,h6,blockquote,dt,dd,code,pre"});

Ce qui est important se situe au niveau de plugins où vous devez ajouter images (advimage aussi si vous souhaitez la popup d'image avancée).

Il faut aussi ajouter le bouton de notre plugin dans la toolbar de l'éditeur: Ajoutez dans une des ligne theme_advanced_buttons l'appel à notre plugin "images".

Et dernière chose à faire, spécifier l'ID du textarea de votre page sur lequel sera

Modification du plugin pour l'adapter à votre site

Dernière étape, quelques modifications à effectuer si vous voulez adapter le plugin à votre site.

Ouvrez le fichier tinyimages.php situé dans /js/tiny_mce/images/server_connector/.

    var $folder = '/images'; // Répertoire des images
    var $thumbs = '.mini'; // Nom du répertoire des miniatures
    var $originales = '.orig'; // Nom du répertoire des images originales

Ces variables sont à modifier selon vos besoins.

Et un point de sécurité important à la ligne 14:

        // Ajoutez ici la sécurité permettant de restreindre l'accès à l'explorateur

Testez la session en cours pour n'accepter que les membres autorisés à voir l'explorateur d'images.

Exemple:

if(!isset($_SESSION['user']) || $_SESSION['user']["level"] < 5) { echo "Acces interdit !"; exit(); }

Utilisation de l'explorateur d'images

Accédez à votre page index.php. Votre Editeur TinyMCE devrait se charger et l'icone de notre plugin devrait s'afficher:

Cliquez sur le bouton et vous devriez obtenir la liste de vos images précedemment uploadées dans le répertoire images/

Pour insérer une image dans votre éditeur, il vous suffira de cliquer sur:

• M: Pour la version miniature
• N: Pour la version optimisée avec watermark
• O: Pour la version originale

Conclusion du tutorial

Voilà, vous devriez avoir un système de gestion d'images complet pour votre site permettant:

• D'uploader vos images en masse
• De créer plusieurs versions des images à la volée: Miniature, originale et optimisée avec copyright.
• D'explorer vos images avec un plugin TinyMCE
• D'insérer en un clic les images que vous voulez dans vos billets !

AIde et support: Un topic dédié au tutorial a été créé sur le forum. Merci de l'utiliser si vous rencontrez un problème quelconque. (Pas de support sur les commentaires).