CODEWITHSUNDEEP
phpwordpressthumbnails
Irene
Irene

Reputation: 143

WordPress: Alternating thumbnail sizes

On an overview page, I want to display only the post thumbnails with a link to the article. But the thumbs should have different sizes (5 sizes, alternating). Something like that:

Image 1: thumbsize1

Image 2: thumbsize2

Image 3: thumbsize3

Image 4: thumbsize4

Image 5: thumbsize5

Image 6: thumbsize1

Image 7: thumbsize2

and so on.

I know this code to differ between even and uneven posts:

<?php $i = 1; // Index setzen ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php if ($i % 2 == 1 ) {
   echo 'CONTENT';
} ?>

<?php if ($i % 2 == 0 ) { 
echo 'CONTENT';     
}
$i++; // Index um 1 erhoehen
?>
<?php endwhile; ?>
<?php endif; ?>

So how can I change this code to fit my needs?

UPDATE:

That's my code for now: 

<?php  
$thumbname = 'thumbsize'.($i%5+1); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( $thumbname ); ?></a>
<?php $i++; // Index um 1 erhoehen
?> 


<?php endwhile; ?>
<?php endif; ?>

and in my functions.php:

add_image_size( 'thumbsize2', 300, 350, true );
add_image_size( 'thumbsize3', 750, 350, true );
add_image_size( 'thumbsize4', 400, 350, true );
add_image_size( 'thumbsize5', 300, 350, true );
add_image_size( 'thumbsize6', 350, 350, true );

and so on. However, the thumbnails have the full upload size.

Upvotes: 1

Views: 77

Answers (2)

arkoak
arkoak

Reputation: 2497

you can use the following method to decide the name if it has a numerical postfix from 1 to 5.

<?php $i = 1; // Index setzen ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php  
$thumbname = 'thumbsize'.($i%5);
//use thumbname accordingly in content here.
the_post_thumbnail( $thumbname ); 
$i++; // Index um 1 erhoehen
?>
<?php endwhile; ?>
<?php endif; ?>

Upvotes: 1

jogesh_pi
jogesh_pi

Reputation: 9782

Consider the Example: 

<?php $i = 0; // Index setzen ?>
<?php if (have_posts()) : ?> 
<div class="parent">
<?php while (have_posts()) : the_post(); ?>
<?php 
   // Close parent Div after completing 5 child and create 
   // New parent Div
   if ( $i != 0 && $i % 5 == 0 ) {
      echo '</div><div class="parent">';
   } 
?>
<div class="child <?php echo $i ?>"></div>
<?php $i++; ?>
<?php endwhile; ?>
</div><!-- // End Parent -->
<?php endif; ?> 

// Output
<div class="parent">
    <div class="child 0"></div>
    <div class="child 1"></div>
    <div class="child 2"></div>
    <div class="child 3"></div>
    <div class="child 4"></div>
</div>
<div class="parent">
    <div class="child 5"></div>
    <div class="child 6"></div>
    <div class="child 7"></div>
    <div class="child 8"></div>
    <div class="child 9"></div>
</div>

Upvotes: 0

Related Questions