Display latests blog posts in 3 columns

Post Reply
NoWords
Jr. Bludit
Posts: 4
Joined: Fri Feb 09, 2018 7:25 am

First of all hi Everybody :) :D

I have 2 small questions related bludit and a theme I am using with it:

Theme: https://themes.bludit.com/theme/clean-blog
  • Is it possible to display the latest blog posts in a row made of 3 columns? Please see attachemnt.
  • How can I render only latest 10 posts and then a "Load More Button"?
Thanks in advance :)
Attachments
Example
Example
Posts.jpg (85.27 KiB) Viewed 3369 times
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

NoWords wrote: Fri Feb 09, 2018 7:48 am
  • Is it possible to display the latest blog posts in a row made of 3 columns? Please see attachemnt.
This is possible modifying the theme (CSS). You can use for example flexboxes:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • How can I render only latest 10 posts and then a "Load More Button"?
This can be set at "Settings" > "Advanced" > "Items per page".
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
NoWords
Jr. Bludit
Posts: 4
Joined: Fri Feb 09, 2018 7:25 am

Thanks Edi,

As you said in chat I will wait for you to post a hint on how to display different blog posts in the different columns :)
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

1) Open the template home.php of the theme (in /bl-themes/clean-blog/php) and modify line 18:

Exchange

Code: Select all

<div class="col-lg-8 col-md-10 mx-auto masonry">
with

Code: Select all

<div class="flex-container">
2) Activate the plugin HTML Code, click "Settings" and enter the following in the field "Theme Head":

Code: Select all

<style>
.flex-container {
   display: flex;
   display: -webkit-flex;
   justify-content: stretch;
   margin: 40px 0;
}
    	
.post-preview {
   margin: 0 30px;
   text-align: left;
   width: 30%;
}
</style>
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
NoWords
Jr. Bludit
Posts: 4
Joined: Fri Feb 09, 2018 7:25 am

Edi wrote: Fri Feb 09, 2018 6:23 pm 1) Open the template home.php of the theme (in /bl-themes/clean-blog/php) and modify line 18:

Exchange

Code: Select all

<div class="col-lg-8 col-md-10 mx-auto masonry">
with

Code: Select all

<div class="flex-container">
2) Activate the plugin HTML Code, click "Settings" and enter the following in the field "Theme Head":

Code: Select all

<style>
.flex-container {
   display: flex;
   display: -webkit-flex;
   justify-content: stretch;
   margin: 40px 0;
}
    	
.post-preview {
   margin: 0 30px;
   text-align: left;
   width: 30%;
}
</style>
Hi Edi,

Thanks this works perfectly on desktop, but how can I display 1 column on mobile devices?

Shall I put the @media queries also in the "Theme Head"?
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Oops, yes! I forgot this... :oops:
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
NoWords
Jr. Bludit
Posts: 4
Joined: Fri Feb 09, 2018 7:25 am

Edi wrote: Sat Feb 10, 2018 7:36 pm Oops, yes! I forgot this... :oops:
It’s ok :)

Question: how come you suggest the flex solution and not to work with bootstrap columns?
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

NoWords wrote: Sat Feb 10, 2018 8:20 pm Question: how come you suggest the flex solution and not to work with bootstrap columns?
I do not use Bootstrap, because I prefer simple coding instead of frameworks.

It could make sense, if a theme uses Bootstrap. But Bootstrap also uses flexboxes:

https://getbootstrap.com/docs/4.0/layout/grid/

and

https://medium.com/codingthesmartway-co ... 5405ce5ebf
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
Post Reply