A highly requested feature has been to create an alternative blog layout like in the screenshot below. Shortly after the MD4.8 release— which will unlock many important design capabilities—I intend to make this template available as a simple setting for you to enable/disable at your own leisure.
In the meantime, thanks to MD's incredible flexibility under-the-hood, you can enable this functionality pretty easily with a simple child theme mod I've prepared for you. See instructions below.
-----
Blog Blocks Features
- Alternative blog posts layout for your entire site
- Fill out the "Excerpt" meta box in your post editor to change the description text
- Doesn't interfere with MD custom featured image controls on single posts/pages
-----
Installation Instructions
I've prepared a stripped down child theme which you can download and use to either install to your site or merge into your existing child theme.
Download the child theme here:
View attachment blog-blocks-example.zip
To activate this child theme, simply upload this .zip file to Appearance > Themes and activate it over the MD parent theme.
A note: you will most likely find that your existing featured images don't scale into the new layout, so you'll need to simply run the Regenerate Thumbnails plugin to safely resize your images to the new layout
If you already use a child theme you can easily merge this Drop-in like so:
1) Unzip the Drop-in file you just downloaded
2) Copy the /content/loop-blocks.php file to the same path in your child theme (should looks like: /wp-content/themes/your-child-theme/content/loop-blocks.php)
3) Copy and paste the following 2 functions into your existing child theme's functions.php file:
/**
* Add new image size for Loop Blocks listing.
*
* @since 1.0
*/
function md_child_theme_after_setup() {
add_image_size( 'post-block-image', 698, 678, true );
}
add_action( 'after_setup_theme', 'md_child_theme_after_setup' );
/**
* Overwrite the default loop with the loop-blocks.php file
* in our child theme.
*
* @since 1.0
*/
function md_child_theme_loop() {
if ( md_has_teasers() && ( is_home() || is_search() || is_archive() ) )
$type = 'teasers';
if ( is_singular() )
return;
return 'blocks';
}
add_filter( 'md_filter_loop_type', 'md_child_theme_loop' );
3) Copy this CSS into your existing child theme's style.css file:
In the meantime, thanks to MD's incredible flexibility under-the-hood, you can enable this functionality pretty easily with a simple child theme mod I've prepared for you. See instructions below.
-----
Blog Blocks Features
- Alternative blog posts layout for your entire site
- Fill out the "Excerpt" meta box in your post editor to change the description text
- Doesn't interfere with MD custom featured image controls on single posts/pages
-----
Installation Instructions
I've prepared a stripped down child theme which you can download and use to either install to your site or merge into your existing child theme.
Download the child theme here:
View attachment blog-blocks-example.zip
To activate this child theme, simply upload this .zip file to Appearance > Themes and activate it over the MD parent theme.
A note: you will most likely find that your existing featured images don't scale into the new layout, so you'll need to simply run the Regenerate Thumbnails plugin to safely resize your images to the new layout
If you already use a child theme you can easily merge this Drop-in like so:
1) Unzip the Drop-in file you just downloaded
2) Copy the /content/loop-blocks.php file to the same path in your child theme (should looks like: /wp-content/themes/your-child-theme/content/loop-blocks.php)
3) Copy and paste the following 2 functions into your existing child theme's functions.php file:
/**
* Add new image size for Loop Blocks listing.
*
* @since 1.0
*/
function md_child_theme_after_setup() {
add_image_size( 'post-block-image', 698, 678, true );
}
add_action( 'after_setup_theme', 'md_child_theme_after_setup' );
/**
* Overwrite the default loop with the loop-blocks.php file
* in our child theme.
*
* @since 1.0
*/
function md_child_theme_loop() {
if ( md_has_teasers() && ( is_home() || is_search() || is_archive() ) )
$type = 'teasers';
if ( is_singular() )
return;
return 'blocks';
}
add_filter( 'md_filter_loop_type', 'md_child_theme_loop' );
3) Copy this CSS into your existing child theme's style.css file:
CSS:
/*---------------------------------*\
$POST_BLOCKS
/*---------------------------------*/
.post-block {
background-color: #fff;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}
.post-block-inner {
border-bottom: 1px solid #ddd;
padding-bottom: 26px;
}
/* IMAGE */
.post-block .wp-post-image {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
/* EXCERPT */
.post-block .post-excerpt {
color: #777;
}
/* BYLINE */
.post-block .post-byline {
display: inline-block;
}
.post-block .button-small {
padding-left: 26px;
padding-right: 26px;
}
.post-block .byline-author {
font-size: 15px;
line-height: 41px;
margin-left: 7px;
}
.post-block .byline-author a {
border-bottom: 0;
color: #1e1e1e;
font-weight: bold;
}
.post-block .comments-link {
color: #333;
font-weight: 700;
}
.post-block .comments-link:hover {
color: #666;
}
.post-block .comments-link .md-icon-chat {
font-size: 24px;
margin-right: 7px;
position: relative;
bottom: -2px;
}
.post-block .comments-link span {
color: #ae2525;
}
/* EFFECTS */
.post-block .wp-post-image {
-o-transition: 0.4s;
-ms-transition: 0.4s;
-moz-transition: 0.4s;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.post-block:hover .wp-post-image {
-webkit-transform: scale(0.97);
-moz-transform: scale(0.97);
-ms-transform: scale(0.97);
-o-transform: scale(0.97);
transform: scale(0.97);
}
/* MEDIA QUERIES */
@media all and (min-width: 700px) {
.post-block .post-excerpt {
font-size: 19px;
line-height: 29px;
}
.post-block .headline {
font-size: 34px;
line-height: 44px;
}
.post-block .more-link {
float: right;
}
}
@media all and (min-width: 900px) {
.post-block .featured-image {
float: left;
width: 40%;
}
.post-block .featured-image + .post-content {
float: left;
padding-left: 26px;
width: 60%;
}
}
@media all and (max-width: 900px) {
.post-block .post-byline {
margin-bottom: 13px;
}
}
@media all and (max-width: 700px) {
.content .post-block {
margin-bottom: 0;
padding-left: 13px;
padding-right: 13px;
}
}
Last edited by a moderator:
So I'm guessing you do not have a blog block. I wrote more in this context... Try out the Loco Translate plug-in. 
