Usando Masonry - Como fazer com que cada imagem em miniatura da X-ésima postagem abranja várias colunas?

Question

Para ser específico:

• Estou usando o Masonry para mostrar todas as postagens de uma determinada categoria
• As imagens em miniatura de cada postagem são mostradas na página da categoria em um formato de 3 colunas usando colunas CSS de largura fluida
• Preciso mostrar a 7ª imagem em miniatura abrangendo a largura de todas as 3 colunas

No passado, adicionei um contador às postagens para direcionar a Xª postagem para aplicar uma classe e um estilo adequados.Mas isso é possível com a Maçonaria, que é absolutamente elementos de posicionamento?

EDITAR

Estou usando este código para consultar postagens na página de alvenaria:

    if ( get_query_var( 'paged' ) ) {
    $paged = get_query_var( 'paged' );
} elseif ( get_query_var( 'page' ) ) {
    $paged = get_query_var( 'page' );
} else {
    $paged = 1;
}
$args = array(
    'posts_per_page' => 12, 
    'paged' => $paged
);

// Override the primary post loop
query_posts( $args );

Answer 1

Então, não consegui descobrir como adicionar uma classe de sequência numérica a cada div de postagem/artigo, mas apenas alterei o modelo para a 7ª postagem no modelo de alvenaria.

Eu fiz assim:

<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while (have_posts()) : the_post(); ?>

<?php $count++; ?>
<?php if ($count == 7) : ?>

     <article class="masonry-entry masonry-3col masonry-post-no-7">
     </article>

<?php else: ?>  

     <article class="masonry-entry masonry-3col">
     </article>
<?php endif; ?>
<?php endwhile; ?>

Answer 2

Isso não deveria ser um problema com a Maçonaria, pelo menos nunca tive uma com ela (ou seu equivalente semelhante, Isótopo).Na verdade é a beleza dessas bibliotecas que você consegue ter esse tipo de layout.O resto se resume aos estilos CSS corretos.Não sei como você aplica sua classe de contador/índice, mas faria como mostrado abaixo:

function wpse151589_indexed_post_class( $classes ) {
    global $wp_query;

    // the current_post property value starts counting at 0
    // we are doing + 1 to start from 1
    $index = $wp_query->current_post + 1;

    // if you want the number to always have 3 digits
    // like 001, uncomment the next line
    //$index = sprintf( '%1$03d', $index );

    // results in classes like post-nr-1/001
    $classes[] = 'post-nr-' . $index;

    return $classes;
}
add_filter( 'post_class', 'wpse151589_indexed_post_class' );

---

Editar: Responder ao comentário

Há algumas coisas que gosto de observar,

1. Fazer não usar query_posts()

   Há uma razão pela qual até mesmo a página do códice correspondente afirma:

   Esta função não deve ser usada por plugins ou temas.Conforme explicado posteriormente, existem opções melhores e com melhor desempenho para alterar a consulta principal.

   E mais tarde:

   Para consultas gerais de postagem, use WP_Query ou get_posts.

   E:

   Isso é fortemente recomendado que você use o pre_get_posts filter em vez disso e altere a consulta principal verificando is_main_query

   As duas fontes mais informativas e destacadas para o por que estão localizados aqui no WordPress Development, vale a pena ler:

   • Quando você deve usar WP_Query vs query_posts() vs get_posts()?
   • Quando usar WP_query(), query_posts() e pre_get_posts
     
     

2. Que post_class() não pode ser usado fora o laço é não verdadeiro

   Existe até um seção sobre isso na documentação.Concedeu a página do códice para post_class não é o melhor que existe, mas é claro que a função tem dois parâmetros, são eles: $classes e $post_id.

   post_class( $classes, $post_id );
   

   Que significa:

   Para exibir postagens fora do Loop ou em um Loop alternativo, o segundo parâmetro da função post_class pode ser o ID da postagem.As aulas serão então determinadas a partir desse posto.

   Isto - além das informações de 1.- torna muito possível usar isso para seu propósito.
   
   

3. O WP_Query objeto tem uma propriedade chamada $current_post

   $ postagem_atual
   (disponível durante O laço) Índice da postagem que está sendo exibida atualmente.

   Ele pode ser usado para o seu propósito, portanto não há necessidade de reinventar a roda.