Comment aligner les photos avec le texte

Bonjour, j’essai d’aligner les photos avec mon texte et je n’y arrive pas car je ne connais pas la largeur exacte de mon texte. J’ai trouvé un code CSS suite à une recherche Internet mais j’hésites à l’utiliser car je ne veux pas créer un problème supplémentaire. Quelqu’un peux m’expliquer la marche à suivre?

Habituellement, les outils WordPress te permettent d’aligner toi-même tes images sans toucher au code. Il s’agit de quelle image sur ton site? Peux-tu nous envoyer une capture d’écran avec l’URL stp?

Hello,

Si tu arrives à devoir utiliser le CSS pour faire ça, utilise plutôt la propriété “display: flex;” sur le parent des éléments à aligner.

Cela te permet de les aligner avec une seule ligne de CSS sans avoir à préciser de valeur fixe (tes éléments deviennent “flexibles”).

Tous les articles que j’ai publié jusqu’à maintenant, je n’ai pas réussi à aligner mes photos avec mon texte. Je veux que mes photos s’alignent d’un côté comme de l’autre. L’espace restant est plus grand sur un ordinateur que sur cette capture d’écran fait à partir de mon ipad ou cellulaire. J’ai essayé un autre code CSS et ça ne change rien. Je ne vois aucun règlage avec wordpress mise à part le redimensionnage et j’ignore quelle est la largeur de mon texte. Merci pour le coup de main :grin: Ça me gêne un peu mes questions de débutante mais La Tranchée est ma seule ressource. Merci encore!

https://vertvoyage.com/yellowknife-62e-parallele-nord/

Je ne comprend pas… C’est correct ici. Tu as réglé ton problème?

L’espace en beige est égal au texte (j’imagine que cet espace c’est lorsque tu sélectionnes la photo???). J’aimerais que la photo s’aligne avec le texte. J’avais inséré le code CSS tel que dans la pièce jointe mais je l’ai supprimé car je n’ai pas vu de différence. J’sais plus trop quoi en penser et quoi faire. Je peux avoir des conseils ou suggestions? Merci énormément…

Ok tu veux dire que tu veux que tes images s’étirent pour remplir tout l’espace horizontale?

Tu veux leur donner une largeur maximale, pas de problème. Mais il ne faut pas les étirer parce que ça va poser problème lorsque tu mets de petites images.

Tes images ne prennent pas tout l’espace simplement parce qu’elles ont 640px de large et que ta colonne de texte en a 825px.

Je suppose que ton WordPress redimensionne tes images lorsque tu les insère!

Va dans “Réglage > Médias” et modifie les tailles de tes images:

Met “grande taille” à 825px de large.

Tu peux ensuite choisir la taille lorsque tu insères ton image:

Ok super ça répond à ma question. Le chiffre magique 825 pixels. J’ai tellement à apprendre encore. Mais dis-moi Olivier, comment on fait pour trouver la largeur de son texte en pixels? Ce que j’aimerais et qui me ferais gagner du temps, c’est d’avoir une uniformité dans la mise en page de mes articles. Peut-être aussi que ce n’est pas une bonne idée … ça peut être contraignant. Merci :blush: :grin:

J’utilise l’inspecteur de code!

Ensuites tu cliques sur cet icône pour te permettre de choisir l’élément à inspecter avec ta souris:

1 « J'aime »

Bon, j’ai fini par avoir le temps de suivre le chemin que tu m’as suggéré et ça ne fonctionne pas. J’ai fait la modification dans réglages et médias (825px de large) pour que mes photos soient égales à mon texte. J’ai même essayé manuellement sur chaque photo et sans résultats. Je me demande si j’ai peut-être un plugin qui vient contrôler ces paramètres??? Est-ce possible ça? Car là, je ne peux rien changer :frowning:

C’est parce que tes images ont déjà été uploadé sur ton site et modifié pour apparaître dans ce format.

Je te recommande ce plugin pour regénérer tes images!

Et quant à faire, tu pourrais payer 5$ et les optimiser via

EWWW Image Optimizer fonctionne bien mais Force Regenerate Thumbnails ça ne fait rien. En installant le Plugin, il avait une mention que ce Plugin n’avait pas été testé sur cette version de Wordpress. Ce n’est pas la première fois que j’installe des plugins avec ce message et ça ne fonctionne pas tout le temps. Alors, j’ai réussi à optimiser mes photos mais pas les redimensionner aligné avec la largeur de mon texte (825px). En inspectant un de mes articles, j’ai vu que les photos sont à 825 px. Alors je me demande si mon texte a bien 825 px de large? Je ne vois pas largeur de mon texte en inspectant? Câline c’est bien compliqué d’avoir mes photos égales à mon texte :neutral_face: Je suis vraiment désolé de toujours revenir avec ce problème…

Pour Force Regenerate Thumbnails, tu dois aller ici:

image

Et faire ça:

Est-ce que tu as la même interface que moi?


Pour

<img data-attachment-id="547" data-permalink="https://vertvoyage.com/yellowknife-62e-parallele-nord/img_5137/" data-orig-file="https://i0.wp.com/vertvoyage.com/wp-content/uploads/2018/04/IMG_5137-e1523315854824.jpg?fit=1024%2C768&amp;ssl=1" data-orig-size="1024,768" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;2.2&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;iPhone 6&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1488487371&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;4.15&quot;,&quot;iso&quot;:&quot;32&quot;,&quot;shutter_speed&quot;:&quot;0.033333333333333&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="Aéroport de Yellowknife" data-image-description="" data-medium-file="https://i0.wp.com/vertvoyage.com/wp-content/uploads/2018/04/IMG_5137-e1523315854824.jpg?fit=300%2C225&amp;ssl=1" data-large-file="https://i0.wp.com/vertvoyage.com/wp-content/uploads/2018/04/IMG_5137-e1523315854824.jpg?fit=640%2C480&amp;ssl=1" class="size-full wp-image-547" src="https://i1.wp.com/vertvoyage.com/wp-content/uploads/2018/04/IMG_5137.jpg?zoom=1.5&amp;resize=640%2C480&amp;ssl=1" alt="" width="640" height="480" srcset="https://i1.wp.com/vertvoyage.com/wp-content/uploads/2018/04/IMG_5137.jpg?zoom=1.5&amp;resize=640%2C480&amp;ssl=1" src-orig="https://i1.wp.com/vertvoyage.com/wp-content/uploads/2018/04/IMG_5137.jpg?resize=640%2C480&amp;ssl=1" scale="1.5"> 

Je vois 2 choses qui explique la taille de tes images. Premièrement, la source de ton image est https://i1.wp.com/vertvoyage.com/wp-content/uploads/2018/04/IMG_5137.jpg?resize=640%2C480&amp;ssl=1

On peut voir “resize=640*480” dans la source de ton image. As-tu jetpack d’installé? C’est comme si tes images étaient hébergés sur le cloud de WordPress et redimensionné par un script!

Autre chose, on peut voir que ton image possède les paramètres width="640" height="480".

Essaie de retirer ton image et de la remettre?

Je suis en processus avec Force Regenerate Thumbnails. Reste à voir le résultat mais il me semble que j’avais fait cette étape. J’ai les mêmes interfaces que toi. Oui j’ai Jetpack. J’ai remarqué hier que j’insère mes images dans le format original qui est toujours beaucoup trop grand et mes photos s’ajustent seules au format que tu as inscrit. J’ai l’impression que c’est ce que tu dis, un script qui décide à ma place :stuck_out_tongue_winking_eye: Je vais fouiller à l’instant sur Jetpack desfois que je verrais quelque chose. Merci pour tes précieux conseils encore une fois. J’espère bien y arriver bientôt pour passer à autre chose.

J’ai aussi essayé de modifier le format de photos sans les retirer, sans résultats.

.

“As-tu jetpack d’installé? C’est comme si tes images étaient hébergés sur le cloud de WordPress et redimensionné par un script!”

Est-ce que ça peut être ça qui est en cause???

J’ai décoché cette option Jetpack et ça semble être correct. :sweat_smile::sweat_smile::sweat_smile: Je fais quelques vérifications. En espérant avoir résolu mon problème. Merci, merci, merci :grin:

Voilà! ^^

Perso, quand j’ai utilisé JetPack pour livrer mes images, mon temps de chargement était horrible! C’est drôle, sur ton site, c’était quand même très rapide!

En tout cas, avec EWWW image optimizer, tes images devraient être super rapides aussi :slight_smile:

J’ai juste un petit problème de mon côté, dans mon dernier article j’ai une photo d’un singe capucin, Parc National Cahuita qui n’apparaîssent plus??? Aussi dans mon article Voyager autrement, aucune photos s’affichent??? J’en découvre d’autres qui ne s’affichent plus? Et certaines photos sont lentes de mon côté? :neutral_face:

De mon côté je vois ton singe! (je parle de lui: Sapajou capucin. Crédit photo : De McKerrell Photography)

Essaie de faire un hard refresh (CTRL +5)

J’ai essayé le crtl+5 et il ne se passait rien. J’ai donc supprimé manuellement chacune des photos et je les ai réinséré et tout semble ok :sweat_smile: Je dois par contre insérer mes photos dans leur taille originale car même si j’ai changé le réglage des médias (format grand à max 825px) je ne peux pas choisir cette option car elle est toujours dans l’ancien format. On dirait un bug? Voici des captures pour expliquer ce que je dis. Aye aye aye… toute une histoire le réglage de ces photos. Vous êtes pas mal d’adon monsieur Lambert :wink: Même le samedi soir :grin: