bootstrap — loop em "tranches" de quatro posts

Resolvido fpsdf
(@fpsdf)

há 11 anos, 4 meses

Estou a desenvolver um tema (baseado no Twitter Bootstrap) em que o template archive-projetos.php (do custom post type “projetos”) necessita de ter cada quatro posts agrupados numa div com a classe .row.
É assim que funcionam os thumbnails do Bootstrap — quando queremos uma grelha com quatro thumbnails por linha, então cada quatro divs com a classe .thumbnail têm que vir numa div com a classe .row.
Como é que eu poderia fazer com que o loop, a cada quatro resultados, fechasse a div .row, abrisse uma nova, retornasse os próximos quatro posts e assim sucessivamente?

Desde já agradeço a atenção e qualquer tipo de apoio.

A visualizar 4 respostas - de 1 a 4 (de um total de 4)

Moderador Zé Fontainhas
(@vanillalounge)

há 11 anos, 4 meses
Podes definir um contador antes do loop, por exemplo:

<?php $postcount = 0; ?>

E dentro do loop, a seguir a cada artigo, testas se estás num múltiplo de 4, por exemplo:
```
<?php
$postcount++; /* incrementa o contador */
( $postcount%4 == 0 ) ? /* lógica se é multiplo de 4 */ : /* lógica se não é */ );
?>
```
sergiovieira
(@sergiovieira)

há 11 anos, 4 meses

No bootstrap tens também o componente Thumbnails que podes usar sem recorrer ao contador:

<ul class=”thumbnails”>
<li class=”span4″>
<div class=”thumbnail”>
<img data-src=”holder.js/300×200″ alt=””>
<h3>Thumbnail label</h3>
</div>
…

http://twitter.github.com/bootstrap/components.html#thumbnails

Thread Starter fpsdf
(@fpsdf)

há 11 anos, 4 meses

Muito obrigado aos dois.

Exacto, Sérgio. É esse componente que estou a usar. O problema é que estas thumbnails vão tendo alturas diferentes entre si (consoante o conteúdo), o que faz com que hajam espaços vazios, onde se pretende que hajam thumbnails. Não sei ao certo porque é que acontece (float?). De toda a forma, as thumbs terão que ser “manualmente” agrupadas quatro a quatro, de forma a garantir que as linhas tenham sempre quatro thumbnails (alinhadas pelos seus topos).
Penso que a sugestão do Zé Fontainhas é eficaz, embora não tenha ainda voltado a este projeto. Informarei, assim que chegue a um resultado.

Muito obrigado!

sergiovieira
(@sergiovieira)

há 11 anos, 4 meses

Ok mas então não será boa ideia usares uma .row pois tem uma margin diferente para funcionar com os .span’s. Usa um div específico.

Sim isso acontece pelo float e o contador será uma boa solução. Podes também usar algo como o masonry se as alturas forem muito diferentes.

A visualizar 4 respostas - de 1 a 4 (de um total de 4)

O tópico ‘bootstrap — loop em "tranches" de quatro posts’ está fechado a novas respostas.

bootstrap — loop em "tranches" de quatro posts

Etiquetas do tópico

Ver