• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.

[Drop-in] Blog Blocks

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.

loop-blocks.png

-----

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:

Some French Dude

SomeFrenchDude
Md
Messages
1,062
Reaction score
121
@Quenvil93, than you very much for. But 2 questions:

  1. Aren't we not suppose to NOT touch directly the parent them, but rather add our changes to the Child's Theme?
  2. I cannot find loop-block.php. Here is what I have on my side (I am using the latest version of MD, that 4.9.8.
    I cannot add a screenshot here but it goes like this:
  • [...]
  • headline.php
  • logo.php
  • loop-search.php
  • loop-teasers.php
  • loop.php
  • menu.php
  • [...]
 
Comment

Some French Dude

SomeFrenchDude
Md
Messages
1,062
Reaction score
121
osteoshiatsu.fr, but it is under construction and you will only see part of the home page and one single page when clicking the top hand-right Green button.

I wish I could post my screenshot here. This is very annoying not to be able to do so... 
But basically, I reproduced my screenshot in the text in italics in my previous message above. It shows the structure and content of my MD Theme's files. 

 
Comment

Quenvil93

Member
Md
Messages
13
Reaction score
1
I understand. :) So I'm guessing you do not have a blog block. I wrote more in this context... Try out the Loco Translate plug-in.  :)  


 
Comment

Quenvil93

Member
Md
Messages
13
Reaction score
1
Alex, is it possible to increase the size of the first block? I mean increasing the size of the visible text.

 EDIT:





Or disable the formatting of the first post in the form of a block. Is it possible to do?
 
Last edited by a moderator:
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,562
Reaction score
1,851
Hey @Quenvil93 thanks for posting help and apologies for the slow response. I'm back from a rare vacation and will be responding more promptly around here again.

@MasterHealer Since this is a drop-in, the loop-blocks.php file is not included in MD and goes to your child theme. First, to make edits to any file in the Marketers Delight parent theme /content/ folder you can copy the contents of it into your child theme following the same directory. See this article for more details:

https://marketersdelight.net/child-theme-basics-principles/#3-child-theme-mirroring

Example, to edit loop-blocks.php safely:

1) Open the file in the MD parent theme and copy all of the code

2) Go to your child theme folder in the themes directory and recreate the path to /themes/child-theme-name/content/filename.php

3) Paste the contents in and make your edits, then save and upload the file to your child theme. WordPress will now load your child theme version over MD's.

It's not reliable to make direct edits to files in the MD folder as they will be lost when MD updates to a new version. That's why many filters, hooks, and template files have been included to overwrite. See this page for some examples: https://marketersdelight.net/snippets/

@Quenvil93 The easiest way to edit the first block only is to use this CSS:

.content .post-block:first-child {
....
}


To edit the excerpt text use this CSS:

CSS:
.content .post-block:first-child .post-excerpt {
	font-size: 17px;
	line-height: 29px;
}
 
Comment

michkocis

Active member
Messages
30
Reaction score
10
Guys how did you get rid of that lower section of blog block ( where it shows comments, i like it more without that part ) hm ? :) If i disable just comments it doesnt work. Nothing changes when i already using this child theme hmmm

 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,562
Reaction score
1,851
Hey Michal, I should have accounted for this in the drop-in but this is a simple fix luckily!

Go to Appearance > Editor and make sure you are editing your child theme (should be editing by default). Then open the content folder, loop-blocks.php and scroll to the very bottom and remove this simple code:

CSS:
<div class="post-block-footer">

	<a href="<?php comments_link(); ?>" class="comments-link">
		<span><i class="md-icon-chat"></i> <?php comments_number( '0</span> Comments', '1</span> Comment', '%</span> Comments' ); ?>
	</a>

</div>
 
Comment

michkocis

Active member
Messages
30
Reaction score
10
Thanks Alex, it worked! 

I also tried to leave just headline and a short description that line stayed there? Could you please help me to get rid of that one too? :)

line.PNG

 
Last edited by a moderator:
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,562
Reaction score
1,851
Sure, remove this CSS from the top of the Blog Blocks styles in your style.css file:

CSS:
.post-block-inner {
	border-bottom: 1px solid #ddd;
	padding-bottom: 26px;
 
Comment

michkocis

Active member
Messages
30
Reaction score
10
Thank you, Alex! It worked. But I`ve got 1 more question. These blocks look amazing. I am just creating one niche site now and when it comes to design I need to achieve just 1 change.. just 1!! I am trying to get those elements as you see in attachment ( as it is at startup bros )  Any idea?  / I know you are busy with clients, I watch stream all the time so I will wait! ;) THANKS

capture1.PNG

 
Comment

michkocis

Active member
Messages
30
Reaction score
10
Alex please can you answer with any idea? i actually need to get those 2 elements back under the grey line just as it is on startupbros site. Rest i all managed on my own. I almost have site ready just copying blog layout from startup bros :S i hope i am not gonna get punished :)) Thanks!

 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,562
Reaction score
1,851
No punishment! If you could remind me again your website URL I will be happy to get this resolved for you.

 
Comment

koalafied

New member
Md
Messages
4
Reaction score
1
Location
Florida & New York
Website
koalafied.net
Hi Alex, I am getting an error when putting the code in my functions.php file.

Your PHP code changes were rolled back due to an error on line 103 of file wp-content/themes/md-child-theme/functions.php. Please fix and try saving again.

syntax error, unexpected ';'

if ( md_has_teasers() && ( is_home() || is_search() || is_archive() ) )
 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,562
Reaction score
1,851
Hey @itconsulting, this Drop-in is no longer required as the Blog Blocks template is now built into MD's settings. Go to WP admin > MD > Site Design > Content > Archive Loop to select the "Blog Block" loop instead.
 
Comment

koalafied

New member
Md
Messages
4
Reaction score
1
Location
Florida & New York
Website
koalafied.net
Hey @itconsulting, this Drop-in is no longer required as the Blog Blocks template is now built into MD's settings. Go to WP admin > MD > Site Design > Content > Archive Loop to select the "Blog Block" loop instead.
How do I make my blog feed jus show an excerpt or summary instead of the entire post? I write long articles and would rather just an intro with a read more button to the full article. Can you help me with this please?
 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,562
Reaction score
1,851
How do I make my blog feed jus show an excerpt or summary instead of the entire post? I write long articles and would rather just an intro with a read more button to the full article. Can you help me with this please?
In the same settings beneath the "Post Content" heading you can change the post text from full to excerpt.
 
Comment
Top