Add wp posts to cutom masonry grid

Question

Add wp posts to cutom masonry grid

sunnyluk

2018年1月30日 17:24

I need to create masonry grid containing the latest posts. I created a grid based on https://masonry.desandro.com/ - the grid displays correctly.

I am asking for help in creating a wp loop that will display posts in the grid.

This is my grid:

!-- grid masonry layout --
div class="news-wrapper container"
  div class="grid"
    div class="grid-sizer"/div
    div class="gutter-sizer"/div
    div class="grid-item grid-item--width2"/div
    div class="grid-item grid-item--height2"/div
    div class="grid-item grid-item--width2"/div
    div class="grid-item"/div
    div class="grid-item grid-item--width2"/div
    div class="grid-item grid-item--width2"/div
    div class="grid-item grid-item--height2"/div
    div class="grid-item grid-item--height2"/div
    div class="grid-item grid-item--width2"/div
    div class="grid-item grid-item--width2"/div
  /div
/div

A single grid element should contain a single post (name of the post category, title, description, read more button). Posts should be displayed from the date of inclusion, from selected categories.

I created this code:

    ?php
    $args = array( array( 'category__and' = array( 55, 61, 53, 59, 57 ) ), 'post_status' = 'publish', 'orderby' = 'ASC' );
    $news_query = null;
    $news_query = new WP_Query( $args );
   ?
    !-- grid masonry layout --
    div class="news-wrapper container"
       div class="grid"
                ?php if ($news_query-have_posts()) : ?
                ?php $count = 0; ?
                ?php while ($news_query-have_posts()) : $news_query-the_post(); ?
                ?php $count++; ?
       div class="grid-sizer"/div
       div class="gutter-sizer"/div
            ?php if ( $count == 1 ) : ?
       div class="grid-item grid-item--width2"
            div class="card card-media"
            a href="#"
              div class="news-cat"?php the_category(', '); ?/div
            /a
            div class="card-body"
              h5 class="card-title"a href="?php the_permalink() ?" title="Permanent Link to ?php the_title_attribute(); ?"?php the_title(); ?/a/h5
              p class="card-text"?php the_excerpt(); ?/p
              a href="#" class="btn"span class="nav-text"Read more/spani class="fa-xs fas fa-arrow-right"/i/a
            /div
        /div
      /div
            ?php elseif ($count == 2) : ?
          div class="grid-item grid-item--height2" (..and next grid item...)

I have introduced counting, because the grid elements have different styling (sometimes double width, double height), so I can not create identical grid elements in the loop, so how to change counting to display all posts (regardless of their number)?

Topic masonry php posts Wordpress

Category Web

sunnyluk · Accepted Answer · 2018年1月30日 17:24

As I mentioned before, I created a single loop.

<div class="grid">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
        <!-- the loop -->
        <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
        <div id="grid-item-nr-<?php echo $post_nr; ?>" <?php post_class( 'grid-item' ); ?>>
          <div class="card">
            <div class="news-cat"><?php the_category(', '); ?></div>
            <div class="card-body">
                <h5 class="card-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
                <p class="card-text">
                <?php if ( is_category() || is_archive() ) {
                echo excerpt(20);
                    } else {
                echo excerpt(20);
                    } ?>
                </p>
                <a href="<?php the_permalink(); ?>" class="btn"><span class="nav-text">Czytaj więcej</span><i class="fa-xs fas fa-arrow-right"></i></a>
             </div>
          </div>
       </div>
    <?php $post_nr++; endwhile; ?>
    <!-- end of the loop -->
</div>

Then I created a script (which I could certainly optimize ...) adding classes to the appropriate boxes, repeating every next 11 elements.

$(function() {
    var item = 0;
    var a = 0; // 1 element
    var b = 3; // 4 element
    var c = 5; // 6 element
    var d = 6; // 7 element
    var e = 9; // 10 element
    var f = 10; // 11 element
    var g = 1; // 2 element
    var h = 7; // 8 element
    var i = 8;; // 9 element
    var j = 2; // 3 element
    var k = 4; // 5 element

for (item = 0; item < 100; item++) {
      $('.grid').find("div.grid-item:eq(" + a + ")").addClass('grid-item--width2');
      $('.grid').find("div.grid-item:eq(" + b + ")").addClass('grid-item--width2');
      $('.grid').find("div.grid-item:eq(" + c + ")").addClass('grid-item--width2');
      $('.grid').find("div.grid-item:eq(" + d + ")").addClass('grid-item--width2');
      $('.grid').find("div.grid-item:eq(" + e + ")").addClass('grid-item--width2');
      $('.grid').find("div.grid-item:eq(" + f + ")").addClass('grid-item--width2');
      $('.grid').find("div.grid-item:eq(" + g + ")").addClass('grid-item--height2');
      $('.grid').find("div.grid-item:eq(" + h + ")").addClass('grid-item--height2');
      $('.grid').find("div.grid-item:eq(" + i + ")").addClass('grid-item--height2');
      $('.grid').find("div.grid-item:eq(" + j + ") p.card-text").hide();
      $('.grid').find("div.grid-item:eq(" + k + ") p.card-text").hide();
      a += 11;
      b += 11;
      c += 11;
      d += 11;
      e += 11;
      f += 11;
      g += 11;
      h += 11;
      i += 11;
      j += 11;
    };
  });

Classes are added before calling the masonry script. The effect has been achieved.

D. Dan · Accepted Answer · 2018年1月29日 13:47

1

D. Dan answered at 2018年1月29日 13:47

Instead of $count == 1 you should use ($count % 12) == 0, 1, and so on till 11. This gives back the remaining of the division. So if $count is 6 you would get 6, but if $count was 16 it would give back 4.

Add wp posts to cutom masonry grid

About