Sur un site: Taille de photos variable en fonction de l'écran de l'utilisateur

Krikri · Février 15, 2012, 17:24:09

Bonjour à tous,
J'ai remarqué sur le site de Vincent Munier
http://www.vincentmunier.com/
que la taille de ses photos s'adapte, dans une certaine mesure, à la taille de l'écran.

Je trouve que c'est une très bonne idée, parce que cette astuce lui permet de présenter des photos en format paysage à 1200x800
qui se réduisent jusqu'au format 675x450 automatiquement si le navigateur a une fenêtre plus petite.

Si j'ai bien compris, c'est fait grâce à Adobe Flash Player.

Quelqu'un pourrait-il m'en dire plus? Merci.

JPSA · Février 15, 2012, 17:29:25

Citation de: Krikri le Février 15, 2012, 17:24:09
Bonjour à tous,
J'ai remarqué sur le site de Vincent Munier
http://www.vincentmunier.com/
que la taille de ses photos s'adapte, dans une certaine mesure, à la taille de l'écran.

Je trouve que c'est une très bonne idée, parce que cette astuce lui permet de présenter des photos en format paysage à 1200x800
qui se réduisent jusqu'au format 675x450 automatiquement si le navigateur a une fenêtre plus petite.

Si j'ai bien compris, c'est fait grâce à Adobe Flash Player.

Quelqu'un pourrait-il m'en dire plus? Merci.

Ca ressemble aux galeries lightroom. Un script java détecte la résolution d'écran de l'internaute et dirige la page vers l'une des 3 résolutions.

Le revers de la médaille, c'est que, pour une même page, il y a 3 dossiers des mêmes photos avec des tailles différentes...Ca se remplit vitesse
grand V sur le serveur!

J'ai 1100 photos sur mon site, si je prenais cette option, j'aurais donc 3300 fichiers photo stockés, excusez du peu!

Cedric_g · Février 15, 2012, 18:08:10

Bonsoir

C'est un site en Flash, donc géré en vectoriel : le contenu s'adapte automatiquement à son conteneur...

Vincent peut se permettre, de part sa notoriété, de se "contenter" d'une galerie Flash et d'afficher des images en très grand format (je pense qu'il se fout de se faire voler ses photos

à son niveau, ou plutôt "vu son niveau" car on les reconnaît entre toutes) d'autant que le Flash est... nul pour :
- le référencement (une seule animation, aucun texte)
- l'accessibilité (quid des déficients visuels ? Bon ok c'est un site photo, mais bon pour le principe !)
- la compatibilité (on se "passe" de tous les internautes utilisant des iPhone/iPad... par exemple)

Krikri · Février 15, 2012, 18:19:58

Merci pour vos réponses.
Je pense aussi que c'est en Flash, c'est la raison pour laquelle j'obtiens une fenêtre me parlant de Adobe flash player quand je clique sur ses photos.
Il ne doit pas craindre le vol de photo, il n'a même pas éprouvé le besoin de mettre un logo dessus!

Merci encore...

ganddalf · Février 16, 2012, 02:32:49

bonjour,
cela se fait maintenant avec le template dans joomla v1.7, qu'il faut réaliser en "FLUID"
c'est marrant, on croit que c'est génial, mais le visiteur ne change pas de taille d'écran à chaque site qu'il visite !
c'est vrai la bannière du haut est variable, est après ?
le gros problème viens surtout des articles que vous avez réalisé avec des paragraphes précis, et qui seront tous disloqués, en fonction de votre choix d'écran !
ici (joomla) on peut mettre tout en fluid, sauf les galleries, si on veut, donc on choisit les pages avec cet effet voulu

Emix · Février 16, 2012, 07:50:51

Les galeries générées par Lightroom avec le plug-in TTG CE2 Highslide Gallery (-> http://shop.theturninggate.net/collections/all/products/ttg-ce2-highslide-gallery) ne sont pas en Flash, mais en Java... - sans avoir plusieurs dossiers d'images - et sont cependant redimensionnables en fonction de la fenêtre du navigateur (et donc par conséquence de la grandeur de l'écran).
Exemple une de mes galeries sur mon site (sans faire de la pub): http://photos-dhp.ch/Galeries/En_vrac/2011/index.html

Edit: Le redimensionnement ne se fait pas pour l'image en cours et on définit une grandeur maximum des images, elles sont donc redimensionnées par diminution depuis la grandeur maximum ... OUFF

Krikri · Février 16, 2012, 12:09:27

Merci aussi à ganddalf et à Emix.

Citation de: Emix le Février 16, 2012, 07:50:51
Le redimensionnement ne se fait pas pour l'image en cours et on définit une grandeur maximum des images, elles sont donc redimensionnées par diminution depuis la grandeur maximum ... OUFF

Oui, bien sûr, on ne pourrait pas agrandir les images...
J'ai regardé ton site et ça marche très bien.

Si je résume, il y a plusieurs solutions:
Flash,
Java,
et ...joomla. Est-ce que quelqu'un sait si joomla utilise des fonctions php pour adapter la taille des images à la fenêtre du navigateur?

Charlie82 · Février 16, 2012, 16:53:36

Effectivement, et même pas besoin de CSS, il suffit de mettre la largeur en % au lieu de pixels dans la balise <IMG> .... Inconvénient de cette méthode l'image peut s'agrandir au-delà de sa taille réelle...

Petit test vite fait ici :

L'image fait 750 pixels au départ : http://www.objectif-photos.net/photos/test/page1.htm

Charlie82 · Février 16, 2012, 18:02:22

Vrai que perso, j'ai toujours mis des tailles fixes et n'ai jamais cherché à les formater en css, mais l'idée est excellente et avec le CSS3 on peut même les ombrer directement dans la page maintenant.... que demande le peuple

Charlie82 · Février 16, 2012, 18:14:28

yes et les bords arrondis qu'on réclamait depuis longtemps... je viens récemment d'utiliser tout ça sur le site que j'ai créé pour un copain...
www.laventureenanciennes.com

Krikri · Février 16, 2012, 22:54:27

Super, vous avez plein d'idées intéressantes, je vois que j'ai posté ma question au bon endroit! Merci.

Charlie82 · Février 16, 2012, 23:02:45

Tout à fait d'accord avec toi ... et y a rien de pire qu'un site où tu regardes tourner un sablier pendant qu'une animation (souvent inutile) se charge.... quand elle se charge...

Krikri · Février 17, 2012, 10:38:09

Pour moi, le plus simple est le mieux, je ne connais pas le Flash. A vrai dire je n'ai pas essayé HTML5 avec CSS3.

J'ai encore du mal avec CSS, même si à force j'ai réussi à l'utiliser un peu. A chaque fois je commets des erreurs de syntaxe qui font que ça ne marche pas et que j'ai du mal à identifier, ce qui prouve que je n'ai pas la bonne doc...

Pour en revenir aux sites de photo, je suis persuadé qu'il faut montrer des photos plus grandes, maintenant que les écrans le permettent. De plus, on voit des photos de plus en plus grandes dans les expos, et le nb de pixels des appareils continue à monter.
Je n'ai jamais eu à faire face à un vol de photo, donc ce n'est pas ce problème qui devrait m'arrêter, mais plutôt celui du temps de chargement. Avec une taille max de 1200x800 (comme sur le site de Vincent Munier) il me semble que ça devrait passer.
Je ne crois pas que l'utilisation du Flash dans le site de Vincent permette d'accélérer le chargement des photos. Je suppose plutôt que ce temps de chargement passe inaperçu du fait que la photo en cours reste à l'écran pendant le chargement de la suivante, comme dans tout diaporama.

Charlie82 · Février 17, 2012, 10:45:41

Pourtant après un peu d'apprentissage, quand on a gouté au CSS, c'est un vrai plaisir de l'utiliser... Tu crées toutes les Class que tu veux et les ajoutes où tu veux...
Le site du zéro est assez exlicite sur le sujet, je trouve..
http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web-avec-html5-et-css3.html

JPSA · Février 17, 2012, 11:06:06

Citation de: Krikri le Février 17, 2012, 10:38:09
Pour moi, le plus simple est le mieux, je ne connais pas le Flash. A vrai dire je n'ai pas essayé HTML5 avec CSS3.

J'ai encore du mal avec CSS, même si à force j'ai réussi à l'utiliser un peu. A chaque fois je commets des erreurs de syntaxe qui font que ça ne marche pas et que j'ai du mal à identifier, ce qui prouve que je n'ai pas la bonne doc...

Pour en revenir aux sites de photo, je suis persuadé qu'il faut montrer des photos plus grandes, maintenant que les écrans le permettent. De plus, on voit des photos de plus en plus grandes dans les expos, et le nb de pixels des appareils continue à monter.
Je n'ai jamais eu à faire face à un vol de photo, donc ce n'est pas ce problème qui devrait m'arrêter, mais plutôt celui du temps de chargement. Avec une taille max de 1200x800 (comme sur le site de Vincent Munier) il me semble que ça devrait passer.
Je ne crois pas que l'utilisation du Flash dans le site de Vincent permette d'accélérer le chargement des photos. Je suppose plutôt que ce temps de chargement passe inaperçu du fait que la photo en cours reste à l'écran pendant le chargement de la suivante, comme dans tout diaporama.

On n'est pas obligé d'utiliser du flash pour faire des diaporamas. Le javascript suffit. Par contre, je ne suis pas complètement d'accord avec le redimensionnement des photos. Trop grandes, on perd en définition, trop petites on se retrouve avec des crénelages.

Un diaporama en java avec fondu entre les images, j'en ai un sur mon site. On peut le faire en automatique ou au clic:

ICI

Krikri · Février 18, 2012, 19:40:41

Vous faites bien de me parler de HTML5 avec CSS3. J'ai jeté un coup d'oeil sur les nouveauté de HTML5 et ça me paraît très intéressant. Je les utiliserai à la prochaine refonte de mon site.
Pour le moment, cela me gênerait un peu, car j'ai pris l'habitude de valider mes pages, ce qui n'est pas du tout compatible avec l'utilisation des dernières nouveautés, mais bien pratique.

Charlie82 · Février 18, 2012, 20:02:02

Ca ne t'empêche pas d'utiliser les "nouveautés".... J'ai ajouté quelques effets bords arrondis et ombres sur mon site, sans rien changer d'autre que la page css...

Nikojorj · Février 19, 2012, 14:15:11

Ah ben c'est pas mal ce truc de max et min-width effectivement!

Sinon, y'a du java qui peut faire ça aussi, comme la (vieille) version de Shadowbox que j'ai sur mon site.

Krikri · Février 19, 2012, 21:29:08

Oui, ce sont de bonnes idées. Je vais m'y mettre tranquilement, en intégrant le max de choses modernes.

J'en ai profité pour jeter un coup d'oeil à vos sites, et j'ai retrouvé celui de Charlie47, que j'avais visité il y a plusieurs années, en remarquant que certains de ses thèmes étaient les mêmes que les miens (Sahara, Valensole, Toscane).
Mais le mien est parqué pour cause de problèmes de registrar, donc vous ne pourrez rien voir pour le moment...

Krikri · Février 20, 2012, 15:04:00

Ce n'est quand même pas évident, tout ça:

Bien sûr, quand on une photo à afficher, on connaît sa taille et il est possible de donner des limites dans le css en écrivant, par exemple, ce qui est préconisé plus haut, c'est à dire ceci:
img.imgauto{
width:70%;
min-width:300px;
max-width:1000px;
height:auto;
}

Mais quand on a des photos de tailles diverses à afficher, ce qui est toujours le cas sur un site, on n'arrive pas à adapter le css pour chaque photo. Avec php, j'arrive à calculer ce que je veux et à passer les valeurs dans html, mais pas dans le css...

Krikri · Février 20, 2012, 21:34:14

Oui, bonne idée, erickb.

Je vais continuer à abuser...
Cette fonction CSS width:x% n'a pas son équivalent height:x% qui serait fort utile pour les photos en format portrait? Ou alors c'est mon navigateur?

Krikri · Février 21, 2012, 11:04:23

Oui, merci erickb, j'utilise déja quelques fonctions php, dont getimagesize.

J'ai mal exprimé ce que j'ai constaté

:
Je suis revenu à html et CSS.

J'ai fait varier les dimensions d'une photo en fonction de la taille du navigateur, ça marche avec "width", mais pas avec "height". Dans les détails, et le diable est toujours dans les détails:

1) ça marche avec "width"

Avec la commande html
<body>
<div align="center"><img src="01.jpg" width="70%" /></div>
</body>
comme dans l'exemple de Charlie47

et ça marche aussi avec CSS width:x%, les dimensions de la photo varient si on diminue ou augmente la largeur de la fenêtre du navigateur,

2) Par contre, ça ne marche pas avec "height"

ni avec la commande
<body>
<div align="center"><img src="01.jpg" height="70%" /></div>
</body>
ni avec CSS height:x%. Je m'attendais à ce que les dimensions de la photo varient en fonction de la hauteur de la fenêtre du navigateur. Ce n'est pas le cas. Les dimensions ne varient pas, ni avec la hauteur, ni avec la largeur.

Charlie82 · Février 21, 2012, 11:30:29

J'ai jamais essayé le truc, mais je pense que Height doit adapter les images lorsqu'elle sont positionnées dans un conteneur de taille fixe, genre div, non ??

Krikri · Février 23, 2012, 16:15:41

Ok, merci erickb!

Charlie82 · Février 23, 2012, 21:16:33

Ajoute qu'on peut même mettre deux (voire plusieurs) valeurs dans class... c'est parfois très utile...

Krikri · Mars 07, 2012, 10:33:00

J'ai fait des essais avec php et javascript.

Je pensais pouvoir trouver la solution en partant du fait que le php permet d'avoir la taille de départ de la photo, le javascript me permettant ensuite de calculer son rétrécissement en fonction de la taille de l'écran, comme indiqué par erickb.
Je dis bien "je pensais", car je n'ai pas trouvé comment faire passer mes variables php dans le javascript.

Si non, il me reste maintenant à explorer l'idée de Charlie consistant à fixer la taille du conteneur et voir si Height adapte l'image.

Krikri · Mars 15, 2012, 12:01:00

Bonjour à tous,
J'ai réussi à trouver une solution avec CSS, en adaptant la taille de l'image en fonction de l'écran. J'ai veillé à ce que l'image adaptée ne soit jamais plus grande que l'image d'origine. Ce que je crains, c'est que les photos soient tronquées quand l'écran a des dimensions qui s'éloignent des dimensions les plus courantes (écrans plus hauts que larges).
Merci encore à erickb et à Charlie47.

Pour le moment, j'ai appliqué la modif sur la partie "flore" de mon site.
Merci de dire si les photos apparaissent tronquées sur votre écran!

Charlie82 · Mars 15, 2012, 12:14:21

sur mon 24", en affichage plein format on ne voit pas le bas des verticales (tronqué au niveau de la signature à peu près)...

Krikri · Mars 15, 2012, 12:18:23

Bonjour Charlie,
Ton 24", il fait combien de pixels en hauteur et largeur?

Charlie82 · Mars 15, 2012, 12:43:33

1920 x 1200 c'est un 16/10...

Krikri · Mars 15, 2012, 14:11:13

C'est la même taille que le mien, et je n'ai pas ce soucis...j'utilise IE9 ou Firefox. Je pense que tu dois avoir des bandeaux en haut ou en bas du navigateur, ça prend de la place en hauteur.
Est-ce que ça se produit seulement sur les photos 2, 4, 5 des chardons bleus?

Charlie82 · Mars 15, 2012, 14:18:58

J'ai juste la ligne des favoris en haut et rien en bas...
Sur les "paysage" pas de problème par contre...
Mais, et c'est mon seul point de vue, tu ne résous rien, parce qu'il n'est pas obligatoire que les navigateurs de tes visiteurs soient systématiquement ouverts en plein écran .. C'est d'ailleurs mon cas (et ça m'évite de chopper le torticolis

)

Krikri · Mars 15, 2012, 14:46:02

Là, je ne comprends pas. Tu veux dire que ce problème touche les photos en format "portrait"?

Charlie82 · Mars 15, 2012, 15:08:43

oui, oui, uniquement celles en portrait...
Voila ce que j'obtiens en pleine hauteur

Krikri · Mars 15, 2012, 20:40:44

Merci, tu as bien fait de poster la copie d'écran.

Encore une chose:
Sur mon ordinateur, quand, sur cette photo 1 des chardons, je change la hauteur de la fenêtre avec la souris, la taille de l'image varie.

Avec la photo suivante, la 2 des chardons, qui est en mode paysage, c'est en variant la largeur de la fenêtre que la taille de la photo varie.

Est ce que ça le fait aussi chez toi?

Charlie82 · Mars 15, 2012, 21:21:20

Chez moi avec la photo en portrait aucun changement en modifiant la taille de la fenêtre (quel que soit le sens de la modification)
Avec une photo en paysage, effectivement modification de la taille uniquement si fenêtre modifiées en largeur (Firefox10 ou IE9)

Krikri · Mars 15, 2012, 21:57:35

Ok, oui, tu as raison avec M firefox ça ne marche pas non plus chez moi en vertical, et avec IE9, ça dépend si on clique sur l'icone option de compatibilité, l'icone rectangulaire avec une ligne brisée blanche!
Merci, Charlie47, ça me fait avancer, je vais reprendre ça.

Krikri · Mars 16, 2012, 21:32:09

Voila, j'espère avoir réparé cette erreur: chez moi ça marche avec Firefox. Avec IE aussi, quelle que soit la position du bouton affichage de compatibilité.

Charlie82 · Mars 16, 2012, 21:39:32

Ben ouala

Alors tu as utilisé quoi comme code ? Ca pourra servir à d'autres...
PS: pourquoi pas un petit effet d'ombre derrière tes photos... ? Ca les met bien en valeur

Krikri · Mars 17, 2012, 11:51:29

Pour les ombres, c'est plus facile...

Je ne vais pas donner des leçons et laisser croire que je suis un spécialiste du CSS, bien au contraire.
J'ai juste utilisé le principe donné par erickb dans son dernier exemple :

Citation
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
height:100%;
}
img.a {height:50%;}
img.b {height:30%;}
img.c {height:10%;}
img.d {width:30%;}
img.e {width:15%;}
img.f {width:5%;}
</style>
</head>
<body>
<img class="a" src="imgauto.jpg" />
<img class="b" src="imgauto.jpg" />
<img class="c" src="imgauto.jpg" />

<img class="d" src="imgauto.jpg" />
<img class="e" src="imgauto.jpg" />
<img class="f" src="imgauto.jpg" />
</body>
</html>

J'ai utilisé comme critère le rapport hauteur/largeur de la photo, ce qui permet de présenter des pages avec des configurations différentes. Le CSS comme le html sont configurés par le Php.
Comme je l'ai dit plus haut, je n'ai pas trouvé l'idéal, mais juste un compromis qui va peut être marcher avec certains navigateurs jusqu'à leur prochaine mise à jour...

Krikri · Avril 20, 2012, 10:21:54

Oui, erickb, je peux écrire, mais ce que tu proposes je l'ai essayé et ça ne marche pas non plus chez moi...
Comme tout mon programme est basé sur php, j'ai essayé, mais sans succès, plusieurs solutions préconisées sur la toile pour faire passer les variables de php à javascript et vice-versa.

J'ai fait des essais avec javascript et html, et ça marche très bien. J'arrive à recalculer les nouvelles dimensions de l'image en fonction de la fenêtre. C'est même beaucoup plus efficace que le CSS qui ne permet pas de prendre en compte à la fois de la hauteur et de la largeur de la fenêtre et qui oblige à "bricoler".

Krikri · Avril 21, 2012, 14:27:17

erickb, j'ai fait d'autres essais de passage de variables entre php et javascript et j'en ai déduit que le passage de variable peut se faire seulement dans le sens php > javascript.
Ce qui est logique, puisque php se joue au niveau serveur, avant d'envoyer la page sur le net, le javascript s'exécute ensuite dans l'ordinateur du client.

Voici ce que cela donne:

Citation<?php
// passage de variable de php à javascript
$varphp=18;
echo '$varphp= ' . $varphp;
echo'<script type="text/javascript">var varjscript=' . $varphp .'</script>';
echo '
';
?>
<script type="text/javascript">
document.write('varjscript=' + varjscript );
</script>

grosnoob06 · Mai 02, 2012, 17:41:45

maintenant t'as carrément des sites entiers qui sont dits "responsive" (html5 / CSS3) et qui s'adaptent en entier à ton navigateur et machine, par exemple en portrait ou en paysage sur un ipad et bien en temps réel la page se redimensionne quand tu bascules de l'un à l'autre, sans même rafraîchir la page... c'est pas seulement une image mais toute ta page qui s'adapte... c'est particulièrement valide sur les smartphones et autres iPhone / iPad.

t'as même plein de templates sur le net, qui intègrent déjà ça... pas besoin de se fouler en fait.

un exemple en cours sur lequel je bosse là (bon c'est pas encore rempli parce que je suis sur le backoffice et la base de données là) http://kimmobilier.com/index.php

Flash est quant à lui mort depuis que les smartphones ne l'intègrent plus ou mal, surtout les machines Apple qui ne veulent pas en entendre parler...

vincent3569 · Mai 03, 2012, 15:11:05

oui, les thèmes "responsives" sont à la mode, la faute aux smartphones et aux tablettes.

on en trouve pléthores sur internet pour les différents CMS (en particulier wordpress).
il se trouve justement que j'en ai fait un pour ZenPhoto : voir ce message : http://www.chassimages.com/forum/index.php/topic,153019.0.html.

on trouve aussi plein de frameworks (kit HTML/CSS) permettant de construire assez facilement des galeries au comportement "adaptatifs".
vous pourrez trouver quelques infos sur cet article : http://www.vincentbourganel.fr/news/zenphoto-and-responsive-web-design.