I've got a problem and was hoping you guys could help me out;
For a project I'm working on I want to create an uneven grid in a WordPress template. For the grid, I'm using Desandro's Masonry.js which is a lovely library for creating flexible grids.
Currently, I have all wordpress content displayed as a straight horizontal grid, like so:
However, my eventual goal is to have the grid displayed as following:
To give you an idea of how I currently have my grid setup here's a chunk of the code:
I'm using the following WordPress loop for the majority of the grid display:
<main id="main" class="site-main" role="main">
<?php
if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) : ?>
<?php
endif;
/* Start the Loop */
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content-masonry', get_post_format() );
endwhile;
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
Which selects from the following content-part:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php echo get_permalink( $post->ID ); ?>">
<div class="row">
<div class="grid-item col-xs-12 col-sm-6 col-md-6 grid-item-content-background">
<div class="grid-item-content-background">
<div class="front-page-grid-item-tag">
</div>
<div class="button-container">
<i class="fa-border-circle glyphicon glyphicon-chevron-right"></i>
</div>
<!-- post-tags -->
<div class="tags-container">
<?php $tags = wp_get_post_tags( $post->ID );
$html = '';
foreach ( $tags as $tag ) {
$tag_link = get_tag_link( $tag->term_id );
$html .= "<div class='tag-display tag-icon-{$tag->slug}'></div>";
}
echo $html; ?>
<h4 class="front-page-category">
<?php foreach( (get_the_category()) as $category ) { echo $category->cat_name . ' '; } ?>
</h4>
</div>
<!-- .post-tags -->
<div class="grid-item-content">
<div class="grid-item-content-thumbnail"
<?php
if ( $thumbnail_id = get_post_thumbnail_id()) {
if ($image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg'))
printf('style="background-image: url(%s);"', $image_src[0]);
} ?>>
<div class="frontpage-overlay frontpage-overlay-trigger">
<div class="frontpage-article-text-container">
<h2 class="front-page-title"><?php echo get_the_title(); ?></h2>
<h3 class="front-page-subtitle">
<?php {
$subtitle = get_post_meta ( $post->ID, 'subtitle', $single = true );
if ( $subtitle !== '' ) echo $subtitle;
elseif ( $subtitle == '' ) echo '<!-- no subtitle set -->'; } ?>
</h3>
</div><!-- .front-page-article-text-container -->
</div><!-- .frontpage-overlay -->
</div><!-- .grid-item-content-thumbnail -->
</div><!-- .grid-item-content -->
</div><!-- .grid-item-content-background -->
</div><!-- .grid-item -->
</div><!-- .row -->
</a>
</article><!-- #post-<?php the_ID(); ?> -->
Now I've noticed that Masonry uses absolute positioning on the .grid-item class to position elements from top: 0px and left: 0%. Would it at all be possible to have masonry instead start elements from, say, 40px top on the uneven elements inside the grid? Making the grid effectively uneven?
Normally I would simply encapsulate the left side of the grid within a container with an additional margin-top, but sadly I've been unable to achieve that. I've also tried setting all uneven children of the grid to an additional margin-top using CSS, but that was to no avail either (which probably has something to do with the absolute positioning Masonry does).
I've been fussing about this for hours on end. If somebody could assist me that would be really appreciated!
Thank you!
Update: Due to the used library using absolute positioning, any CSS edits are uneffective. I assume that I'll be needing a jQuery hack that'll set the top of the first element to top: 40px instead of the top: 0; but I have no clue where to start. If anybody can help me that'd be very much appreciated!
Okay, so I eventually found the solution by adding the following jQuery:
jQuery( '.grid-item:even' ).css( 'margin-top', '40px' );
Hope it helps somebody!
Thank you all.