View blog posts as grid

Ben55
New Member
4 0 0

How do I show my blog posts as grid?  

For example http://www.shopsocietysocial.com/blogs/the-social-diary?view=grid

 

0 Likes
Jason
Shopify Expert
10272 144 1942

The theme that site is using either came with - or they had made - an alternate template for blog.liquid. If your theme does not have this built in (and I don't think yours does) it's something you'll need to make. You could take some inspiration from the product page in terms of html layout.

Once made you can then link to the blog with the ?view=template-name parameter to toggle between the normal and grid view.

More info on alt templates:
http://docs.shopify.com/manual/configuration/store-customization/page-specific/store-wide/can-i-crea...

 

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Ben55
New Member
4 0 0

Thank you Jason!

You are right, I think the site that I posted had made an alternate template. Their developer describes her work here http://zoerooney.com/blog/web-development/shopify-template-views-blogs/

I tried to do the same and created a blog.grid.liquid template but I don't know what changes I need to make to it so that it displays the blog posts as grid - and that's my question. Do you know what code I need to change/paste into my new alternate template to make it a grid?

0 Likes
Jason
Shopify Expert
10272 144 1942

It's not going to be one change, nor a simple copy and paste either. Each theme is different as well so you can't just paste something in from another one. If you're planning on DIY make sure you do all of this in a theme copy. Do a search and see if someone has done this already - you might get lucky. 

I could give you some rough direction here on the forums but you'd be doing most of the legwork.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Ben55
New Member
4 0 0

Thanks. I don't mind trying to do it myself. What's your rough direction?

0 Likes
Brenda10
New Member
3 0 0

Hi Ben and Jason,

I am having the exact same issue trying to present my blog page as a grid.

Any help would be much appreciated!

 

 

0 Likes
Jason
Shopify Expert
10272 144 1942

@Ben - I see you've unlinked your site from your profile. I *might* still have an email you sent me a while back but if not you'll need to at least post the theme you're using. I don't remember what it is and it's much harder for the forum members to help if they can't see it in action.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Ben55
New Member
4 0 0

Thanks Jason. Just put it back on there. 

0 Likes
Jason
Shopify Expert
10272 144 1942

See if this snippet gives you some ideas. This would give you a very, very basic four to a row grid that would form part (but not all) of the mobilia blog template.

<div class="sixteen columns article">
{% for article in blog.articles %}
  <div class="four columns blog_content{% cycle 'alphaomega': ' alpha','','', ' omega' %}">
    <h2><a href="{{ article.url }}" title="{{ article.title | escape }}">{{ article.title }}</a></h2>
    {% if article.excerpt != blank %}
      {{ article.excerpt }}
      <p class="continue_reading">
        <a href="{{ article.url }}" title="{{ article.title | escape }}" class="action_button">Continue Reading &gt;</a>
      </p>
    {% else %}
      {{ article.content }} 
    {% endif %}        
  </div>
{% cycle 'rowclear': '','','', '<div class="clearfix"></div>' %}
{% endfor %}
</div>

 

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
George_Lav
Excursionist
22 0 8

Hello @Jason , where should I copy paste the code you provide us?

0 Likes