Question CSS

Hello !

Je customize mon wordpress depuis quelques jours et là je bloque sur un truc : j’aimerais que dans mes articles, les images ne prennent pas le max-width de “p” pour qu’elles soient plus larges que le texte mais le problème c’est que dans Wordpress je ne peux pas dire qu’une image est juste une image, elle semble forcément être dans un “p”, ou un titre “h1, h2…”

Vous pouvez tester sur

Si je modifie le max-width de l’image, elle sera décalée vers la droite étant donné qu’elle se trouve DANS le paragraphe…

Je sens que c’est incompréhensible donc je vais montrer en image ce que j’aimerais :

AVANT

APRÈS

(avec le texte de la même largeur que sur l’image d’avant)

please help me :smile:

Salut Victor,
Ça dépend grandement de l’éditeur de contenu que tu utilises. La bonne solution est effectivement de placer les images dans le contenu sans wrapper (<p> ou <h2>).

Si dans ton éditeur tu vois le <p> (disons) qui contient une image, change-le pour ça: <p style="max-width: 1000px;">.

Tiens-nous au courant!

Bonjour

Est-ce que vous travaillez avec un Child theme ? Si tel est le cas, vous pouvez optimiser le CSS comme vous le voulez.

Si vous ne travaillez pas avec un Child, je vous recommande vivement de vous en procurer un. Par la suite, il vous sera plus facile de travailler avec ces images.

Oui mais je ne veux pas le faire image par image ^^

Bah oui je customize avec un child theme… ^^’

C’est pas tout le monde qui fait ça mais j’avais mal lu “customize mon wordpress”.

J’ai vu des gens essayé de modifier directement le thème. C’est rendu une question normale pour moi :slight_smile: Désolé

1 « J'aime »

Tu peux essayer dans ton CSS:

@media (min-width: 960px){
    .post-content .row-container p img{
        max-width: 1000px;
        margin-left: -200px;
    }
}

Ça devrait donner ça:

En même temps, tu pourras confirmer si j’ai bien compris.

Si ça fonctionne, il suffit de modifier le 1000px et le -200px. Ce n’est pas la solution la plus propre, mais je veux t’aider, pas t’écoeurer avec des caprices de programmeur. :slight_smile:

1 « J'aime »

Nice ! Ça fonctionne !
Y a juste que lorsque l’image n’est pas aussi large que 1000px, elle est collée à gauche :confused:

Tu as raison. Tu peux m’envoyer une page qui contient une image plus petite, mais je ne crois pas que tu puisses contourner le vrai problème sans faire des sacrifices. :expressionless:

La même que dans mon premier post (j’ai modifié la taille des images)

La piste du CSS pur vient de s’éteindre. Tu peux contourner le problème en JavaScript/jQuery, mais rendu là tu es peut-être mieux de régler le problème à la source. La dernière fois qu’on a vu un éditeur de contenu qui faisait ça, c’était une simple ligne dans le functions.php du child theme que nous avons du ajouter.

Je contacterais le développeur, ils auront la solution la plus propre/simple.

Si tu es à l’aise en jQuery, je pourrai te donner une piste. Il reste que sans avoir accès à la programmation de ton site Web, nous sommes limités. :smile_cat:

Pour les développeurs du thème, cela revient à une customisation donc ce n’est pas de leur ressort :confused:
Je ne vois pas quelle ligne en php pourrait modifier cela ? Ça modifierait quoi en fait ?

C’est dans la programmation (fichiers PHP) de l’outil d’édition de contenu que tu utilises. Ça commence à être pas mal technique, mais c’est fort probablement un filter/action WordPress qui wrap le contenu.
https://codex.wordpress.org/Plugin_API/Filter_Reference
https://codex.wordpress.org/Plugin_API/Action_Reference

C’est habituellement une option que le développeur met en place, mais qui se modifie à l’aide d’une ligne de code dans la personnalisation de ton child theme (functions.php). Est-ce que les développeurs de l’outil que tu utilises ont une documentation? Si tu as acheté le thème, ça vient habituellement avec un 6 mois de soutien technique, je suis convaincu qu’ils t’assisteraient minimalement.

La solution est de “dé-wrapper” tes images de tes tags <p>

Tu peux essayer le code ici:

function filter_ptags_on_images($content)
{
    return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_images');

Tiré de cette discussion:

Ensuite, tu vas pouvoir faire une règle CSS pour avoir des images pleine largeur!

3 « J'aime »

Alleluia ! It works !
Merci :slight_smile: (Vincent aussi)

1 « J'aime »

C’est clean pour ton contexte en plus! Well done Olivier.

2 « J'aime »