gérer des images

cFranssen · 13/12/2010, 22h03

bonjour, je voudrais savoir la meilleur façon de gérer des images :

L'admin du site que je suis entrain de faire doit pouvoir insérer 3 photos (jusque là, pas de problème)

ensuite, dans la fiche produit, J'aimerais qu'il y ai une grande photo et 3 petite en dessous. Quand on clic sur une petite, elle s'affiche en grand.

quel est la meilleur façon de gérer cela ?

que faut-il mettre dans les champ de la base de donnée ?

bref comment feriez vous pour insérer trois photos et avoir sur la page

3 petite et 1 grande sans que ça prenne 2min a charger ?

merci d'avance cFranssen

gene69 · 14/12/2010, 09h04

C'est impossible.

Si c'est lent c'est que ton image est trop grosse. php ne fera rien contre ça. Après tu peux faire une belle interface distrayante pour que la personne n'ai pas trop l'impression d'attendre.

larffas68 · 14/12/2010, 14h05

salut,

pour ce faire il faudra procéder de cette façon :

1 - lors de l'ajout d'image tu fais un Upload des images grâce a PHP et tu stocke leurs noms dans une BDD.
2 - tu prends ces photos et tu fais un redimensionnement de ces images (librairie GD ou ImageMagick(préférence perso)) pour obtenir des miniatures que tu enregistre avec par exemple : nom_image_small.jpg sachant que cette image se nomme nom_image.jpg
3- tu utilises Javascript pour afficher tes images dans ta page avec le chargement de l'image normale en grand format et de 3 miniatures.
4- action au passage de la souris tu fait un rechargement du conteneur de l'image grand format en fonction de la valeur de l'image miniature de l'action.

Et voila pas de chargement lourd et une optimisation nickel.

Si tu souhaites un niveau d'accessibilité, il suffira de faire un paramètre sur ta page avec l'id de l'image a chargé en grand format et de mettre le lien sur chaque miniature avec un return false sur la fonction js associé pour les gens qui ont javascript ne rechargent eux pas la page.

Bonne chance

cFranssen · 14/12/2010, 16h00

Il faut donc uploader une image, l'enregistrer en taille originale et en petite (2 fois la même image mais pas de la même taille sur mon serveur. C'est ça ?

donc 2 champ par photos dans ma bd, un "mini" et un "originale" ?

pour le javascript, savez vous ou je peu trouver un code ? car je n'y connais pas grand chose au javaScript.

merci d'avance

larffas68 · 14/12/2010, 16h17

Pour les images c'est cela.

Pour le JavaScript c'est assez simple il suffit de faire un script simple :

dans le head :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script type='text/javascript'>
  function modifie_image(param){
    document.getElementById('GDimage').src='img/'+param;
  }
 
</script>

dans le body : (imageGD1,imageGD3,imageGD2 = nom de l'image + extension)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<img src='nom_imageGD1' id='GDimage'/>
<img src='nom_imagePT1' onmouseover="javascript:modifie_image('imageGD1');" />
<img src='nom_imagePT2' onmouseover="javascript:modifie_image('imageGD2');" />
<img src='nom_imagePT3' onmouseover="javascript:modifie_image('imageGD3');" />

Bon courage

radicaldreamer · 14/12/2010, 16h49

Pour les images, un champs en base de données suffit.

champs "image" et champs "extension"

nom_de_limage / .jpg (exemple)

ensuite tu feras un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
//pour l'originale
echo '<img src="url/de/limage'.$resultat['image'].$resultat['extension'].'" />';
//pour la miniature
echo '<img src="url/de/limage'.$resultat['image'].'_small'.$resultat['extension'].'" />';

cFranssen · 14/12/2010, 18h23

bonjour, radicaldreamer

je ne voie pas ce que j'y gagne car dans les 2 cas j'ai 2 champ dans la base

larffas68

merci je teste de suite

cFranssen · 14/12/2010, 21h45

re, j'ai une problème avec le javascript:

il n'y a pas de grande image quand je passe la souris dessus.

j'ai certainement fait une erreur

voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>admin bartho</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style_admin.css" rel="stylesheet" type="text/css" media="all" />
 
 
<script type='text/javascript'>
function modifie_image(param){
document.getElementById('GDimage').src='img/big/'+param;
}
 
</script>
 
 
 
</head>
<body>
 
	<div id="menu">	
		<ul>
			<li><a href="ajouts.php" accesskey="1" title="ajouter">ajouter</a></li>
			<li><a href="modifier.php" accesskey="2" title="supp">modifier</a></li>
			<li><a href="supp.php" accesskey="2" title="supp">supprimer</a></li>
 
			<li><a href="index.html" accesskey="2" title="site">retour au site client</a></li>
		</ul>
 
			</div>
	<div id="page">
 
 
 
<img src='DSC00633.JPG' id='GDimage'/>
<img src='/img/mini/Efco/DSC00634.JPG' onmouseover="javascript:modifie_image('DSC00633.JPG');" />
<img src='/img/mini/Efco/DSC00634.JPG' onmouseover="javascript:modifie_image('DSC00633.JPG');" />
<img src='/img/mini/Efco/DSC00634.JPG' onmouseover="javascript:modifie_image('DSC00633.JPG');" />
 
 
 
	</div>
 
</body>
</html>

cFranssen · 14/12/2010, 21h59

c'est bon, ça fonctionne (j'avais oublier un "/")

mais est-il possible d'avoir une grande image dès le chargement de la page ?

larffas68 · 15/12/2010, 09h48

Oui la balise image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src='img/big/DSC00633.JPG' id='GDimage'/>

est prévu pour faire apparaitre ta grande image

radicaldreamer · 15/12/2010, 09h56

Citation:

Envoyé par cFranssen

bonjour, radicaldreamer

je ne voie pas ce que j'y gagne car dans les 2 cas j'ai 2 champ dans la base

Pourtant c'est utile si tu as 3 miniatures de tailles différents. Ou même 2.
Ensuite je te dis une astuce à toi de l'utiliser ou pas. Si tu ne vois pas, c'est pas grave, juste pour te dire que tu peux économiser de la place dans la base de données et des requêtes "lourdes" (plus qu'avec un seul champs en tout cas, puisque le champs extension tu peux le virer si tu convertis tout automatiquement en jpg, png ou ce que tu veux) et que Ô combien c'est important d’alléger la base de données étant l'un des premiers goulo d'étranglement des performances.

L'avantage du système de mettre juste le nom et séparer l'extension c'est par exemple si tu veux un grande image, une miniature et une moyenne (par clique sur la moyenne tu arrives sur un zoom à la grande). Tu stockeras uniquement "nomimage" et ensuite, tu choisiras (par fonction ou en tapant directement) la taille que tu veux en faisant $result['image'].'_grande' (ou petite, ou moyenne). Suis-je plus précis?

Cordialement, Guillaume

larffas68 · 15/12/2010, 10h10

re, petite précision histoire de faire du coup encore mieux vu qu'il faut bien tout formalisé, si tu veux pouvoir gérés différents formats d'images (PNG,JPG,GIF) tu peux aussi enregistrer le nom de ton fichier avec extension par exemple :

Citation:

fichier grand format : MONIMAGE.jpg
et du coup tu enregistre la miniature en xs_MONIMAGE.jpg

fichier grand format : MONIMAGE.gif
et du coup tu enregistre la miniature en xs_MONIMAGE.gif

fichier grand format : MONIMAGE.png
et du coup tu enregistre la miniature en xs_MONIMAGE.png

et tout travail de développement se doit d’être optimisé au mieux et avec un seul champs c'est le cas

cFranssen · 15/12/2010, 13h50

radicaldreamer

en effet c'est mieux, j'aimerais optimiser ce code:

j'ai essayer de faire une boucle mais je n'arrive pas a mettre une variable dans "$_FILES['variable']".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
if(isset($_FILES['photo1']))
{ 
     $dossier = './img/big/'.$marque.'/';
     $fichier = basename($_FILES['photo1']['name']);
     if(move_uploaded_file($_FILES['photo1']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça fonctionne
     {}
 
}
$img1='<img alt="" src="img/';
$img2='"';
$photo1=$img1.$fichier.$img2;
 
$file='./img/mini/'.$marque.'/'.$fichier;// L'emplacement de l'image à redimensionner.
 
copy($dossier.$fichier, $file);// copie du fichier d'origine avant de redim.
 
$x = 100;
$y = 100; // Taille en pixel de l'image redimensionnée
$size = getimagesize($file);
 
if ($size) {
 
 
$img_big = imagecreatefromjpeg($file); // On ouvre l'image d'origine
$img_new = imagecreate($x, $y);
 
 
// création de la miniature
$img_mini = imagecreatetruecolor($x, $y)
or   $img_mini = imagecreate($x, $y);
 
// copie de l'image, avec le redimensionnement.
imagecopyresized($img_mini,$img_big,0,0,0,0,$x,$y,$size[0],$size[1]);
 
imagejpeg($img_mini,$file );
 
}
 
//--------------------image2--------------------------------------------
 
 
if(isset($_FILES['photo2']))
{ 
     $dossier = './img/big/'.$marque.'/';
     $fichier = basename($_FILES['photo2']['name']);
     if(move_uploaded_file($_FILES['photo2']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné...
     {}
}
$img1='<img alt="" src="img/';
$img2='"';
$photo2=$img1.$fichier.$img2;
 
 
$file='./img/mini/'.$marque.'/'.$fichier;// L'emplacement de l'image à redimensionner.
 
copy($dossier.$fichier, $file);// copie du fichier d'origine avant de redim.
 
$x = 100;
$y = 100; // Taille en pixel de l'image redimensionnée
$size = getimagesize($file);
 
if ($size) {
 
 
$img_big = imagecreatefromjpeg($file); // On ouvre l'image d'origine
$img_new = imagecreate($x, $y);
 
 
// création de la miniature
$img_mini = imagecreatetruecolor($x, $y)
or   $img_mini = imagecreate($x, $y);
 
// copie de l'image, avec le redimensionnement.
imagecopyresized($img_mini,$img_big,0,0,0,0,$x,$y,$size[0],$size[1]);
 
imagejpeg($img_mini,$file );
 
}
 
 
//-----------------image3-----------------------------------------------
 
if(isset($_FILES['photo3']))
{ 
     $dossier = './img/big/'.$marque.'/';
     $fichier = basename($_FILES['photo3']['name']);
     if(move_uploaded_file($_FILES['photo3']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné...
     {}
}
$img1='<img alt="" src="img/';
$img2='"';
$photo3=$img1.$fichier.$img2;
 
 
$img1='src="img/';
$img2='" width="80"';
$mini=$img1.$fichier.$img2;
 
 
 
$file='./img/mini/'.$marque.'/'.$fichier;// L'emplacement de l'image à redimensionner.
 
copy($dossier.$fichier, $file);// copie du fichier d'origine avant de redim.
 
$x = 100;
$y = 100; // Taille en pixel de l'image redimensionnée
$size = getimagesize($file);
 
if ($size) {
 
 
$img_big = imagecreatefromjpeg($file); // On ouvre l'image d'origine
$img_new = imagecreate($x, $y);
 
 
// création de la miniature
$img_mini = imagecreatetruecolor($x, $y)
or   $img_mini = imagecreate($x, $y);
 
// copie de l'image, avec le redimensionnement.
imagecopyresized($img_mini,$img_big,0,0,0,0,$x,$y,$size[0],$size[1]);
 
imagejpeg($img_mini,$file );
 
}

13/12/2010, 22h03	#1
cFranssen Invité de passage Inscription : septembre 2010 Messages : 69 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 69 Points : 4 Points : 4	gérer des images bonjour, je voudrais savoir la meilleur façon de gérer des images : L'admin du site que je suis entrain de faire doit pouvoir insérer 3 photos (jusque là, pas de problème) ensuite, dans la fiche produit, J'aimerais qu'il y ai une grande photo et 3 petite en dessous. Quand on clic sur une petite, elle s'affiche en grand. quel est la meilleur façon de gérer cela ? que faut-il mettre dans les champ de la base de donnée ? bref comment feriez vous pour insérer trois photos et avoir sur la page 3 petite et 1 grande sans que ça prenne 2min a charger ? merci d'avance cFranssen
	00

14/12/2010, 09h04	#2
gene69 Membre Expert Inscription : janvier 2006 Messages : 951 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : janvier 2006 Messages : 951 Points : 1 063 Points : 1 063	C'est impossible. Si c'est lent c'est que ton image est trop grosse. php ne fera rien contre ça. Après tu peux faire une belle interface distrayante pour que la personne n'ai pas trop l'impression d'attendre. __________________ PHP fait nativement la validation d'adresse électronique Vous êtes perdu en PHP? rassurez-vous ici (en) Utilisez le bouton résolu!
	00

15/12/2010, 09h48	#10
larffas68 Membre régulier Laurent S. Inscription : novembre 2010 Messages : 71 Détails du profil Informations personnelles : Nom : Laurent S. Âge : 25 Localisation : France Informations forums : Inscription : novembre 2010 Messages : 71 Points : 77 Points : 77	Oui la balise image : Code : Sélectionner tout - Visualiser dans une fenêtre à part <img src='img/big/DSC00633.JPG' id='GDimage'/> est prévu pour faire apparaitre ta grande image
	00

14/12/2010, 14h05	#3
larffas68 Membre régulier Laurent S. Inscription : novembre 2010 Messages : 71 Détails du profil Informations personnelles : Nom : Laurent S. Âge : 25 Localisation : France Informations forums : Inscription : novembre 2010 Messages : 71 Points : 77 Points : 77	salut, pour ce faire il faudra procéder de cette façon : 1 - lors de l'ajout d'image tu fais un Upload des images grâce a PHP et tu stocke leurs noms dans une BDD. 2 - tu prends ces photos et tu fais un redimensionnement de ces images (librairie GD ou ImageMagick(préférence perso)) pour obtenir des miniatures que tu enregistre avec par exemple : nom_image_small.jpg sachant que cette image se nomme nom_image.jpg 3- tu utilises Javascript pour afficher tes images dans ta page avec le chargement de l'image normale en grand format et de 3 miniatures. 4- action au passage de la souris tu fait un rechargement du conteneur de l'image grand format en fonction de la valeur de l'image miniature de l'action. Et voila pas de chargement lourd et une optimisation nickel. Si tu souhaites un niveau d'accessibilité, il suffira de faire un paramètre sur ta page avec l'id de l'image a chargé en grand format et de mettre le lien sur chaque miniature avec un return false sur la fonction js associé pour les gens qui ont javascript ne rechargent eux pas la page. Bonne chance
	00

14/12/2010, 16h00	#4
cFranssen Invité de passage Inscription : septembre 2010 Messages : 69 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 69 Points : 4 Points : 4	Il faut donc uploader une image, l'enregistrer en taille originale et en petite (2 fois la même image mais pas de la même taille sur mon serveur. C'est ça ? donc 2 champ par photos dans ma bd, un "mini" et un "originale" ? pour le javascript, savez vous ou je peu trouver un code ? car je n'y connais pas grand chose au javaScript. merci d'avance
	00

14/12/2010, 18h23	#7
cFranssen Invité de passage Inscription : septembre 2010 Messages : 69 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 69 Points : 4 Points : 4	bonjour, radicaldreamer je ne voie pas ce que j'y gagne car dans les 2 cas j'ai 2 champ dans la base larffas68 merci je teste de suite
	00

14/12/2010, 21h59	#9
cFranssen Invité de passage Inscription : septembre 2010 Messages : 69 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 69 Points : 4 Points : 4	c'est bon, ça fonctionne (j'avais oublier un "/") mais est-il possible d'avoir une grande image dès le chargement de la page ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email