Skip to content

Instantly share code, notes, and snippets.

@justawebbie
Created July 30, 2018 21:06
Show Gist options
  • Save justawebbie/89054b7a4b18afc58df6d48500c71156 to your computer and use it in GitHub Desktop.
Save justawebbie/89054b7a4b18afc58df6d48500c71156 to your computer and use it in GitHub Desktop.
Tiled featured image display
<?php function news_image_tiles() {
$args = array (
'post_type' => 'post',
'cat' => '235',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => '5',
);
$query1 = new WP_Query($args); ?>
<div class="container dynamicTile">
<div class="row tile-row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 tile-col">
<?php while ($query1 ->have posts()) {
$query1->the_post();
$post = $posts[0]; $c=0; ?>
<?php $c++; if($c == 1) { ?>
<div class="tile-wrapper tile-img">
<?php the_post_thumbnail('large', array('class' => 'img-fluid img-responsive')); ?>
<div class="tile-wrapper-inner-lg">
<h4><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h4>
<div class="description"><?php the_excerpt(); ?></div>
</div>
<div class="overlay"></div>
<a class="tri-corner" href="<?php echo get_permalink(); ?>"></a>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 tile-col">
<div class="row tile-row">
<?php } elseif($c == 2) { ?>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 tile-col">
<div class="tile-wrapper tile-img">
<?php the_post_thumbnail('medium', array('class' => 'img-fluid img-responsive')); ?>
<div class="tile-wrapper-inner">
<h4><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h4>
<div class="description"><?php the_excerpt(); ?></div>
</div>
<div class="overlay"></div>
<a class="tri-corner" href="<?php echo get_permalink(); ?>"></a>
</div>
</div>
<?php } elseif($c == 3) { ?>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 tile-col">
<div class="tile-wrapper tile-img">
<?php the_post_thumbnail('medium', array('class' => 'img-fluid img-responsive')); ?>
<div class="tile-wrapper-inner">
<h4><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h4>
<div class="description"><?php the_excerpt(); ?></div>
</div>
<div class="overlay"></div>
<a class="tri-corner" href="<?php echo get_permalink(); ?>"></a>
</div>
</div>
</div>
<?php } elseif($c == 4) { ?>
<div class="row tile-row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 tile-col">
<div class="tile-wrapper tile-img">
<?php the_post_thumbnail('medium', array('class' => 'img-fluid img-responsive')); ?>
<div class="tile-wrapper-inner">
<h4><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h4>
<div class="description"><?php the_excerpt(); ?></div>
</div>
<div class="overlay"></div>
<a class="tri-corner" href="<?php echo get_permalink(); ?>"></a>
</div>
</div>
<?php } elseif($c == 5) { ?>
<div class="row tile-row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 tile-col">
<div class="tile-wrapper tile-img">
<?php the_post_thumbnail('medium', array('class' => 'img-fluid img-responsive')); ?>
<div class="tile-wrapper-inner">
<h4><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h4>
<div class="description"><?php the_excerpt(); ?></div>
</div>
<div class="overlay"></div>
<a class="tri-corner" href="<?php echo get_permalink(); ?>"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<?php } else {
$c=0;
} ?>
<?php } ?>
<?php }; ?>
add_shortcode('news_tiles', 'news_image_tiles'); ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment