disable WP automatically inserted line breaks after an image

Question

I've set medium sized images to a custom size which should allow for both of the images to align horizontally within the post. (The full post width is 880px, medium images are set to 413px.)

My challenge is that the images are not evenly aligned - the image on the right is always a little lower UNLESS there is another group of medium images immediately below, in which case that second group will be aligned evenly.

I think this may be something to do with WP automatically inserting line breaks after an image, but the few ways I've tried to disable this haven't been successful..

What I've put in the 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" />

What is read by the browser:

<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 />

Attempted (unsuccessful) solutions - 1 How do I disable linebreaks after images? 2 Why is Wordpress adding a linebreak after my floated image?

Site link.

Answer 1

If this is how it looks:

<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" />

Then you have to put them together like this:

<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" />

Because if you do this (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' );

you will probably break everything you have written, it's not worth it.

Answer 2

The quick fix is to wrap your image tags in div tags. That will prevent WP from wrapping the images in P tags. Then, you could give the divs a class for further control of appearance/arrangement.

Answer 3

We can not hook wpautop() function. Because then it will trim all the paragraph and break tags from the content.

After inserting the image in the editor just click on "Text" tab on the top right corner of the editor and remove the paragraph and break tags that comes in between images.

For more options(like alignment and other attributes) click on the image, Then set it accordingly using the "Advanced setting" options

Answer 4

You are correct that it is the <br> tags, but there is an alternative:

Place each image in their own paragraph, not adjacent lines

This is how line breaking works in WordPress content:

Paragraphs

This is paragraph 1

This is paragraph 2

Short line breaks

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

So don't use short breaks, use full paragraphs. For example, if you put them each on their own line, wrapped in a paragraph tag, it works.

So instead of:

<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" />

Do:

<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" />

Now each image is wrapped in a paragraph tag of its own, giving you this output:

Resulting in this:

If you're feeling adventurous, you can remove the p tags around images entirely ( on the frontend), but I recommend against doing that on your site. Open another question if you're curious how to do that.

Answer 5

You could try using jQuery to remove them for you:

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

This should remove any br tags after images as next will select the immediate next element. If that gives you issues you can try .nextAll('br:first') instead

See here for more examples and things you can try.

Answer 6

Remove your line break tag between your images.

Example:

<img src="" alt="" /> <br/> <img src="" alt="" />

Answer 7

The wpautop() function adds <p> and <br> tags to your content in order to preserve line breaks. If you would rather add these tags yourself, then you can remove the filters which apply this function to the post content:

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' );

Answer 8

Assuming the issue is the <br> tag (which I believe is correct) and based on one of your comments indicating that you do not wish to go back and edit the posts, you could use the the_content filter to look for instances of two medium-sized images separated only by a new line (which is being replaced by a <br> tag as part of WordPress' wpautop() function) and remove the new line:

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

References:

the_content

Function: preg_replace

Answer 9

You could remove it with jQuery this way:

jQuery('.zoomthumbnail-image').next('br').remove();

Answer 10

Try Using shift + enter instead of enter in the editor.