Alternating image position in post exerpts

It should be possible using the the_post_thumbnail, a little extra coding & some CSS. For example:

THE TEMPLATE FILE:

<?php if (have_posts()) : ?>
<?php
$c = 0; // set up a counter so we know which post we're currently showing
$extra_class = 'even' // set up a variable to hold an extra CSS class
?>
<?php while (have_posts()) : the_post(); ?>
<?php
$c++; // increment the counter
if( $c % 2 != 0) {
	// we're on an odd post
	$extra_class = 'odd';
?>
<div <?php post_class($extra_class) ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> by <?php the_author() ?></small>

<?php if( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<div class="entry">
<?php the_excerpt(); ?>
</div>
[ ... ]

CSS:

.even .wp-post-image {
	float:left;
	padding:0;
	margin:0 20px 20px 0;
}
.odd .wp-post-image {
	float:right;
	padding:0;
	margin:0 0 20px 20px;
}

cool concept…. Was thinkin of playing around with it…. but seems it throws a blank page for me in my index.php.

I did a simple cut/paste of appropriate code in places shown…..maybe I goofed? Double checked…..don’t think I missed anything

Missing closing bracket in an if statement – sorry:

<?php if (have_posts()) : ?>
<?php
$c = 0; // set up a counter so we know which post we're currently showing
$extra_class = 'even' // set up a variable to hold an extra CSS class
?>
<?php while (have_posts()) : the_post(); ?>
<?php
$c++; // increment the counter
if( $c % 2 != 0) {
	// we're on an odd post
	$extra_class = 'odd';
} else {
$extra_class = 'even'; }
?>
<div <?php post_class($extra_class) ?>>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> by <?php the_author() ?></small>

<?php if( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<div class="entry">
<?php the_excerpt(); ?>
</div>
[ ... ]

[EDIT: code corrected]

that clears up the blank page (I never would have caught that)

Here’s the output I get….

<div class="post-871 post hentry category-projects tag-access tag-files tag-hacked tag-logs tag-rogue tag-wordpress odd"">

viewed in source….seems it’s picking up a lot more info, like all the post meta..

The odd/even never increments, always stays at odd
(Sorry to jump in and steal the thread…but I like the concept)

Apart from the “odd” class, the others are all standard classes generated by post_class(). Along with body_class(), I find them really useful for targeting CSS without having to add code.

Right, that’s kinda what I figured, I just wasn’t sure what should actually be output by the code…so I was including it all.

Any idea why the EVEN/ODD part of the class would not be incrementing?… Just staying at ODD for all posts?

Hi Esmi,

Thank you very much!

Problem is that I don’t know php or CSS – BUT am always willing (or needing) to learn.

I have atahualpa as a theme. Am I assuming right when you talk about the template file that it is something that should be there already, not something I would have to create?

If my assumption ist right: where would I find this file?

And into which location within the file should I put the code?

OR do I put it within the atahualpa options in my admin? If so – I would guess within the loop??

Regarding the CSS: I think hat would go also in the atahualpa options in my admin in the “configure CSS & JS”. Is this correct?

Many many thanks!
Ann.

ps. Which one of these post thumbnail plugins should I use?

https://www.ads-software.com/extend/plugins/search.php?q=post+thumbnail&sort=

Thanks,

Ann.

@rvoodoo

Any idea why the EVEN/ODD part of the class would not be incrementing?… Just staying at ODD for all posts?

i think the variable $extra_class is set to odd, but never reset to empty or even.

like so:

<?php
$c++; // increment the counter
if( $c % 2 != 0) {
	// we're on an odd post
	$extra_class = 'odd';
} else {
$extra_class = 'even'; }
?>

sweet, thanks…. gives me something to play with

and one further question….
<div <?php post_class($extra_class) ?>">

this line….shoule there be a semicolon in that after extra_class)?
My source output is showing me a double quote at the end of the class

like so odd"">

is there some kind of error with that line?

@alchymyth: thanks for correcting the code.

@rvoodoo: Sorry – my bad for not resetting $extra_class within the Loop. There definitely shouldn’t be a semi-colon within post_class($extra_class) but looks like an extra ” crept into my original code.

Try <div <?php post_class($extra_class) ?>>

I’ve corrected the code posted above in case anyone else stumbles across it.
(I really am a lousy typist!)

Nice one folks! That works a treat! I got some playin to do

@ann Castro

I’ll try to help you understand, since this was originally your thread….but it helped me tremendously

First you have to set up your theme (in functions.php and wherever you want the thumbnails to appear, probably index.php)

it’s no plugin, just a bit of code

https://codex.www.ads-software.com/Template_Tags/the_post_thumbnail
explains it

https://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/
is also a good tutorial

Once you have the thumbnails set up, you use the bit of code from the 4th post in this thread (by @esmi)

that goes into index.php. Not all of it, the whole block of code is included to show where the important elements go. Some of the code you will already have, just compare and plug in the appropriate code.

That will apply alternating classes to your posts of even, odd

Then you put the bit of css code from @esmi in the second post to actually use the even/odd classes to align your new thumbnails left or right

How do you use this code when in the template it looks like this:

<?php
	query_posts('paged='.$paged.'&cat='.$theme_home_cats);
	if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="post">
		<?php
		$args = array(
		'post_type' => 'attachment',
		'numberposts' => 1,
		'post_status' => null,
		'post_mime_type' => 'image',
		'orderby' => menu_order,
		'order' => ASC,
		'post_parent' => $post->ID
		);
		$attachments = get_posts($args);
		if ($attachments) {
		foreach ($attachments as $attachment) {
		?>
			<div class="post-image">
				<a href="<?php the_permalink(); ?>"><img src="<?php echo wp_get_attachment_thumb_url($attachment->ID) ?>" alt="" /></a>
			</div>
			<div class="right">
		<? }} else { ?>
			<div class="right2">
		<?php } ?>

this looks like something that could be helpful in what I’m trying to do.

I want to use different background images for my content h2
here is the site: https://enamoured.eightcrazydesigns.com/

What I’d REALLY like to do is to have 4 different images that would be used. The first excerpt with image 1, second excerpt with image 2, third with image 3, fourth with image 4, fifth with image 1, etc.

However I’ve also considered just using two images and designating them based on odd and even post numbers. How would I use what you’ve done here to apply it for my needs. Any help is appreciated.