Affichage alterné des thumbnails

Comment créer un affichage alterné de ses articles dans une page d’archive

Dans ce mémo je rappelle une fonction pouvant servir à créer des colonnes ou un affichage alterné pour ses images à la une, comme sur l’image ci dessous:

Dans un fichier  ‘archive , on entoure le contenu d’un modulo qui va créer deux classes alternées.

if (have_posts()) : while (have_posts()) : the_post();  ?>





</p>
<div class='<?php echo ( ++$j % 2 == 0) ? 'evenpost' : 'oddpost'; ?>'>  
                        <?php get_template_part('template-parts/content', get_post_format()); ?>
</div>
<p>





                    <?php endwhile; // End of the loop. ?>                   
                <?php else : ?>
    <?php get_template_part('template-parts/content', 'none'); ?>
<?php endif; ?>

Ensuite, dans notre fichier article,  single.php ou content-single.php, on entoure le thumbnail d’une classe:

</p>
<div class="archive-thumbnail">
     <a href="<?php the_permalink();?>"><?php the_post_thumbnail(); ?>
</a>
</div>
<p>

Et on applique à cette classe un float left et right pour créer l’affichage alterné: l’image apparaîtra un coup à droite, un coup à gauche.

.oddpost .archive-thumbnail img{float:left;}
.evenpost .archive-thumbnail img{float:right}

Une autre fonction récupérée ici nous permet de créer des classes en nombre illimitées.

<?php if (have_posts()) : while (have_posts()) : the_post();?>



</p>
<div class='item-<?php echo ($i++%2); ?>'>
		<?php the_content(); ?>
</div>
<p>



<?php endwhile; endif; ?>

Ici il suffit de modifier le chiffre pour créer autant de classes .item-1, .item2, item3 ..Etc

Dans un autre petit tuto, on voit comment appliquer ce genre d’affichage alterné avec bootstrap.