taille de l’ imagette dans une page de catégorie (Créer un compte)

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 16)
  • Auteur
    Messages
  • #499085
    ombres-et-lumieres
    Membre
    Chevalier WordPress
    147 contributions

    Ma configuration WP actuelle???c’ est pas la même chose que ci dessous?
    – Version de WordPress : 3.2
    – Version de PHP/MySQL : celle d’ ovh
    – Thème utilisé : flashxml, puis un enfant à ma sauce
    – Extensions en place : rien de particulier, celles de base
    – Nom de l’hebergeur : ovh
    – Adresse du site : http:www.ombres-et-lumieres.eu et réouvert au public depuis cet après midi. Fonctionnel et tout et tout, du moins en apparence si on ne cherche pas la petite bête

    Problème(s) rencontré(s) : taille des imagettes

    (j’ aime ce terme_page de catégorie_ et je sens que je vais l’ utiliser à tour de bras)

    Autre question:

    D’ après mes connaissance, une imagette peut être dimensionnée de trois façons: lors du téléchargement sur la page d’ admin « media »(a), dans le fichier fonction.php (b) et au niveau du css (c)

    (a) en fait cette page provoque la création de deux images que je trouve surnuméraires, mais pour une fois bête et discipliné, je l’ utilise.

    (b)voici le code trouvé avec mon template:

    if ( function_exists( ‘add_theme_support’ ) ) {
    	add_theme_support( ‘post-thumbnails’ );
            set_post_thumbnail_size( 150, 150 ); // default Post Thumbnail dimensions   
    }
    
    if ( function_exists( ‘add_image_size’ ) ) { 
    	add_image_size( ‘category-thumb’, 300, 300 ); //300 pixels wide (and unlimited height)
    	add_image_size( ‘homepage-thumb’, 200, 200 );//(cropped)
    	set_post_thumbnail_size( 150, 150 ); //nouvelle taille de thumnbail

    Je me suis amusé à faire es modifications de taille, mais aucun changement notable dans la taille à l’ écran.

    (c) le css dont voici le code, pour la balise: .one_post a.img img
    float:left;
    height:auto !important;
    margin-right:30px;
    width: 125px;
    height:100px;

    lié au php:

    <div class="one_post">
    				
    					<a href="<?php the_permalink() ?> » rel= »bookmark » title= »Permanent Link to <?php the_title_attribute(); ?> » class= »img »>
    					<?php the_post_thumbnail( array(150,150)); ?>
    					</a>
    					
                        <div class="texte">
    						<h2><a href="<?php the_permalink() ?>« ><?php the_title(); ?></a></h2>
    						<div class="by">
    							<b>By <?php the_author_posts_link(); ?></b> | Published <?php the_time('F j, Y') ?>
    						</div>
    						<div class="post_text">
    							<?php the_excerpt(); ?>
                              </div>
    						
    					
    						<div class="barre_blanche">
    							<span class="comm_nr"><?php comments_popup_link('No Comments', '<b>1</b> Comment ‘, ‘<b>%</b> Comments’); ?></span>
    							<a href='<?php the_permalink() ?>‘ class= »read_more »></a>
    						</div>
                        </div>

    Si je modifie les dimensions dans le css (width), la taille des images changent. Mais en écrivant ceci, je me rends compte avoir oublier de tester la séquence « the_post_thumbnail( array(150,150)).

    Je suppose que vous aurez remarqué que mes valeurs sont toujours « carrées »: j’ espérais ainsi obtenir des imagettes circonscrites dans un carré et gardant leurs formes d’ origine.
    A mon plus grand déplaisir, il n’ en est rien. Et imposer une valeur « height » dans le css, ne change rien à l’ affaire.

    En conclusion, quelqu’ un aurait-il une solution?
    L’ idée est la suivante: quelle quels forme de l’ imagette (verticale, horizontale ou carrée, elle doit s’ inscrire dans un CERCLE définit de rayon disons de 150px

    PS: j’ ai essayé d’ être un bon petit forhumeur, mais vos balises de code n’ ont pas l’ air d’ aimer le css à leur juste valeur

    #790224
    Guy
    Participant
    Maître WordPress
    14817 contributions

    hehe un petit exercice de géométrie 🙂

    Pour calculer la taille du carré inscrit dans un cercle, on en déduit que la diagonale du carré est égale au diamètre du cercle (donc ici 300px), quand on a la diagonale, le théorème de Pythagore nous donne la longueur d’un coté.
    x² + x² = 300²
    x² = 45000
    x = √45000
    x= 212
    le carré doit avoir 212px pour un rayon de cercle de 150px.

    Pour inscrire un rectangle et en connaitre les dimensions, il faut en connaitre au préalable une des dimensions ou le rapport entre les deux dimensions, et faire le même calcul.

    ombres-et-lumieres wrote:
    Je suppose que vous aurez remarqué que mes valeurs sont toujours « carrées »: j’ espérais ainsi obtenir des imagettes circonscrites dans un carré et gardant leurs formes d’ origine.
    A mon plus grand déplaisir, il n’ en est rien.

    Quand tu dis, à mon grand déplaisir il n’en est rien, quel est donc le résultat obtenu?

    #790225
    ombres-et-lumieres
    Membre
    Chevalier WordPress
    147 contributions

    Si tu vas voir sur http://www.ombres-et-lumieres.eu/blog, tu verras que les horizontales sont plus petites que les verticales.

    En fait le mot « circonscrite » est erroné, il faudrait lire « inscrite ».
    Dans un de mes premiers sites, j’ avais créé des « div » carrées de 150x150px et donc les imagettes venaient s’ y inscrire sans problème et leur importance visuelle restaient les mêmes.

    Si je reprends la même idée ici:
    width: 150px
    height:150px

    dans le css, je remarque que seule l’ instruction « width » fait varier la taille de mon imagette si je modifie sa valeur, tandis que l’ instruction « height », n’ est là que pour faire joli, j’ aurais très bien pu ne pas la mettre. Alors que normalement elle devrait limiter la hauteur et donc faire en sorte que les verticales et les horizontales aient la même surface. J’ ai donc le choix de « width:150 » et du coup mes verticales sont trop grandes et floues ou « width:100 » et alors ce sont les horizontales qui deviennent illisibles car trop petites.

    Et pour conclure, je dirais que dans mon dossier dossier d’ images j’ ai des imagettes de 100×150 ou 150x100px car, dans le backend, onglet réglages-médias, j’ ai indiqué pour valeur des imagettes 150x150px, sans cocher la case « aller de suite en prison sans passer par la case départ »😉😇, ou plutôt  » Recadrer les images pour parvenir aux dimensions exactes (normalement, les miniatures sont proportionnées) »

    Et merci d’ avoir ajouté un euro dans la sébile de Pythagore. A une époque il a du toucher un max de droits d’ auteur, mais, de nos jours, je crains qu’ il ne sombre petit à petit dans l’ oubli et donc la misère. Grandeur et décadence.

    #790226
    Guy
    Participant
    Maître WordPress
    14817 contributions

    je vais aller voir sur le site, par contre en regardant ton style css, je vois height défini deux fois, dont un auto!important, est ce bien raisonnable?

    #790227
    Guy
    Participant
    Maître WordPress
    14817 contributions

    effectivement, le height:auto !important était la cause de la non prise en compte de la hauteur de l’image, il suffit de le supprimer.

    #790228
    ombres-et-lumieres
    Membre
    Chevalier WordPress
    147 contributions

    je viens mon premier texte et je me rends compte que si les données du problème était juste, la question était mal posée.

    Cela aurait du être quelles seraient les instructions à mettre en place pour que mes imagettes aient la même surface et donc la même importance visuelle.

    Mea culpa, mea maxima culpa, hora tarde estava

    #790229
    Guy
    Participant
    Maître WordPress
    14817 contributions

    est ce résolu en supprimant le height: auto !important?

    #790230
    Lumiere de Lune
    Participant
    Maître WordPress
    20344 contributions

    Pour les vignettes, le recadrage se fait avec la propriété true

    set_post_thumbnail_size( 150, 150, true ); //nouvelle taille de thumnbail

    Sinon les dimensions sont comprises comme des dimensions maximum
    Et la modification dans le fichier functions.php ne change pas les vignettes existantes, il faut utiliser un plugin comme regenerate thumbnail

    #790231
    ombres-et-lumieres
    Membre
    Chevalier WordPress
    147 contributions

    parfois je suis distrait et j’ en oublie quelques détails. Donc merci pour le « !important », mais ce n’ était pas cela, quoi que logique.

    Par contre, si vas en home page, tu trouveras des imagettes dimensionnées correctement, avec le même code à un détail près: elles ne sont pas cliquables donc pas incluses dans une balise , ce qui change peut-être tout.
    Je n’ ai pas le temps de vérifier maintenant, je pars « faire des photos » ou, plus professionnel: « je serai sur un shopping c’t aprè’m »


    @lumi
    ère de lune: si la suppression du lien ne marche pas, je regarderai dans le codex pour la fonction citée, et même si cela marche, je suis curieux.

    #790232
    Guy
    Participant
    Maître WordPress
    14817 contributions

    je ne voudrai pas paraitre têtu mais le height:auto !important supplée la hauteur définie (en plus du fait qu’une largeur et hauteur soit déjà indiquée dans la balise img elle-même)

    Dans ton blog, .one_post a.img img est définie dans le fichier style.css placé dans wp-content/themes/ombres-et-lumieres/style.css et dans wp-content/themes/egon/style.css.

    pourquoi deux fichiers de styles issus de deux thèmes différents?

    D’autre part, personnellement, je ne suis pas fan ni convaincu par les recadrages automatiques de WordPress, cela respecte les proportions ce qui est déjà beaucoup mais je préfère « nourrir » la bête en ne lui laissant que la possibilité d’agrandir/rétrécir. En tant que photographe tu peux comprendre l’importance du cadrage, et un œil exercé fera toujours mieux qu’un logiciel qui prendra une part médiane de l’image pour l’adapter aux dimensions d’une miniature sans en avoir compris la signification.

    #790233
    ombres-et-lumieres
    Membre
    Chevalier WordPress
    147 contributions

    Tu ne paraîs pas têtu, puisque tu en sais plus que moi sur le sujet, mais juste sûr de toi.
    Je suis bien d’ accord que j’ aurais du enlever l’ instruction « height:auto !important » au moment où j’ ai ajouté une hauteur définie. Je l’ ai donc fait, mais cela n’ a rien changé.
    J’ ai fini par retirer le lien sur l’ image et cela c’ est comme par miracle mis en place comme je le voulais, en créant une classe « thumbnail ».
    Je ferai plus tard des essais pour comprendre pourquoi les comportements ne sont pas les mêmes, avec ou sans lien sur le thumbnail.

    Si par recadrage automatique, tu entends « recoupage de l’ image », je suis entièrement d’ accord avec toi. Dans ce cas, je préfère le faire « à la main », pour préserver le sens de l’ image.
    Mais si il s’ agit d’ un recardrage proportionnel, c’ est à dire un simple changement d’ échelle, je n’ ai rien contre l’ automatisme, sauf si on parle impression papier, car cette opération dégrade malgré tout l’ image.

    Par contre, ce qui m’ intrigue, c’ est lorsque tu dis préférer « nourrir la bête ». Comment fais-tu? Car si tu passes par l’ uploader de worpress, il te fabriquera automatiquement des images à différentes échelles. Ou, si tu les upload via ftp, elles ne seront pas référencées dans la base de donnée. et seront invisibles lorsque tu voudras ajouter une photo dans un article ou une page.

    Dans mon blog, le css, tout comme d’ autres fichiers, proviennent de deux sources. Je travaille avec le système parent/enfant.
    En ce qui concerne le css, si j’ ai bien compris le système, en créant une nouvelle feuille de style, j’ « efface » la précédente, celle du thème parent. Et peut donc recréer ma propre mise en page à partir d’ une feuille vierge. Mais, si je veux conserver tout ou partie de l’ ancienne, je dois commencer par l’ appeler au début de la nouvelle. Et ensuite écrire les nouvelles propriétés.
    Dans certains cas, j’ ai franchement modifié les balises de style dans les fichiers php et les ai donc définie dans la nouvelle feuille. Dans d’ autres, j’ ai conservé les anciennes avec leurs propriétés. Et enfin, lorsque’ il ne fallait modifier que peu de choses, j’ ai conservé les anciennes balises mais en redéfinissant leurs propriétés dans la nouvelle feuille. Normalement, cette manière de faire devrait effacer et l’ ancienne définition et la remplacer par la nouvelle. Non? :fouet:
    Ma manière de faire n’ est peut-être pas très orthodoxe. non? oui? aie! :fouet:

    :rolleyes:


    @Lumiere
    de Lune:
    Je suppose que la fonction set_post_thumbnail_size n’ est prise en compte que dans l’ interface d’ administration, lors du téléchargement des photos?

    #790234
    Guy
    Participant
    Maître WordPress
    14817 contributions

    D’accord, la structure parent/enfant des thèmes explique la présence de deux fichiers styles.css.

    Si tu vas regarder dans le fichier style.css du parent, tu pourras voir un style concernant les images

    .one_post a.img img{width:300px;float:left;border:none;height:auto !important;margin-right:30px;}

    Tu remarques que le height:auto !important y est toujours présent et prendra la précédence si la hauteur est supprimée du thème enfant. Ce style s’appliquant uniquement aux images dans la balise tu as l’explication de ton interrogation quand à la suppression du lien sur une image.

    De plus, si le résultat actuel correspond à ce que tu voulais, c’est à dire une hauteur ou largeur max de 150px en gardant le caractère rectangulaire des images, toutes les explications précédentes sont caduques. A mon avis la succession de miniatures horizontales et verticales nuit à l’esthétique de la page d’accueil, mais ce n’est qu’un avis totalement subjectif.

    #790235
    ombres-et-lumieres
    Membre
    Chevalier WordPress
    147 contributions

    Point de vue technique: si je réécris dans le thème enfant les propriétés de la balise « .one_post a.img img », le problème devrait donc disparaître. J’ essaierai, mais ce ne sera pas avant la fin de semaine, je vais devoir consacrer un peu de temps à la photo.
    J’ avoue avoir un peu perdu de vue la corrélation thème parent-thème enfant et les influences de l’ un sur l’ autre.
    Dans le cas présent, la feuille de style du thème parent est assez longue et définit de nombreuses choses, raison pour laquelle je n’ y ai modifié que ce que je croyais n’ être que le strict nécessaire.

    Point de vue esthétique: j’ ai le choix entre trois options, quelle que soit la page: imagette carrée, imagettes avec toutes la même largeur mais occupant des surfaces différentes, ou imagettes ayant la même importance visuelle car occupant la même surface. J’ aurais tendance à opter pour cette dernière solution, mais comme je dois voir prochainement les graphistes qui pilotent le travail, ce sera un des sujets de discussion.

    #790236
    Guy
    Participant
    Maître WordPress
    14817 contributions

    – Point de vue technique: l’intérêt du thème enfant est de dissocier les modifications de l’original, si tu touches au thème parent, il y a un petit souci de méthode.

    – Point de vue esthétique: La surface (au sens géométrique) n’est pas une notion esthétique, d’une part l’œil peut être facilement trompé par des choix judicieux de formes et/ou couleurs, d’autre part je ne pense pas que le visiteur fera de lui-même la relation entre hauteur/largeur d’une image et se dira: « oh, merveilleux, le maximum vertical de cette image est égal au maximum horizontal de celle la ». Par contre il verra deux images verticales, puis une horizontale, suivie de 3 images verticales, etc…. A voir avec les graphistes 🙂

    #790237
    ombres-et-lumieres
    Membre
    Chevalier WordPress
    147 contributions

    je ne vais pas toucher au thème parent, du moins directement. Je pensais faire pour cette balise, ce que j’ ai fait pour d’ autres: réécrire ses propriétés dans la feuille de style du thème enfant. Autre option: carrément renommer mes balises dans le fichier php et ainsi en avoir de nouvelles n’ ayant rien à voir avec celles du thème parent. Quelle est la meilleure méthode?

    C’ est bien la raison pour laquelle je travaille avec des graphistes lorsque je sors du domaine photographique: mon style photo est assez sobre, mais lorsque je m’ aventure du côté « dessin » j’ ai une tendance très nette à faire « kitsch », version moderne du gothique flamboyant. 😆 😋

15 sujets de 1 à 15 (sur un total de 16)
  • Le forum ‘Utilisation spécifique de WordPress’ est fermé à de nouveaux sujets et réponses.