La Ferme du web - Les forums
Venez baraguiner avec la communauté !
Vous n'êtes pas identifié.
- Index
- » Les Tutos du web
- » Tutorial: Un système de gestion d'images complet pour son site
#1 09/02/2009 19:38:34
Tutorial: Un système de gestion d'images complet pour son site
Topic officiel de support pour le tutorial: "Un système de gestion d'images complet pour son site".
Objectif de ce tutorial
* 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 tutorial:
* 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
Support et observations
N'hésitez pas à poser vos questions et observations dans ce topic.
Aucun support sur les commentaires ne sera fourni.
Hors ligne
09/02/2009 19:38:34
- Botte De Foin Publicitaire
#2 13/02/2009 02:17:20
Re: Tutorial: Un système de gestion d'images complet pour son site
Super tuto, j'adore l'idée et je pense en avoir besoin rapidement, j'ai néanmoins rencontré un énorme paquet de problèmes que j'ai résolu (notamment les notations des chemins pour les images, scripts...) mais 2 erreurs subsistent:
- La barre de progression ne se remplie pas (même si le pourcentage lui augmente et que l'image est uploadée)
- Le script bloque sur la miniaturisation de l'image, il refuse l'upload à partir de l'insertion des propriétés suivantes :
$handle->image_resize = true;
$handle->image_ratio_crop = true;
$handle->image_x = 100;
$handle->image_y = 100;
En tout cas merci pour ce tuto, j'espère réussir à démêler l'histoire pour me resservir de tout ca 
Hors ligne
#3 13/02/2009 11:59:07
Re: Tutorial: Un système de gestion d'images complet pour son site
Quels problèmes a tu résolu ? Des problèmes à cause du tuto ? Ou alors parce que tu n'avais pas mis les bons chemins ? (Histoire que je corrige si problème il y'a).
-> Barre de progression: Est-ce que tu as bien l'image dédiée ? Regarde si tu as bien mis le bon chemin dans le CSS aussi. Et dans le HTML. Si je ne me trompe pas il s'agit de /assets/progress-bar/progress.gif
-> Quelles sont les erreurs qu'il te sort ? Fait moi voir un echo $handle->error; après le Process de ta miniature.
Hors ligne
#4 13/02/2009 12:10:49
Re: Tutorial: Un système de gestion d'images complet pour son site
Après plusieurs tests, il s'avère que c'est cette ligne qui pose problème :
$handle->image_ratio_crop = true;
Le crop n'a pas l'air de vouloir fonctionner...
Mon principal problème avant se situé dans les chemins relatifs, le tuto est écrit avec des chemins relatifs du style : "/directory/file.ext" alors que ma config ne semble accepter que les chemins du type : "./directory/file.ext", je ne sais pas pourquoi, peut être une histoire de mac/linux/windows...
Hors ligne
#5 13/02/2009 12:19:27
Re: Tutorial: Un système de gestion d'images complet pour son site
Ben normalement si tu mets le path Absolu complet, il n'y'a aucuns soucis de chemin, bizare !
Tu peux pas me filer le logs d'erreurs ? Je vois pas pourquoi ça marche pas le ratio_crop.
Hors ligne
#6 13/02/2009 14:40:58
Re: Tutorial: Un système de gestion d'images complet pour son site
Tout ceci m'a l'air très aléatoire, une seule photo a passé l'étape du crop puis plus rien, de plus je ne trouve aucun log de cette erreur, où doit-elle se trouver?
Hors ligne
#7 13/02/2009 16:02:05
Re: Tutorial: Un système de gestion d'images complet pour son site
Il faut que tu fasse un
echo $handle->error;
après le Process de ta version qui plante.
(rajoute un exit(); après si tu la vois pas)
Il n'y'a rien d'aléatoire normalement, tout fonctionne impeccablement chez moi 
Hors ligne
#8 13/02/2009 18:04:39
Re: Tutorial: Un système de gestion d'images complet pour son site
if ($handle->uploaded)
{
$handle->Process("./images/orig/");
// Création de l'image miniature
$handle->image_resize = true;
$handle->image_ratio_crop = true;
$handle->image_x = 100;
$handle->image_y = 100;
$handle->Process("./images/mini/");
echo $handle->error;
exit();
etc...
Aucune erreur ne s'affiche, je pense que c'est la preuve qu'il y a un blocage. Par contre, j'ai une photo et une seule dans toutes celles que j'ai essayé qui marche correctement, j'avoue ne pas comprendre
Hors ligne
#10 19/02/2009 10:56:19
- trigone
- Membre
- Date d'inscription: 19/02/2009
- Messages: 3
Re: Tutorial: Un système de gestion d'images complet pour son site
salut
très bon tuto
mais moi quand je click sur le lien pour avoir la boite de dialogue sa me renvoi un alert error et c tous
une idée
merci de votre aide!
Hors ligne
#12 19/02/2009 11:22:44
- trigone
- Membre
- Date d'inscription: 19/02/2009
- Messages: 3
Re: Tutorial: Un système de gestion d'images complet pour son site
quand je click sur Explorer les fichiers sa m'affiche un message d'erreur "error" mais je vien de m'apercevoir que il n'afiche ce message que sur mon navigateur sur un autre pc sa marche... pourtant j'ai Flash Player 10.0.12.36
et mon navigateur est mozilla
il me fait la meme chose sous internet explorer sur mon pc
Dernière modification par trigone (19/02/2009 11:23:36)
Hors ligne
#14 19/02/2009 20:28:14
- trigone
- Membre
- Date d'inscription: 19/02/2009
- Messages: 3
Re: Tutorial: Un système de gestion d'images complet pour son site
en meme temp meme la vertion sur le showcase ne marche pas chez moi
Hors ligne
#15 20/02/2009 10:01:59
Re: Tutorial: Un système de gestion d'images complet pour son site
Ici: http://digitarald.de/project/fancyuploa … eue-fixed/
Sinon c'est que ton Flash n'est pas à jour.
Hors ligne
#16 27/02/2009 12:59:11
- nagero
- Membre
- Date d'inscription: 27/02/2009
- Messages: 1
Re: Tutorial: Un système de gestion d'images complet pour son site
salut j'ai un problème avec la page uploader.php je crois que c'est au niveau de l'envoi de la photo . Voici mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/Swiff.Uploader.js"></script>
<script type="text/javascript" src="/js/Fx.ProgressBar.js"></script>
<script type="text/javascript" src="/js/FancyUpload2.js"></script>
<title> Bienvenue </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="corps">
<form action="/doUpload.php" method="post" enctype="multipart/form-data" id="form-demo">
<fieldset id="demo-fallback">
<label for="demo-photoupload">
Upload images:
<input type="file" name="photoupload" id="demo-photoupload" />
</label>
</fieldset>
<div id="demo-status" class="hide">
<p>
<a href="#" id="demo-browse">Explorer les fichiers</a> |
<input type="checkbox" id="demo-select-images" checked /> Images uniquement |
<a href="#" id="demo-clear">Effacer la liste</a> |
<a href="#" id="demo-upload">Upload !</a>
</p>
<div>
<strong class="overall-title">Progression totale</strong><br />
<img src="/images/progress-bar/bar.gif" class="progress overall-progress" />
</div>
<div>
<strong class="current-title">Progression du fichier</strong><br />
<img src="/images/progress-bar/bar.gif" class="progress current-progress" />
</div>
<div class="current-text"></div>
</div>
<ul id="demo-list"></ul>
</form>
</div>
</body>
</html>
Qu'en pensez vous ?? je ne trouve pas la solution pouvez vous m'aider ??
Dernière modification par nagero (27/02/2009 13:00:09)
Hors ligne
#17 03/03/2009 15:47:04
- jelie
- Membre
- Date d'inscription: 02/03/2009
- Messages: 7
Re: Tutorial: Un système de gestion d'images complet pour son site
trigone a écrit:
quand je click sur Explorer les fichiers sa m'affiche un message d'erreur "error" mais je vien de m'apercevoir que il n'afiche ce message que sur mon navigateur sur un autre pc sa marche... pourtant j'ai Flash Player 10.0.12.36
et mon navigateur est mozilla
il me fait la meme chose sous internet explorer sur mon pc
Idem pour moi, lorsque je clique sur "Explorer les fichiers" sous FireFox --> boite d'alerte "erreur';
Et sous Ie, il faut que je recharge deux fois la page pour que cela puisse marcher.
Bien que tout les fichiers soit a jour. Je teste par contre mes fichiers en local
Si trigone a trouver une solution ?
EDIT : Je ne sais pas ce que j'ai changé, mais ca marche ....
Après réflexion, tu as surement raison, j'ai changé de fichier entre deux, ca devait etre Fancy Upload pour Flash 10
Dernière modification par jelie (03/03/2009 19:23:47)
Hors ligne
#19 03/03/2009 18:59:35
Re: Tutorial: Un système de gestion d'images complet pour son site
nagero a écrit:
salut j'ai un problème avec la page uploader.php je crois que c'est au niveau de l'envoi de la photo .
Qu'en pensez vous ?? je ne trouve pas la solution pouvez vous m'aider ??
Il faut que tu m'en dise plus sur ton problème !
Quelle est l'erreur ? Qu'est ce qui marche ? Qu'est-ce qui ne marche pas ?
Hors ligne
#20 05/03/2009 16:47:52
- anarta
- Membre
- Lieu: Entre Orléans et Chateaudun
- Date d'inscription: 05/03/2009
- Messages: 45
Re: Tutorial: Un système de gestion d'images complet pour son site
Bonjour, je suis nouveaux sur le site et j'essaye de faire le tutoriel pour uploader des images sur un site. Mais voila, j'ai un souci, je choisi l'image que je veux envoyer pas de probleme mais lorsque je clique sur envoyer firefox me demande d'enregistrer le fichier doUpload.php
J'ai vu que c'était a cause de mon include qui est dans le fichier doUpload:
include("classupload.php");
Alors ma question c'est pourquoi ça fait ça? Je travaille en local avec easyphp, le fichier classupload est peut etre trop long!
Petite précision: le fichier doUpload que j'enregistre contient:
<br />
<b>Notice</b>: Undefined index: photoupload in <b>C:\Program Files\EasyPHP 3.0\www\testuploadimg\web\doUpload.php</b> on line <b>4</b><br />
[]
j'ai donc rajouter un bouton submit dans mon formulaire et quand je clique dessus il me demande toujours d'enregistrer le fichier doUpload.php mais l'image est bien transféré dans mon répértoire.
le fichier doUpload que j'enregistre contient alors:
{"result":"success","size":"<strong>jean1.jpg<\/strong> transf\u00e9r\u00e9 (400x600)"}
Ça doit dire que c'est bon, mais je voudrais toujours que la fenetre me demandant d'enregistrer le fichier s'ouvre.
Dernière modification par anarta (06/03/2009 10:04:58)
Hors ligne
#22 06/03/2009 10:29:35
- anarta
- Membre
- Lieu: Entre Orléans et Chateaudun
- Date d'inscription: 05/03/2009
- Messages: 45
Re: Tutorial: Un système de gestion d'images complet pour son site
OUI j'ai bien mis les balises, j'ai continue le tuto l'image s'enregistre bien, la miniature est cree mais il me demande toujours si je veux enregistrer le fichier.
J'ai aussi du mal sur la dernière partie du tuto avec l'utilisation de tinyMCE, je vois pas ou il faut faire le lien entre le module image et la fonction Uploadimage que l'on a créé avant.
Ça ne me demande plus si je veux enregistrer le fichier lorsque je mets les dernières lignes du fichier doUpload en commentaire, je ne sais meme pas ce qu'elle signifie; sont-elles importantes?
//if (!headers_sent() )
//{
// header('Content-type: application/json');
//}
//echo json_encode($result);
//exit();
Dernière modification par anarta (06/03/2009 13:58:04)
Hors ligne
#23 06/03/2009 16:22:41
Re: Tutorial: Un système de gestion d'images complet pour son site
Ah tu dois avoir un problème avec ton serveur web je suppose.
Les dernières lignes permettent à l'uploader de recevoir les informations sur la progression de l'upload... Donc c'est tout de même assez important, mais à toi de voir.
Pour comprendre la tête qu'a la page, regarde mon dernier billet sur ScreenToaster, dans la démo je montre en screencast mon interface d'admin.
Le lien vers la popup pour uploader des images et ensuite, TinyMCE avec le bouton pour appeler le module d'images.
Quelle est ta version de PHP ? Il faut PHP 5.2.* pour JSON apparement
Hors ligne
#24 06/03/2009 16:40:17
- anarta
- Membre
- Lieu: Entre Orléans et Chateaudun
- Date d'inscription: 05/03/2009
- Messages: 45
Re: Tutorial: Un système de gestion d'images complet pour son site
Merci pour vos reponses et le temps que vous passez dessus. Ma version de php est bonne, j'ai essaye egalement avec wamp mais ça fait pareil. Je vais tenter d'integrer un autre plugin comme ibrowser ou imanager ce sera peut être plus simple! Mais c'est bientot le week-end alors je crois que je verrais ça lundi.
Hors ligne
#25 06/03/2009 17:00:57
Re: Tutorial: Un système de gestion d'images complet pour son site
En fait je comprends pas quel est le problème exact.
C'est quand tu fais quoi que ça te demande de télécharger le fichier ? Et quel fichier ça te demande de télécharger ?
C'est bien pendant l'upload d'une image ?
Hors ligne
- Index
- » Les Tutos du web
- » Tutorial: Un système de gestion d'images complet pour son site