Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

enter image description here

share|improve this question
    
You are correct that the br tag is pushing the image down so their tops do not align –  Tom J Nowell Jun 30 at 11:51
    
jsfiddle.net/fs8mf <- demonstration –  Tom J Nowell Jun 30 at 11:53

9 Answers 9

up vote 5 down vote accepted
+50

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.

share|improve this answer
    
Great answer. Also post a link to wpautop for the OP to see what false means, or explain it well. –  Eric Holmes Jun 30 at 13:13
    
This workaround works, but obviously there is a wealth of content on the blog and I can't imagine going through and changing every post. Is wpautop( $content, false ); something I can easily test? Would I be able to undo it if I don't like the results? –  user1255049 Jun 30 at 15:18
    
@user1255049 Yes, you can always try, just remove the code later and it will restore to normal. –  jocken Jul 1 at 13:42

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.

share|improve this answer

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

share|improve this answer

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:

holy moly, the alignment issue has vanished

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.

share|improve this answer

Remove your line break tag between your images.

Example:

<img src="" alt="" /> <br/> <img src="" alt="" />
share|improve this answer
    
Hi Rene, that <br/> has been automatically inserted - what am I looking to remove if that is the case? –  user1255049 Jun 28 at 12:54
    
ETA- those <br/> aren't in the actual post code/content that I've created - only when viewing the post as it's been published. –  user1255049 Jun 28 at 16:21

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' );
share|improve this answer

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.

share|improve this answer

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

share|improve this answer

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

share|improve this answer
2  
Please add a proper explanation to your answers to comply with the WordPress Development quality standards - for starters read How to Answer. –  ialocin Jun 30 at 10:58
    
Specifically, how does this prevent the issue, and why? –  Tom J Nowell Jun 30 at 11:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.