Florian’s answer is probably your best bet because it gives the author the most control as to how the images are aligned so that would be my first answer.
However, if you don’t trust your authors to align the images themselves then we’ll have to go another route. Unfortunately for the reasons you stated above, it doesn’t look like we can use the :nth-child CSS since they are all nested within <p> tags.
So, we’ll have to use a little bit of jQuery to make this possible:
$( document ).ready(function() {
var imgCount = 0;
$('.post-text img').each(function(){
// remove our alignnone class for good measure
$(this).removeClass('alignnone');
// If the count is even, alignright, else align left
if(imgCount%2 == 0){
$(this).addClass('alignright');
} else {
$(this).addClass('alignleft');
}
imgCount++;
});
});
This assumes that you are using jQuery and that you have the alignright and alignleft classes set in your CSS. I have a working version on jsfiddle.
**DO NOTE: this will grab every image inside of your post-text class, so if you use post-text anywhere else on your site and you load this JS, it will affect the rest of your site. I would recommend either adding a new class to your blog posts loop, or only loading this JS on the single-posts.php page so that this only affects your blog posts pages and nothing else on your site.