Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active August 29, 2015 14:14
Show Gist options
  • Save srikat/0d1f9d2f4b8593dbe042 to your computer and use it in GitHub Desktop.
Save srikat/0d1f9d2f4b8593dbe042 to your computer and use it in GitHub Desktop.
Displaying Posts output by Display Posts Shortcode in Masonry.
//* Enqueue Google Fonts and JS script
add_action( 'wp_enqueue_scripts', 'magazine_enqueue_scripts' );
function magazine_enqueue_scripts() {
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400,700|Raleway:400,500,700,900', array(), CHILD_THEME_VERSION );
// wp_enqueue_script( 'magazine-entry-date', get_bloginfo( 'stylesheet_directory' ) . '/js/entry-date.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'magazine-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true );
//* Enqueue Masonry
wp_enqueue_script( 'masonry' );
//* Initialize Masonry
wp_enqueue_script( 'masonry-init', get_stylesheet_directory_uri() . '/js/masonry-init.js', array( 'masonry' ), '1.0.0', true );
}
//* Add new image size
add_image_size( 'masonry-thumb', 146, 0, true );
add_filter( 'display_posts_shortcode_author', 'sk_remove_by_author' );
/**
* Remove 'by' before author name in Display Posts Shortcode output
*
* @author Sridhar Katakam
* @link http://sridharkatakam.com/
*/
function sk_remove_by_author( $author ) {
$author = ' <span class="author">' . get_the_author() . '</span>';
return $author;
}
add_filter( 'display_posts_shortcode_output', 'be_links_in_new_window', 20 );
/**
* Add a target="_blank" to the anchor tag in posts output by Display Posts Shortcode
*
* @author Bill Erickson
* @link https://github.com/billerickson/display-posts-shortcode/wiki
*/
function be_links_in_new_window( $output ) {
return str_replace( '<a ', '<a target="_blank" ', $output );
}
[display-posts posts_per_page="10" include_author="true" image_size="masonry-thumb" meta_key="_thumbnail_id" wrapper="div" tag="se-policies"]
jQuery( function( $ ){
var $container = $('.display-posts-listing');
// initialize Masonry after all images have loaded
$container.imagesLoaded( function() {
$container.masonry({
itemSelector: '.listing-item',
gutter: 5
});
});
});
/* Masonry effect on Display Posts Shortcode
--------------------------------------------- */
.listing-item {
border-radius: 0;
width: 19.4666666667%; /* 146px via http://cl.ly/image/3g2V100s3Q3d */
overflow: hidden;
background: #ddd;
margin-bottom: 5px;
}
.listing-item a img {
vertical-align: top;
}
.listing-item a.title {
display: block;
padding: 10px;
color: #000;
line-height: 1.3;
font-weight: 700;
font-family: 'Raleway', sans-serif;
word-wrap: break-word;
}
.listing-item a.title:hover {
color: #f41d00;
}
.listing-item .author {
padding: 10px;
font-style: italic;
font-size: 15px;
line-height: 1.3;
display: inline-block;
font-family: 'Roboto', sans-serif;
}
@media only screen and (max-width: 1024px) {
.listing-item {
width: 24.375%;
}
}
@media only screen and (max-width: 768px) {
.listing-item {
width: 19.4366197183%;
}
}
@media only screen and (max-width: 568px) {
.listing-item {
width: 24.2661448141%;
}
}
@media only screen and (max-width: 480px) {
.listing-item {
width: 32.5617283951%;
}
}
@media only screen and (max-width: 320px) {
.listing-item {
width: 49.1319444444%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment