Vous n'êtes pas identifié.

Annonce

Pages: 1 2

 

#1 upload d'images du 02-05-2011 21:31:02

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

upload d'images

bonjour j ai bien suivi le tuto de création de site qui est top mais dans la partie upload d'image, peut on avoir plusieurs images pour un même article et comment visualiser ces images dans la page public du site concernant l'article.?

et deuxième question classique, as tu une idée pour que lorsque je clique sur une image, je l'ouvre en plus grand?

certainement en créant un dossier miniatures et un dossier grandes images pour chaque article.

mais je ne vois pas comment intégrer ça à ton form d'upload.

peux tu m'aider la dessus?

merci d'avance

stephi

Hors ligne

 

02-05-2011 21:31:02

Mister $$$
Créer un site


#2 Re upload d'images du 03-05-2011 11:17:55

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Bonjour et bienvenu stephi,

Le formulaire d'upload qui est intégré au tutoriel sur la création d'un site dynamique est plus un formulaire de stockage d'images par article. Pour les afficher dans l'article, il faut faire un glisser/déposer de l'image dans CKEditor ou alors copier/coller l'url de l'image dans CKEditor.
C'est un formulaire très basique siffle et c'est pour ça qu'un tutoriel de remplacement à été créé concernant l'intégration du logiciel CKFinder qui est lui un vrai gestionnaire d'upload d'image icon_mrgreen .

Pour ouvrir une image en plus grand, je vois 2 possibilités :

1)Utiliser le script lightbox qui donne le résultat ci-dessous (clique sur l'image) :
Cliquez pour fermer

2)Intégrer CKFinder à CKEditor car celui-ci permet de créer directement des miniatures des images.

Créer un site internet gratuitement.

Hors ligne

 

#3 Re upload d'images du 04-05-2011 05:45:28

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

bonjour cOOlman

merci pour ta réponse.

j ai vu sur ton site démo. ckfinder m a l air bien pour faire ça.

Donc en pratique, comment faire?

sur ckfinder, j upload une photo en miniature, c est celle qu on verra sur la page article mais je dois la mettre dans le dossier image de ckfinder (en haut à gauche) ? et il faut que j upload l image grandeur nature et celle là je la mets dans le même dossier image?

si c est ça, j ai donc 2 photos qui ont le même nom dans ce dossier. et donc au final, j aurai plein de miniatures et phtos grandes dans ce dossier

est ce bien ça?

Ensuite sur ma page article, en php je mets quel code , Quand je regarde sur ton code source de l 'exemple que tu me donnes, ça donne ça:

<a href="http://creer-un-site.fr/userfiles/image/ckfinder/ckfinder1.png" rel="lightbox" title=""><img src="http://creer-un-site.fr/userfiles/image/ckfinder/ckfinder1.png" width="200" alt="Cliquez pour fermer" /></a>

Ouel est le code php qui correspond à ça? comment lui dire qu il doit retrouver les images correspondant à l article affiché?

tu vois ce que je veux dire.

en tout cas, merci beaucoup de ton aide.

stephi

Hors ligne

 

#4 Re upload d'images du 04-05-2011 09:13:45

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Salut stephi,

Bon, pour être sûre que tu ne t'embrouilles pas, je fais un petit résumé ^^ :

Si CKFINDER est installé, la partie "Uploadez vos images:" et "Liste des images" lié au tutoriel du Formulaire d'upload d'images na plus lieu d'exister..donc on oublie cette partie.

Donc :

1)On installe CKEditor.
2)On installe CKFinder pour l'upload d'image.

Une fois que tout est mis en ligne, on clique sur le bouton "image" de l'interface de CKEditor pour avoir accès à la fenêtre ci-dessous.

Upload partie 1 :
http://creer-un-site.fr/userfiles/image/ckfinder/ckfinder.png

On clique sur "Explorer le serveur" pour avoir accès à l'interface d'upload.

Upload partie 2 :
http://creer-un-site.fr/userfiles/image/ckfinder/ckfinder1.png

La tu cliques sur "Envoyer" pour uploader ton image. Tu fais ensuite un clique droit sur ton image et tu sélectionnes "Choisir une miniature". L'url de la miniature va donc s'afficher dans le champ "URL" (voir image Upload partie 1). Ensuite tu clique sur l'onglet "Lien" et tu sélectionnes ton image original (double clique sur l'image ou clique droit » "Choisir") puis tu fais "OK".
Dans tes articles, c'est la miniature qui s'affiche et un clique dessus affiche la taille original big_smile .

CKFinder te permet entre autre de créer une nouvelle vignette (Redimensionner) au format :
-Petit (90x90)
-Moyen (120x120)
-Gros (180x180)
ou de déterminer les nouvelles dimensions de celle-ci.

Il est à noter que tu peux modifier ses dimensions (me semble t'il) dans le fichier "config.php" de CKFINDER

Code:

$config['plugin_imageresize']['smallThumb'] = '90x90';
$config['plugin_imageresize']['mediumThumb'] = '120x120';
$config['plugin_imageresize']['largeThumb'] = '180x180';
Créer un site internet gratuitement.

Hors ligne

 

#5 Re upload d'images du 04-05-2011 17:25:44

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

Merci cOOlman

C est super mais mon prôblème c est que de cette façon quand on clique sur la miniature on ouvre une page et il faut faire retour pour revenir sur la page de l'article.

Ce que j aurai aimé c est utilisé lightbox comme tu l'a fait dans l exemple que tu me montres  + haut :

Tu écris:

"Pour ouvrir une image en plus grand, je vois 2 possibilités :

1)Utiliser le script lightbox qui donne le résultat ci-dessous (clique sur l'image) :"

J ai récupéré ce code de ta source:

<a href="http://creer-un-site.fr/userfiles/image/ckfinder/ckfinder1.png" rel="lightbox" title=""><img src="http://creer-un-site.fr/userfiles/image/ckfinder/ckfinder1.png" width="200" alt="Cliquez pour fermer" /></a>

Comment dire ça en php sachant que les photos ne sont pas stockés en base de données avec ckfinder mais seulement dans les dossiers userfiles/image.

Je suis dans la page de l article X , j ai mes images , je clique sur la miniature et lightbox m ouvre l image en grand sans ouvrir de nouvelle page

voilà mon besoin précis.

Merci de ton aide

stéphi

Hors ligne

 

#6 Re upload d'images du 04-05-2011 18:55:05

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Ok ok icon_mrgreen ,

Au préalable, il faut que CKEditor et CKFinder soient installés !

Etape 1 :

Télécharger lightbox, décompresser le zip et envoyer les dossiers "css", "images" et "js" à la racine du site.

Etape 2 :

Insérer les lignes suivantes dans l'entête du fichier "page.php" (avant </head>) :

Code:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

Etape 3 :

Sur cette partie il faut insérer l'attribut rel="lightbox" directement au lien de l'image et la 2 choix s'imposes et c'est à toi de choisir ta préférence.

En manuel :

Quand tu as sélectionné ton image via CKFinder, celle-ci s'affiche dans CKEditor. Le logiciel CKEditor dispose d'un bouton permettant de voir la source du document. Il faut donc que tu trouves le lien de l'image et que tu lui ajoutes l'attribut rel="lightbox" :

Code:

<a href="http://ton-site.fr/userfiles/image/ckfinder/image1.png" rel="lightbox" title="mon image"><img src="http://creer-un-site.fr/userfiles/image/ckfinder/image1.png" width="200" alt="mon image" /></a>

Version automatique :

En "automatique", il faut noter que toutes les images disposant d'un lien s'ouvriront par le biais de "lightbox" .

Dans le fichier "page.php", chercher la ligne :

Code:

$contenu=$affiche['texte'];

et ajouter en dessous :

Code:

$contenu = str_replace('<a href="/ckfinder/userfiles/images/','<a rel="lightbox" href="/ckfinder/userfiles/images/',$contenu);

Attention : le dossier /images/ du code ci-dessus est le nom que j'ai donné à mon dossier images dans CKFinder ... il faut donc adpater le code en fonction du nom de ton dossier !!

Créer un site internet gratuitement.

Hors ligne

 

#7 Re upload d'images du 07-05-2011 19:07:04

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

Salut cOOlman

Bon j ai réussi à installer ckfinder avec ckeditor, c est ok ( mais c est loin d être évident quand même)

j en suis pas encore à tester la lighbox pour l instant.

Mon problême est le chemin de mes images. je ne veux pas utiliser le chemin par défaut.

mon dossier images a le chemin suivant (je bosse en local):

C:\wamp\www\MONSITE\web\administrateur\CKEditor\ckfinder\userfiles\images

Que dois je mettre dans le config.php de ckfinder à:

$baseUrl =

et

$baseDir =

pour lui indiquer de stocker mes images dans ce dossier?

merci à toi

stephi

Hors ligne

 

#8 Re upload d'images du 07-05-2011 20:39:53

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Salut stephi,

A vrai dire je n'en sais rien du tout puisque je ne bosse jamais en local 014 !

Essaye :

Code:

$baseUrl = '/www/MONSITE/web/administrateur/CKEditor/ckfinder/userfiles/';
$baseDir = resolveUrl($baseUrl);

ou

Code:

$baseUrl = '/ckfinder/userfiles/';
$baseDir = resolveUrl($baseUrl);
Créer un site internet gratuitement.

Hors ligne

 

#9 Re upload d'images du 08-05-2011 12:36:45

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

cOOlman, merci

bon ça avance, en fait il faut faire sans le www,

$baseUrl ='/mon_site/web/administrateur/CKEditor/ckfinder/userfiles/';

$baseDir = resolveUrl($baseUrl);

En fait, il créé automatiquement un répertoire images sous userfiles et un répertoire thumbs(miniatures)/images si tu fait des miniatures bien sur.

si je fait le lien source dans l'upload d'image, ça donne ça:

<a href="/mon_site/web/administrateur/CKEditor/ckfinder/userfiles/images/EFFET BOIS 1 ENCADRE.jpg"><img height="200" alt="" width="150" src="/mon_site/web/administrateur/CKEditor/ckfinder/userfiles/images/EFFET BOIS 1 ENCADRE.jpg" /></a></

Maintenant pour mon histoire de lighbox que j aimerai bien sur automatiser, comment adapter $contenu dont tu m'a parlé plus haut?

si ça marche, ce serait top car ckfinder est vraiment génial comme outil.

merci encore

stephi

Hors ligne

 

#10 Re upload d'images du 08-05-2011 13:16:23

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Salut stephi,

Comme dit plus haut :

En "automatique", il faut noter que toutes les images disposant d'un lien commencent par (/mon_site/web/administrateur/CKEditor/ckfinder/userfiles/images/) s'ouvriront par le biais de "lightbox" .

Dans le fichier "page.php", chercher la ligne :

Code:

$contenu=$affiche['texte'];

et ajouter en dessous (dans ton cas vu que tu est en local):

Code:

$contenu = str_replace('<a href="/mon_site/web/administrateur/CKEditor/ckfinder/userfiles/images/','<a rel="lightbox" href="/mon_site/web/administrateur/CKEditor/ckfinder/userfiles/images/',$contenu);

Sans oublier d'insérer :

Code:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

Note : Il faut peut être modifier les url pour ton cas sous wamp !!

Créer un site internet gratuitement.

Hors ligne

 

#11 Re upload d'images du 09-05-2011 19:45:22

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

salut cOOlman

rien à faire en automatique.

quand j integre le rel lighbox en manuel, ça marche impec:

<a href="/MINOPHP/administrateur/CKEditor/ckfinder/userfiles/images/CHAUX 1p.jpg" rel="lightbox"><img alt="bibi" height="67" src="/MINOPHP/administrateur/CKEditor/ckfinder/userfiles/images/CHAUX 1p.jpg" width="100" /></a

mais quand j applique le code avec str replace :

$contenu = str_replace('<a href="/MINOPHP/administrateur/CKEditor/ckfinder/userfiles/images/','<a rel="lightbox" href=/"MINOPHP/administrateur/CKEditor/ckfinder/userfiles/images/',$contenu);

il ouvre bien l effet lighbox mais donne une image vide.

ça ne viendrait pas du fait que si je regarde mon fichier j ai un dossier ckfinder/userfiles/images et un dossier ckfinder/userfiles/_thumbs/images où il stocke automatiquement la photo plus petite?

toi dans ton config.php de ckfinder, tu as mis quel chemin pour tes images?
et dans ton str replace, tu as mis quoi?
que je fasse comme toi après tout...

je suis sur que c est un problême d emplacement, ya pas de raison.

merci car j y ai passé des heures

stephi

Hors ligne

 

#12 Re upload d'images du 09-05-2011 21:04:37

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Salut stephi,

Pour moi ton soucis est lié à l'emplacement des images !
Si je prend mon site de démo et notamment la page nommé "page.php" qui affiche les articles :

Code:

while($affiche = mysql_fetch_array($page))
 {
      $titre=$affiche['titre'];
      $description=$affiche['description'];
      $contenu=$affiche['texte'];
      $contenu = str_replace('<a href="/ckfinder/userfiles/images/','<a rel="lightbox" href="/ckfinder/userfiles/images/',$contenu);
      $id_categorie = $affiche['id_categorie'];
 }

et

Code:

    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

Tu peux faire le teste sur la démo http://creer.ton.site.free.fr, j'ai mis provisoirement le script lighbox en place.

Créer un site internet gratuitement.

Hors ligne

 

#13 Re upload d'images du 10-05-2011 05:33:23

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

cOOlman, tu es très sympa de répondre si vite.

oui k ai testé sur ton site c est impec.

et dans le config.php de ckfinder, tu laisses le chemin par défaut dans base dir?

merci puis je teste tout ça, ya pas de raison que ça marche pas.

stephi

Hors ligne

 

#14 Re upload d'images du 10-05-2011 09:13:46

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Le début de mon fichier config.php

Code:

<?php

session_start();
function CheckAuthentication()
{
if($_SESSION['IsAuthorized'] == 1)
{
return true;
}
else
{
return false;
}
}

// LicenseKey : Paste your license key here. If left blank, CKFinder will be
// fully functional, in demo mode.
$config['LicenseName'] = '';
$config['LicenseKey'] = '';

$baseUrl = '/ckfinder/userfiles/';

$baseDir = resolveUrl($baseUrl);

//suite du fichier
?>

Hormis la fonction "function CheckAuthentication()", rien d'autre n'a été modifié dans ce fichier.

Sinon, quand tu fais tes testes en local et que tu fais un lien d'un screen pour ouvrir une image plus grand sans lighbox, l'image plus grand s'affiche ou pas ?

Créer un site internet gratuitement.

Hors ligne

 

#15 Re upload d'images du 13-05-2011 05:39:30

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

Salut cOOlmna

Ouf, finalement ça marche, c était bien un problême de chemin. j ai repris ton modêle dans le config.php.

il me reste juste un problême concernant l encodage , j ai les caractère é, è...qui ne passent pas.

j ai repris ton <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />.

j ai essayé aussi : charset=utf-8,



y a til quelque chose à régler dans ckeditor ou la base de donnée ou ailleurs.? Connais tu parfois ce genre de soucis?

encore merci

stephi

Hors ligne

 

#16 Re upload d'images du 13-05-2011 08:32:19

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Salut stephi,

Le doctype peut y jouer un rôle..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ensuite je traite mes variables avec "htmlspecialchars" et "stripcslashes" et j'effectue leurs insertion en utilisant "mysql_real_escape_string". Mes champs en bd sont en "latin general ci".

Si ça ne change rien, ajoute le code suivant dans la fonction "function CheckAuthentication()" du fichier config.php

Code:

config.entities = false;

Une fois fait et envoyé sur ton serveur, tu vides le cache de ton navigateur et tu testes. Avec un peut de chance ça devrait fonctionner.

Créer un site internet gratuitement.

Hors ligne

 

#17 Re upload d'images du 14-05-2011 16:15:10

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

salut cOOLman

ok finalement c est bon pour les é.

je me demandais si avec ton code php, lightbox et ckeditor, ily avait un moyen de rajouter un titre a la photo agrandie.

ça serait cool.

encore merci

stephi

Hors ligne

 

#18 Re upload d'images du 14-05-2011 19:46:55

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Salut stephi,

Pour lightbox, il te suffit simplement de remplir l'attribut "title="mon image"" du lien de ton image pour qu'il s'affiche en bas de l'image agrandit.

Sinon, pour le accents, tu as procédé comment ?

Créer un site internet gratuitement.

Hors ligne

 

#19 Re upload d'images du 15-05-2011 19:47:59

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

salut cOOlman

j ai mis ton code et

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

pour avoir les accents.

pour mon titre, je le mets où car je travaille avec ckfinder et je ne vois pas de zone title dans la boite de dialogue ckfinder car n'oublie pas que je travaille en dynamique .

en tout cas ta réactivité est top et rare sur les forums.

merci

stephi

Hors ligne

 

#20 Re upload d'images du 15-05-2011 20:52:46

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Salut stephi,

Le "title" se trouve dans l'onglet "Avancé"
Cliquez pour fermer

stephi a écrit:

en tout cas ta réactivité est top et rare sur les forums.

Content de la savoir icon_mrgreen

Créer un site internet gratuitement.

Hors ligne

 

#21 Re upload d'images du 16-05-2011 07:56:07

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

cOOLman

j ai donc renseigné title qui se trouve dans l'onglet avancé de l'upload

mais il ne se passe rien de nouveau quand j agrandi l'image.

faut il modifier  le code php:

$contenu = str_replace('<a href="/ckfinder/userfiles/images/','<a rel="lightbox" href="/ckfinder/userfiles/images/',$contenu);
     

tu as testé cette histoire de titre?

a bientôt

stephi

Hors ligne

 

#22 Re upload d'images du 16-05-2011 08:22:13

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Salu stephi,

Effectivement il faut modifier un tantinet le code 014

Code:

$contenu = str_replace('href="/ckfinder/userfiles/images/','rel="lightbox" href="/ckfinder/userfiles/images/',$contenu);

Explication :

Le code php recherche la chaine "<a href="/ckfinder/userfiles/images/" pour la remplacer hors quand on ajoute l'attribut "title" la chaine devient "<a title="mon image" href="/ckfinder/userfiles/images/".

Pour répondre à ta question, non je n'ai pas testé sur mon site de démo mais je l'utilise sur mon site 014 .

Créer un site internet gratuitement.

Hors ligne

 

#23 Re upload d'images du 16-05-2011 11:00:45

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

donc j 'écris

$contenu = str_replace('<a title="mon image" href="/ckfinder/userfiles/images/','<a rel="ligtbox" href="/ckfinder/userfiles/images/',$contenu

c est ça?

Hors ligne

 

#24 Re upload d'images du 16-05-2011 11:02:29

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: upload d'images

Non, tu écris :

Code:

$contenu = str_replace('href="/ckfinder/userfiles/images/','rel="lightbox" href="/ckfinder/userfiles/images/',$contenu);

Ainsi le code va chercher la partie href="/ckfinder/userfiles/images/ et n'affectera pas le "title" qui se trouve juste après <a.

Créer un site internet gratuitement.

Hors ligne

 

#25 Re upload d'images du 16-05-2011 15:16:48

stephi
c00lnaute nouveau
Date d'inscription: 02-05-2011
Messages: 22

Re: upload d'images

Bon ça ne marche pas, j ai repris ton code ci dessus et mis un titre dans le title de ckfinder onglet avancé.

j ai l image mais sans titre.

je vois pas.

stephi

Hors ligne

 

 

Pages: 1 2

Propulsé par PunBB
© Copyright 2007
Forum créer un site

Partenaires de « créer un site internet »

Création de sites | Annuaire généraliste | Jeux flash | Locations de vacances | Petites annonces gratuites | Site Internet | Forum gratuit