How do I show my blog posts in a grid format?

Tourist
5 0 2

Hi. 

I would like to show our recipes in a better way. We use blog posts for our recipes. How can I show a grid view with image and title, as illustrated in this mockup: https://www.dropbox.com/s/mycrlnqcrf69p2y/Sk%C3%A6rmbillede%202016-07-30%2016.08.07.png?dl=0

Warm regards, Jesper

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Jesper,

Britton here with the Shopify support team.

Changing your blog posts into a grid layout will require a little bit of rewriting the html of blog.liquid. Without knowing which theme you are using I can only offer general advice that you may need to tinker with a bit. For context, I did my changes inside of Supply.

First, find the code blocks that put size restrictions on your blog's containing divs. For me, they looked like this: 

<div class="grid">
  
  <div class="grid__item post-large--four-fifths">
    
    <div class="grid">
      <div class="grid__item post-large--ten-twelfths">

You blog looks like it has containing divs of  <div class="grid-item large--four-fifths"> and <div class="grid-item large--ten-twelfths">. I deleted all of the above and replaced it with this:

<div class="grid">

      <div class="grid__item small--one-whole medium--one-third large--one-quarter" id="blog-grid">

For your theme it looks like you might need to replace it with something more like this:

<div class="grid">
  
  <div class="grid-item small--one-whole medium--one-third large--one-quarter" id=blog-grid">

Next, look at the bottom of the code and remove the extra </div> tags. Because we deleted two divs above there will be two extra that must be deleted. The last step is simply to add this to the bottom of your main CSS file:

#blog-grid {
  display:inline-block;
}

Make sure to back up your theme by duplicating it before attempting these changes. If it's not successful could you let me know which theme you are using? I should be able to give more specific instructions in that case.

-Britton

Britton Shopify Guru
0 Likes
Tourist
5 0 2

Hi Britton, 

Thank you very much for your wonderful inputs. 

It almost works. However I am missing the three columns. Now it looks like this: 

www.colombani.dk/blogs/opskrifter

How do I fix this?

- Jesper 

0 Likes
Tourist
5 0 2

Ps. My theme is "Supply", but you were right about the second code: 

<div class="grid"> <div class="grid-item small--one-whole medium--one-third large--one-quarter" id=blog-grid">

This is showing it best. 

I have tried reading about inline-block, float: left and other ideas to make a grid. It makes no sence to me and nothing I have tried is working :-( 

I hope you can get me the rest of the way...

0 Likes
Shopify Partner
2 0 0

Hey Jesper,

How did you end up solving this?  Thanks!

0 Likes
Tourist
5 0 2

I paid a developer to finish the code for me. 

You can find the code here: 

https://gist.github.com/lixonic/73bfef78662b2e41d867f276eaec26fd

Let me know if you need to contact info on the developer. 

0 Likes
Shopify Partner
2 0 0

Thanks so much!

0 Likes