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

Démarré par Krikri, Février 15, 2012, 17:24:09

« précédent - suivant »
Imprimer
En bas Pages1 2 Toutes
Actions 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

#1
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! :D

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

#2
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

#3
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

#4
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

#5
Février 16, 2012, 07:50:51 Dernière édition: Février 16, 2012, 08:02:37 par Emix
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

#6
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

#7
Février 16, 2012, 16:53:36 Dernière édition: Février 16, 2012, 17:00:45 par Charlie47
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

#8
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

#9
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

#10
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

#11
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

#12
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

#13
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

#14
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

#15
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

#16
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

#17
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

#18
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

#19
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

#20
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

#21
Février 21, 2012, 11:04:23
Oui, merci erickb, j'utilise déja quelques fonctions php, dont getimagesize.  8)

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"  :o
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

#22
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

#23
Février 23, 2012, 16:15:41
Ok, merci erickb!

Charlie82

#24
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...
Imprimer
En haut Pages1 2 Toutes
Actions de l'utilisateur