How can I make a blog list .tpl - like http://www.bcgurus.com/blog

[mrstylist]

Hi all,

Sorry in advance for this noob ? BUT

How can I make a blog summary preview list .tpl - like you can find at http://www.bcgurus.com/blog

I like the thumbnail preview with the list of summary blog previews and the pagenation at the bottom.

Anyone with a tutorial or happy to share some BC .tpl & CSS code ?

Cheers

[Alex_Pavelescu]

Hello!

Before the adoption of Liquid, it was a little complicated to design a blog list layout that would also display a thumbnail. This issue can now be addressed by using a simple Liquid logic on the list layout page:

{{'{tag_itemurl_nolink}' | split:'/' | last}}

So if you want to use somepicture.jpg as the thumbnail for your blog at yoursite.com/blog/my-blog-name that means that you have to rename the picture to my-blog-name.jpg. With that in place, make sure you have all thumbnail pictures stored in the same location on your site, and place this line on your blog post list layout, wherever you want the thumb to appear::

<a href="{tag_itemurl_withhost}"><img src="/images/blogposts/{{'{tag_itemurl_nolink}' | split:'/' | last}}.jpg"></a>

The list layout is located at yoursite.com/Customize/BlogTemplates.aspx?ID=6

That's all there is to it. Here's a working example: http://liquidexamples.worldsecuresystems.com/blogs-thumbnails-on-list-layout

Kind Regards,

Alex Pavelescu

[mrstylist]

Hello Alex,

Many thanks for this.

May I ask what to do with 404s. If there is no image to src from?

Cheers

[Alex_Pavelescu]

Hello!

You could add a background to the div containing the image, meaning that all thumbnail placeholders will default to a generic image when no relevant thumbnail is loaded.

http://prntscr.com/7n104i

Kind Regards,

Alex

[mrstylist]

Hi Alex,

Thank you.

[Liam Dilley]

Alex, you do not need to do the old tag inside liquid like that when you got the native liquid data

[mrstylist]

Hi Liam,

Cheers, could you please give an example? I would like to understand.

[Liam Dilley]

With liquid an item's url is just url - {{url}} So to use it in liquid..

{{url | split:'/' | last}}

A lot cleaner

[Alex_Pavelescu]

Ups, oversight on my end sorry about it, the example given is actually using the proper "full-liquid" approach, forgot to update the example as well!