J'ai un petit problème. Je suis webmaster d'un site web qui fonctionne un peu à la manière d'un blog (principe d'articles sur la page principale). Les administrateurs peuvent poster des messages en utilisant une variante de BBCode, et y inclure, images, liens, documents etc... De plus, les images peuvent être agrandies grâce à du javascript et lightbox (http://lokeshdhakar.com/projects/lightbox/)
Le souci que j'ai est le suivant. L'insertion d'images a toujours bien fonctionné, mais un de mes administrateurs m'a soumis le problème suivant. Lors de la rédaction d'un article, les 2 images (photos) qu'il a uploadé sur le serveur puis inclus dans un article apparaissent à l'envers à l'affichage (quel que soit le navigateur utilisé). L'image est uploadé à l'endroit sur le serveur, et le lien de cette dernière l'affiche à l'endroit. Par contre, une fois dans l'article, elle apparaît à l'envers pour une raison qui m'échappe. J'ai essayé d'uploader, la même image mais à l'envers sur le serveur et le problème persiste (cette fois les 2 images sont à l'envers, le lien de l'image et le rendu dans l'article).
Mon hypothèse est la suivante : l'image est inversée lors du redimensionnement par le navigateur, mais je ne comprends absolument pas pourquoi. Le code PHP/HTML n'a pas changé, et je n'ai jamais eu ce problème avec les dizaines d'images précédentes, ça a toujours fonctionné. Voilà, si quelqu'un a une idée, il me rendrait un grand service.
L'article est en brouillon, c'est pourquoi il n'apparait pas avec les photos inversées. Je ne pense vraiment pas que le problème vienne de l'upload, mais voici la classe complète (c'est assez long, mais encore une fois, c'est testé et normalement fonctionnel )
<?php
class Explorateur
{
public static function afficherExplorateur($type=''){
$_SESSION['page']='';
if($type=='images'){
echo '<h1 class="centre"> Consulter/uploader une image pour le site </h1>';
echo '<p> Pour vos noms de fichiers et dossiers, il ne faut pas utiliser de caractères exotiques
sous peine de bugs. Seuls sont autorisés : les lettres non accentuées, les chiffres, les tirets et les traits de soulignement. Rien d\'autre !!!
</p>';
if(!isset($_SESSION['dossier']) || $_SESSION['page']!='../admin/images.php'){
$_SESSION['dossier']='../images/';
$_SESSION['racine']='../images/';
$_SESSION['page']='../admin/images.php';
}
}
else if($type=='documents_partages'){
echo '<h1 class="centre"> Partager un document avec le comité</h1>';
echo '<p> Pour vos noms de fichiers et dossiers, il ne faut pas utiliser de caractères exotiques
sous peine de bugs. Seuls sont autorisés : les lettres non accentuées, les chiffres, les tirets et les traits de soulignement. Rien d\'autre !!!
</p>';
if(!isset($_SESSION['dossier']) || $_SESSION['page']!='../admin/partage_fichiers.php'){
$_SESSION['dossier']='../documents_partages/';
$_SESSION['racine']='../documents_partages/';
$_SESSION['page']='../admin/partage_fichiers.php';
}
}
else if($type=='documents'){
echo '<h1 class="centre"> Consulter/uploader un document pour le site </h1>';
echo '<p> Pour vos noms de fichiers et dossiers, il ne faut pas utiliser de caractères exotiques
sous peine de bugs. Seuls sont autorisés : les lettres non accentuées, les chiffres, les tirets et les traits de soulignement. Rien d\'autre !!!
</p>';
if(!isset($_SESSION['dossier']) || $_SESSION['page']!='../admin/documents.php'){
$_SESSION['dossier']='../documents/';
$_SESSION['racine']='../documents/';
$_SESSION['page']='../admin/documents.php';
}
}
echo '<div id="explorateur">';
self::lister();
echo '</div>';
self::afficherFenetreUpload();
echo '<p class="centre">
<a href="http://www.vfm.ch/admin"> Retour vers l\'index administrateur </a>
</p>';
}
public static function lister(){
$chemin=$_SESSION['dossier'];
$dossier=Opendir($chemin);
echo '<strong> Vous êtes ici </strong>: '.$chemin.'<br/><br/>';
while ($fichier = readdir($dossier))
{
if ($fichier != "." && !($chemin==$_SESSION['racine'] && $fichier=='..'))
{
if(is_dir($chemin.$fichier)){
if($fichier==".."){
self::afficherIcone($chemin);
echo '<input type="button" value="'.$fichier.'" name="dossier" class="bouton_vide"> <br/>';
}
else{
echo '<input type="checkbox" value="'.$fichier.'" name="checkbox">';
self::afficherIcone($chemin.$fichier);
echo '<input type="button" value="'.$fichier.'" name="dossier" class="bouton_vide"> <br/>';
}
}
}
}
closedir($dossier);
$dossier=Opendir($chemin);
while ($fichier = readdir($dossier))
{
if(!is_dir($chemin.$fichier)){
echo '<input type="checkbox" value="'.$fichier.'" name="checkbox">';
self::afficherIcone($chemin.$fichier);
echo '<a href="'.$chemin.$fichier.'" target="_blank"> '.$fichier.'</a><br/>';
}
}
closedir($dossier);
self::afficherBoutonNouveauDossier();
self::afficherBoutonSuppression();
echo '<script src="../scripts/explorateur.js"></script>';
}
public static function afficherIcone($fichier){
if(is_dir($fichier)){
echo '<img src="../icones/icone_dossier.png" alt="" class="icone"/>';
}
else if(preg_match('#.+\.gif|jpeg|jpg|png#',$fichier)){
echo '<img src="'.$fichier.'" alt="" class="icone"/>';
}
else if(preg_match('#.+\.xls|xlsx#',$fichier)){
echo '<img src="../icones/icone_excel.png" alt="" class="icone"/>';
}
else if(preg_match('#.+\.doc|docx#',$fichier)){
echo '<img src="../icones/icone_word.png" alt="" class="icone"/>';
}
else if(preg_match('#.+\.pdf#',$fichier)){
echo '<img src="../icones/icone_pdf.png" alt="" class="icone"/>';
}
else if($fichier=='suppression'){
echo '<img src="../icones/icone_suppression.png" alt="" class="icone"/>';
}
else{
echo '<img src="../icones/icone_fichier.jpeg" alt="" class="icone"/>';
}
}
public static function afficherFenetreUpload(){
$chemin=$_SESSION['dossier'];
echo '<form method="POST" action="'.$_SESSION['page'].'" enctype="multipart/form-data">
<fieldset> <legend> Partager un fichier </legend><p>
<input type="hidden" name="MAX_FILE_SIZE" value="5000000">
Choississez un fichier à partager : <input type="file" name="fichier_upload">
<input type="submit" name="envoyer" value="Envoyer le fichier">
</p> </fieldset></form>';
}
public static function traiterUpload($extensions){
if(isset($_POST['envoyer'])){
$adresse=$_SESSION['dossier'];
$fichier = basename($_FILES['fichier_upload']['name']);
$taille_maxi = 5000000;
$taille = filesize($_FILES['fichier_upload']['tmp_name']);
$extension = strrchr($_FILES['fichier_upload']['name'], '.');
$dossier=Opendir($adresse);
while ($fichier_ = readdir($dossier))
{
$noms_fichiers[]=$fichier_;
}
closedir($dossier);
//Début des vérifications de sécurité...
if(!in_array($extension, $extensions)) //Si l'extension n'est pas dans le tableau
{
$erreur = 'L\'extension de votre fichier n\'est pas acceptée';
}
if(in_array($fichier, $noms_fichiers)) //Si un fichier avec ce nom existe déjà
{
$erreur = 'un fichier avec ce nom existe déjà...';
}
if($taille>$taille_maxi)
{
$erreur = 'le fichier est trop gros. La taille est limitée à 5 Mo';
}
if(!preg_match('#([a-z0-9_]+)\.([a-z0-9_]+)#i',$fichier) && !isset($erreur)){
$erreur = 'nom trop exotique. Utilisez seulement, lettres non accentuées, chiffres et caractère de soulignement.';
}
if(!isset($erreur)) //S'il n'y a pas d'erreur, on upload
{
$fichier = strtr($fichier,
'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ',
'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
$fichier = preg_replace('/([^.a-z0-9]+)/i', '_', $fichier);
if(move_uploaded_file($_FILES['fichier_upload']['tmp_name'], $adresse.$fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné...
{
}
else //Sinon (la fonction renvoie FALSE).
{
}
}
else
{
echo 'Erreur lors de l\'upload : '.$erreur.'<br/>';
}
}
}
public static function afficherBoutonNouveauDossier(){
echo '<input type="button" name="nouveau" value="Créer un nouveau dossier dans le répertoire courant"> <br/>';
}
public static function afficherBoutonSuppression(){
echo '<input type="button" name="delete" value="Supprimer les fichiers/dossiers sélectionnés">';
}
public static function afficherFormulaireNouveauDossier(){
echo '<fieldset> <legend>Créer un nouveau dossier</legend>
<input type="text" value="Nouveau dossier" id="nom_dossier"> <br/>
<input type="button" name="nouveau_dossier" value="Créer le dossier"> <br/>
</fieldset>';
}
public static function creerNouveauDossier($nom){
$chemin=$_SESSION['dossier'];
$nom = strtr($nom,
'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ',
'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
$nom=preg_replace('#[^a-zA-Z0-9_\-]#','_',$nom);
if (!is_dir($chemin.$nom)) {
mkdir($chemin.$nom);
}
}
public static function supprimerFichiers($nom){
if(is_dir($nom)){
self::supprimerDossier($nom);
}
else{
unlink($nom);
}
}
public static function supprimerDossier($dossier){
$ouverture=@opendir($dossier);
if (!$ouverture) return;
while($fichier=readdir($ouverture)) {
if ($fichier == '.' || $fichier == '..') continue;
if (is_dir($dossier."/".$fichier)) {
$r=self::supprimerDossier($dossier."/".$fichier);
if (!$r) return false;
}
else {
$r=@unlink($dossier."/".$fichier);
if (!$r) return false;
}
}
closedir($ouverture);
$r=@rmdir($dossier);
@rename($dossier,"trash");
return true;
}
}
?>
Le site est construit principalement sur 2 classes : une classe Affichage qui gère en gros toutes la partie HTML, et une classe Manager qui va chercher les infos dans la BDD. Je pense que c'est le 2 fonctions que tu souhaites voir :
Ces photos ont été prises à l'aide d'un appareil qui enregistre son orientation lors de la prise de vue ; le soucis c'est que les navigateurs ne savent pas encore exploiter cette information.
Prenez les photos à l'endroit et/ou faites les pivoter afin que l'orientation n'ait aucune influence sur l'affichage de l'image.
Ce problème mis à part il y a des gros soucis de conception ; une classe n'est pas censée afficher du HTML, et afficher des images de 2Mo pour du 334x250 c'est un peu du gâchis de bande passante..!
Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
Merci pour la réponse Nighmat. C'est vrai que ce n'est pas top de charger 2Mo de photos sur un téléphone, mais il y a un moyen de l'empêcher ?
En ce qui concerne la rotation des photos, j'ai essayé de les inverser manuellement et de les recharger sur le serveur, la photo est malheureusement toujours affichée à l'envers ;-(
Par contre, je ne comprends pas pourquoi une classe n'est pas sensée afficher de HTML ? Il est vrai que ma classe HTML est une classe composée exclusivement de méthodes statiques, et que je n'instancie jamais la classe. Je les ai regroupées en une classe pour plus de facilité d'utilisation mais je n'utilise jamais l'objet.
- Edité par PafLeChien 16 septembre 2013 à 10:41:44
Ce problème mis à part il y a des gros soucis de conception ; une classe n'est pas censée afficher du HTML, et afficher des images de 2Mo pour du 334x250 c'est un peu du gâchis de bande passante..!
Je ne suis pas tout à fait d'accord avec toi sur ce point là car beaucoup de site type e-commerce génèrent des pages html par le biais de classes et gestion de blocks
Mais pour les photos là je sais pas ce qui se passe. probablement lorsque la photo est prise le dit nightmat
Par contre si ton image a le même nom dans ta bdd et ton dir normale qu'elle continue à l'afficher celle à l'envers
faudrait voir à la supprimer du dossier racine sur ton ftp et la réuploader à l'endroit
L'image est à l'endroit sur le serveur. Je l'ai vérifié 3 fois. Elle est à l'endroit jusqu'à ce qu'elle soit dans une bannière <img>, et c'est là que le navigateur l'inverse. Par contre, je ne sais pas pourquoi il fait ça et comment contourner le problème.
J'ai aussi essayé d'uploader l'image à l'envers pour voir. Elle reste à l'envers sur le serveur, mais l'affichage dans la bannière <img> la laisse à l'envers, ce qui confirme l'hypothèse que c'est le navigateur qui l'inverse quand elle est à l'endroit pour la mettre à l'envers ...
Ben il suffit de lire la définition de "classe" pour comprendre que ce dont vous parlez n'a aucune raison d'en être une. Si pour vous des classes sont juste des sacs à fonction alors autant faire du 100% procédural.
Concernant les images j'ai donné la cause, teste avec celle ci-dessous voir si le problème vient du cache :
Et pour le problème du poids il faut simplement les redimensionner et les optimiser, avant et/ou après upload.
Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
Je suis d'accord sur le côté sac à fonctions. Je reconnais que l'utilisation est non-optimale, mais je ne vais pas tout changer car ça demanderait trop de boulot vu les dizaines de fichiers à modifier. Après, ça ne gène pas trop, mais l'affichage aurait dû être en procédural, je le reconnais.
L'affichage est ok avec la photo que vous avez proposé. Que lui avez-vous fait ? Car j'ai bien essayé de tourner la version originale (à 2Mo), cela n'a rien changé. Comme le nom était différent, en principe le cache n'est pas intervenu et la photo avait été chargée complètement, mais à l'envers.
Pour le problème du poids, mes administrateurs aiment bien offrir des images de grande qualité, et grâce à lightbox, on peut l'ouvrir dans sa taille quasi originale et c'est quand même bien mieux qu'avec des petites photos. Il faudrait tout dupliquer avant pour tester si l'appareil est un téléphone et modifier l'affichage en fonction.
J'ai simplement pivoté l'image après avoir supprimé ses données exif. Et de la grande qualité pour afficher du 334x250 j'ai envie de dire qu'on s'en fout, le principe d'une lightbox c'est d'afficher l'image de qualité après un clic sur sa miniature pour ne pas pourrir la bande passante avec des images qui ne seront pas consultées.
D'ailleurs même sur l'image en HD on se fout des données exif, xmp et de la vignette.
- Edité par nightmat 16 septembre 2013 à 11:24:06
Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
Avec un logiciel comme Photofiltre, il suffit de charger l'image de faire clic droit/copier/coller en tant qu'image pour la dupliquer et on peut enregistrer la copie dont les infos EXIF sont supprimées.
"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)
Mon problème est désormais résolu grâce à vos éclaircissement et au logiciel ImageOptim qui supprime les données EXIF. Merci à tous pour votre aide.
Site web qui affiche une image à l'envers
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Le CSS ça peut craindre -->Conférence CSS3.CREATE