Suporte » Temas e templates » bootstrap — loop em "tranches" de quatro posts

  • Resolvido fpsdf

    (@fpsdf)


    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 Ze Fontainhas

    (@vanillalounge)

    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 é */ );
    ?>

    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

    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!

    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.