web-dev-qa-db-fra.com

désactiver WP les sauts de ligne insérés automatiquement après une image

J'ai défini une taille personnalisée pour les images de taille moyenne, ce qui devrait permettre aux deux images de s'aligner horizontalement dans la publication. (La largeur totale du message est de 880 pixels, les images moyennes sont réglées sur 413 pixels.)

Mon défi est que les images ne sont pas alignées uniformément - l'image de droite est toujours un peu plus basse SAUF s'il existe un autre groupe d'images moyennes immédiatement en dessous, auquel cas ce deuxième groupe sera aligné de manière égale.

Je pense que cela peut avoir quelque chose à voir avec WP en insérant automatiquement des sauts de ligne après une image, mais les quelques façons pour lesquelles j'ai essayé de le désactiver n'ont pas abouti.

Ce que j'ai mis dans le post:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

Ce qui est lu par le navigateur:

<p><img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /><br />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" /><br />

Tentatives (infructueuses) - 1 Comment désactiver les sauts de ligne après les images? 2 Pourquoi Wordpress ajoute-t-il un saut de ligne après mon image flottante?

Lien du site.

enter image description here

postsfunctionsimagesformattingline-breaks
5
user1255049

Si c'est à quoi ça ressemble:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

Ensuite, vous devez les mettre ensemble comme ceci:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /><img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

Parce que si vous faites cela ( wpautop ):

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

function wpse_wpautop_nobr( $content ) {
    return wpautop( $content, false );
}

add_filter( 'the_content', 'wpse_wpautop_nobr' );
add_filter( 'the_excerpt', 'wpse_wpautop_nobr' );

vous allez probablement casser tout ce que vous avez écrit, ça ne vaut pas la peine.

7
jocken

La solution rapide consiste à envelopper vos balises image dans des balises div. Cela empêchera WP d'envelopper les images dans P balises. Ensuite, vous pourriez donner aux divs une classe pour un contrôle supplémentaire de l'apparence/de l'arrangement.

4
Ray Gulick

Nous ne pouvons pas accrocher la fonction wpautop(). Parce qu'alors il va couper tout le paragraphe et casser les balises du contenu.

Après avoir inséré l'image dans l'éditeur, cliquez simplement sur l'onglet " Texte " dans le coin supérieur droit de l'éditeur et supprimez les étiquettes de paragraphe et de séparation qui se trouvent entre les images.

Pour plus d'options (comme l'alignement et d'autres attributs), cliquez sur l'image, puis réglez-la en conséquence avec les options " Paramètres avancés "

1
TBI Infotech

Vous avez raison de dire que ce sont les balises <br> , mais il existe une alternative:

placez chaque image dans son propre paragraphe, pas les lignes adjacentes

Voici comment fonctionne le saut de ligne dans le contenu WordPress:

Les paragraphes

This is paragraph 1

This is paragraph 2

Pauses courtes lignes

This is paragraph 1
This is also paragraph 1 but on a new line without a space

Donc, n'utilisez pas de courtes pauses, utilisez des paragraphes complets. Par exemple, si vous les mettez chacun sur leur propre ligne, enveloppés dans une balise de paragraphe, cela fonctionne.

Donc au lieu de:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

Faire:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />

<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />

Maintenant, chaque image est encapsulée dans une balise de paragraphe, ce qui vous donne cette sortie:

Résultant en ceci:

holy moly, the alignment issue has vanished

Si vous vous sentez aventureux, vous pouvez supprimer complètement les balises p autour des images (sur l'interface), mais je vous déconseille de le faire sur votre site. Ouvrez une autre question si vous êtes curieux de savoir comment faire cela.

1
Tom J Nowell

En supposant que le problème soit la balise <br> (ce qui, à mon avis, est correct), et que l'un de vos commentaires indique que vous ne souhaitez pas modifier les publications, vous pouvez utiliser le filtre the_content pour rechercher des occurrences de deux images séparées uniquement par une nouvelle ligne (remplacée par une balise <br> faisant partie de la fonction wpautop() de WordPress) et supprimez la nouvelle ligne:

add_filter( 'the_content', 'gowp_152091' );
function gowp_152091( $content ) {
  preg_replace( "/(<img.*?size-medium.*?>)\n(<img.*?size-medium.*?>)/", "$1$2", $content );
  return $content;
}

Références:

the_content

Fonction: preg_replace

0
karpstrucking

Supprimez l’étiquette de saut de ligne entre vos images.

Exemple:

<img src="" alt="" /> <br/> <img src="" alt="" />
0
René Skou

La fonction wpautop() ajoute des balises <p> et <br> à votre contenu afin de préserver les sauts de ligne. Si vous préférez ajouter ces balises vous-même, vous pouvez supprimer les filtres qui appliquent cette fonction au contenu du message:

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );


remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

function wpse_wpautop_nobr( $content ) {
    return wpautop( $content, false );
}

add_filter( 'the_content', 'wpse_wpautop_nobr' );
add_filter( 'the_excerpt', 'wpse_wpautop_nobr' );
0
TBI Infotech

Vous pouvez essayer d’utiliser jQuery pour les supprimer pour vous:

jQuery(document).ready(function($){
    $('img').next('br').remove();
});

Ceci devrait supprimer toutes les balises br après les images car next sélectionnera l’élément immédiatement suivant. Si cela vous pose des problèmes, essayez plutôt .nextAll('br:first')

Voir ici pour plus d'exemples et de choses que vous pouvez essayer.

0
sMyles