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:

alternance

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.