I'm doing a loop in WordPress to capture the posts of certain categories and show them as in the image below (image - template in html ).
IusedtheWPcodextoseehowIwasgoingtodothis,soIdecidedtodo2differentloops.Oneoftheseloopscapturesthepostofthehighlightedcategory(whichisthelargestimageinmytemplate).
<divclass="module">
<div class="destaque-mosaico home">
<ul style="position: relative; height: 729px;">
<?php
global $post;
$args = array(
'category' => '5'
);
$postDestaque = get_posts($args);
foreach( $postDestaque as $post) : setup_postdata( $post ); ?>
<li class="destaque" style="position: absolute; left: 0px; top: 0px;">
<a href="<?php the_permalink(); ?>">
<!-- <img src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/espetaculo-cartas-brasileiras-644x485.jpg"/>--><?phpif(has_post_thumbnail()):?><?phpthe_post_thumbnail();?><?phpelse:?><imgsrc="<?php bloginfo('template_url'); ?>/img/dummies/featured-1.jpg" alt="Alt text" />
<?php endif; ?>
<span class="overlay">
<h2><?php the_title(); ?></h2>
<!-- <span class="tag light-blue-bg c-black">sarau lítero-musical </span> -->
</span>
</a>
</li>
<?php endforeach; ?>
<?php get_template_part('partials/home', 'post'); ?>
</ul>
</div>
</div>
The prox. Loop should loop through the other elements <li>
of the list, but the <li>
of the featured has a class different from the other normal posts (each 1 has its own css class).
How do I make the loop understand this difference and show the posts just like my template?
Follows the remaining code:
<li class="item-1" style="position: absolute; left: 650px; top: 0px;">
<a href="http://www.cultura.pe.gov.br/edicao-especial-do-portomidia-game-jam-reune-mulheres-do-mercado-de-jogos/">
<img src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/JAM-DAS-MINAS-320x238.png"/><spanclass="overlay hide">
<h2>Edição especial reúne mulheres desenvolvedoras de jogos</h2>
<!-- <span class="more">+ leia mais</span> -->
<span class="tag c-black light-blue-bg">PORTOMÍDIA GAME JAM</span>
</span>
</a>
</li>
<li class="item-2" style="position: absolute; left: 650px; top: 243px;">
<a href="http://www.cultura.pe.gov.br/canal/literatura/forum-em-defesa-das-bibliotecas-livro-leitura-e-literatura-convoca-para-primeira-reuniao-do-ano/">
<img src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/1ª-Reunião-Ampliada-do-Fórum-Pernambucano-em-Defesa-das-BLLL-15-fev-2017-2-320x238.jpeg"/><spanclass="overlay hide">
<h2>FPELLLB convoca agentes para a primeira reunião de 2018</h2>
<!-- <span class="more">+ leia mais</span> -->
<span class="tag c-black light-blue-bg">Literatura</span>
</span>
</a>
</li>
<li class="item-3" style="position: absolute; left: 0px; top: 486px;">
<a href="http://www.cultura.pe.gov.br/canal/funcultura/acupe-grupo-de-danca-promove-curso-gratuito">
<img src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/Hans-V.-Manteuffel70-min-320x238.jpg"/><spanclass="overlay hide">
<h2>Acupe Grupo de Dança promove curso gratuito</h2>
<!-- <span class="more">+ leia mais</span> -->
<span class="tag c-black light-blue-bg">INCENTIVO FUNCULTURA</span>
</span>
</a>
</li>
<li class="item-4" style="position: absolute; left: 325px; top: 486px;">
<a href="http://www.cultura.pe.gov.br/canal/carnaval/75-anos-de-j-michiles-em-ritmo-de-frevo/">
<img src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/39407106974_62cdb2b1dc_k-320x238.jpg"/><spanclass="overlay hide">
<h2>Os 75 anos de J. Michiles no ritmo do frevo</h2>
<!-- <span class="more">+ leia mais</span> -->
<span class="tag c-black light-blue-bg">ESPECIAL</span>
</span>
</a>
</li>
<li class="item-5" style="position: absolute; left: 650px; top: 486px;">
<a href="http://www.cultura.pe.gov.br/escolas-de-samba-afinam-a-bateria-para-o-desfile-no-carnaval-do-recife/">
img src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/39051066365_437b604a3e_k-320x238.jpg"/><spanclass="overlay hide">
<h2>Escolas de Samba do Recife afinam a bateria para o Carnaval</h2>
<!-- <span class="more">+ leia mais</span> -->
<span class="tag c-black light-blue-bg">carnaval 2018</span>
</span>
</a>
</li>
All help is welcome!