bootstrap — loop em "tranches" de quatro posts

  • Resolvido fpsdf

    (@fpsdf)


    há 13 anos, 1 mês

    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á 13 anos, 1 mês

    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á 13 anos, 1 mês

    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á 13 anos, 1 mês

    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á 13 anos, 1 mês

    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.