Jump to content

[RESOLU] Taille optimale des images

Kali

By Kali
in Discussion générale

 Share

Recommended Posts

Kali Newbie

Kali

Posted
Posted

Bonjour

J'ai une question toute bête : afin de ne pas avoir de bandes blanches au-dessus où sur les côtés des images, quelle est la taille optimale des images à prendre ?

Je parle du réglage de l'appareil photo, je pense qu'il y a une dimension mini a respecter,
quelle taille doit avoir l'image pour en pas avoir ces bandes blanches ?

38641_cZX1TqWEtLW7KA1BAwhN_t

Link to comment
Share on other sites
Jacques Biais Newbie

Jacques Biais

Posted
Posted

Bonsoir,
La taille des images affichées dans la fiche produit est fixée dans le B.O (Préférence --> images --> Large).

Dans l'idéal il faudrait que toutes les images aient au départ la même dimension: Par exemple 800x600 (c'est 1 exemple).
L'image est ensuite réduite suivant la règle de l'homothétique, c'est à dire que la largeur et la hauteur seront diminuées dans la même proportion pour ne pas déformer l'image:
Une image faisant 800x600px au départ et pour laquelle on souhaite une largeur de 300px aura automatiquement une hauteur de: 225px.

Cela veut dire dans le cas présent qu'il me faudra régler dans le B.O la taille de mes images 'larges' à 300x225px et que si je ne charge que des images de 800x600 (ou une autre dimension mais toujours proportionnelle au format que l'on veut obtenir) on aura une image produit qui s'intégrera parfaitement dans le cadre que l'on aura au préalable défini à ces dimensions:

#primary_block #image-block img#bigpic {
cursor: pointer;
height: 300px;
width: 225px;

Il en est de même pour toutes les autres images( home etc etc)

Cordialement

Link to comment
Share on other sites
sguy Newbie

sguy

Posted
Posted

Donc c'est proportionnel uniquement??
Pas de fonction "crop" possible?
Ou sinon, est-ce qu'il est impossible de faire en en sorte que les large viennent d'un dossier et les medium d'un autre?
Je ne peux pas avoir des large de 500x750 et des medium de 250x250 sans avoir de blanc??

PS c'est surement possible, plein de sites on d'autres photos pour la vue de detail que pour la page de categorie, comme par exemple sur http://www.archiduchesse.com/

Merci

Link to comment
Share on other sites
Jacques Biais Newbie

Jacques Biais

Posted
Posted

Là, je ne sais pas n'ayant jamais cherché à aller plus loin.
Le crop doit se faire au départ et sur l'image même afin qu'ensuite la réduction soit correcte.
Je crois toutefois qu'il est possible de jouer sur une taille bien précise avec toutefois un inconvénient.
Lorsque l'on défini un taille pour la catégorie "home" par exemple, toutes les images entrées adopteront cette dimension.
Mais avant d'entrer une image il est possible au préalable d'affecter à une catégorie une dimension particulière. On peut donc jouer a chaque entrée sur la dimension mais pas sur le cadre de l'image qui restera lui, celui fixé dans le css.
Si au départ le fond de l'image est blanc, pas de soucis, par contre s'il est de couleur on aura à nouveau une bande blanche!
L'inconvénient est que si l'on a besoin de faire un rafraichissement des images elles prendront toutes la taille indiquée à ce moment là dans le B.O.
Ce que je fais personnellement : Je supprime le contour des cadres, je détoure mes images et ensuite peu importe le rapport hauteur largeur il est compensé par une bande blanche qui se confond avec le fond blanc de la page.
Si vous avez un fond de page de couleur, il faudra affecter à l'image le même fond (un très gros travail dans certains cas).

Si d'autres personnes ont des idées à apporter, merci de le faire!

Cordialement

Link to comment
Share on other sites
deltaced Newbie

deltaced

Posted
Posted

salut,
Tu peux mettre les proportions que tu désires ,par exemple sur mon site j'ai du 360 x 202 ...
Dans le back office, tu vas sur "préférence" puis "image", ensuite tu crées un nouveau format que tu nommes comme tu veux, et enfin tu modifies dans les programmes .Par exemple si l'image est à la base nommé "médium" tu mets le nom du format que tu viens de créer.
Tu peux aussi tout simplement modifier le format concerner ...

Link to comment
Share on other sites
Jacques Biais Newbie

Jacques Biais

Posted
Posted

Bien sûr tu peux créer un nouveau format et lui affecter des dimensions particulières, mais cela revient au même car que ton format s'appelle "large" ou "big" il faudra bien sur l'affecter à la page produit:

img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}"

Le résultat sera toujours fonction de la taille de l'image d'origine.
Par contre cette méthode permet d'afficher en page accueil des images "home" à une dimension que l'on souhaite et dans la page des catégories comme ce sont également les "home" qui sont reprises, créer une nouvelle catégorie d'images par exemple "categ" l'affecter dans "product-list" et obtenir ainsi des images de taille différentes de celles de la page d'accueil.

Mais encore une fois l'homothétie jouera à chaque fois.

Link to comment
Share on other sites
sandrasl Newbie

sandrasl

Posted
Posted

vive jacobis !!!
je viens de changer comme vous dites pour l'image produit en changeant large dans preference donc pour la fiche produit plus de marge blanche
par contre comment faire pour faire la meme modification car le doudou dans les produits phare il a toujours ses bandes blanches
http://www.lepalaisdudoudou.com/doudou-et-compagnie/3557-peluche-ours-doudou-et-compagnie-collector-fleur-petales-rose.html

Link to comment
Share on other sites
mamz Newbie

mamz

Posted
Posted

Donc si j'ai bien compris une image rentrée dans un format carré (je les ai toutes rentrées en 600 X 600) restera carrée ? Voilà pourquoi mon image catégorie ne prend pas tout le cadre prévu (donc bandes blanches à droite et à gauche), puisque le format prévu dans le BO est rectangulaire (450 X 150) ?

Link to comment
Share on other sites
Jacques Biais Newbie

Jacques Biais

Posted
Posted

@sandra

Il faut que l'image de ton doudou ait au départ la même taille que les autres. Je ne connais pas l'image mais sur l'original essaie de faire une sélection (à la dimension des autres images ) si cette selection permet de conserver l'essentiel de ton image tu recadres selon ta selection et recharges le resultat sur ton serveur.


@mamz

Oui bien sur et c'est normal, une réduction "prpre" ne peut se faire que proportionnellement sinon je te laisse imaginer le résultat!!! Une image complètement déformée...

Link to comment
Share on other sites
sandrasl Newbie

sandrasl

Posted
Posted

oui jacobis elles avaient toutes la meme taille sauf celles de mes essais d'avant hier donc je suis en train de les reprendre heureusement il y en avait pas beaucoup , je vais avoir un gain de temps pour les prochaines fiches de produits !! frachement un grand merci je suis vraiment contente
ça fait un site beaucoup plus propre comme ça !!!

Link to comment
Share on other sites
Jacques Biais Newbie

Jacques Biais

Posted
Posted

Sandrasl

Une suggestion:
Je trouve tes bloc en page d'accueil un peu haut.
Eventuellement tu peux équilibrer l'ensemble de cette manière:

Pour le texte:

#center_column div.products_block p.product_desc {
color: #595A5E;
height: 6em;

Pour les images:

#center_column div.products_block a.product_image {
background-color: transparent;
display: block;
height: 100px;
margin-bottom: 2px;
margin-left: 2px;
width: 129px


Cordialement

Link to comment
Share on other sites
Jacques Biais Newbie

Jacques Biais

Posted
Posted

Ce n'est pas mon intention!!!!

J'ignore le fonctionnement de Prestabox, mais j'espère que tu as accès au global.css et c'est là que ça se trouve.

Pour le texte: ligne 1005
height: 9em;
Remplacer par:
height: 6em;

Et pour l'image: ligne 1009
Remplacer:
height: 129px;
Par :
height: 100px;

Rien de bien compliqué et si cela te plait moins tu peux facilement revenir aux réglages précédent, mais je pense que tu perds de la place et esthétiquement c'est un peu plus ramassé et me semble mieux!

Cordialement

Link to comment
Share on other sites
Jacques Biais Newbie

Jacques Biais

Posted
Posted

Autant pour moi, j'ai oublié le home_featured.
Si tu as accès à tes modules:

Ouvrir le module home_featured, puis édites le home_featured.tpl.

Vers début du fichier tu trouveras une ligne:

{assign var='liHeight' value=290}


Remplace la valeur que tu as et qui doit être autour de 340 par celle ci-dessus soit 290.
ça devrait coller et au besoin ajuste + ou - pour que le fond gris

  • ne soit plus apparent en fait il doit être limite derniers blocs.
Link to comment
Share on other sites
mamz Newbie

mamz

Posted
Posted

@mamz

Oui bien sur et c’est normal, une réduction “prpre” ne peut se faire que proportionnellement sinon je te laisse imaginer le résultat!!! Une image complètement déformée…


Merci je vois bien, j'avais fait la bêtise déjà avec Photoshop...
Donc pour en revenir à mon problème, il faut que je rentre des images rectangulaires pour mes illustrations de catégories, n'est-ce pas ?

Link to comment
Share on other sites
sandrasl Newbie

sandrasl

Posted
Posted

pas grave jacobis , deja je suis super contente pour les photos , ça fait vraiement bien !!!
je vais continuer quelques temps avec prestabox le temps de m'ameliorer et de maitriser certaines choses je pense ensuite de faire comme les grands lol !
merci encore pour les photos
bonne soirée
cordialement

Link to comment
Share on other sites
Oron Rookie

Oron

Posted
Posted

Bonjour

Pour éviter les bandes blanches quel que soit la dimension, il suffit dans le css d'enlever la couleur de fond du bloc et les traits du cadre.

Par contre je me rappel plus les lignes des éléments ou ID, n'ayant pas pu travailler sur prestashop cause hospitalisation.

Link to comment
Share on other sites
Kali Newbie

Kali

Posted
  • Author
Posted

Je vois que cette question à priori "bête" à suscité beaucoup d'intérêt et à permis à d'autres de résoudre leur petits problèmes .

Un grand merci à tous ceux qui ont répondu.

Ce post va sûrement en intéresser plein d'autres !

Link to comment
Share on other sites
YopixelAE Newbie

YopixelAE

Posted
Posted

Bonjour, et pour être complet question format image voilà de bons ratios à retenir:
Larges images (objets):
1600x1200
((qui conduit à 1250x938; 640x480; 600x450; 500x375; 480x360; 140x105 etc.))
Hautes images (people):
1200x1800
((qui conduit à 720x1080; 600x900; 480x720px; 360x540; 320x480; 150x225, 40x60 etc.))
++

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...