Hi, I am new to treeple and now I need to display only the first paragraph of some blog posts, I am wondering if it is achievable? If it is, could anyone give a hint?
I noticed there is a " truncate" in Liquid, but it can only apply to a single string?
Many thanks!
Hi, @Linda
Unfortunately, you canât display the first paragraph of a blog post. However, you can use Liquid filters:
Before these filters you must use âstrip_htmlâ filter which removes any HTML tags from a string. For example, {{this[âDescriptionâ] | strip_html | truncatewords: 3 }}
Hi @Irene
Thank you so much for your quick reply!
In this case, I guess I cannot use a single component to display all the posts I want to put on the webpage.
I am sorry to ask this silly question, but I looked through the Liquid website https://shopify.github.io/liquid/basics/truthy-and-falsy/
and the documentation of Treepl https://docs.treepl.co/documentation_group/content-modules/blogs.
Unfortunately, I didnât find any documentation that explained how to set Liquid for one page?(I suppose I need to do the setting before I can use {{this[âDescriptionâ] | strip_html | truncatewords: 3 }}?)
Could you please tell me where you learned how to set the Liquid object for one page? Thank you so much!
Hi @Linda. Welcome to Treepl 
Can you elaborate what you mean by âhow to set the Liquid object for one pageâ?
The truncatewords filter will work on your description tag in both your list layouts and detail layout, or anywhere you want it.
Here is some sample code for Blogs which uses the truncate method in the list layout (scroll right to the bottom of this page):
https://docs.treepl.co/demo-custom-blog
Let me know if I havenât understood what you are after exactly.
Hi @Adam.Wilson.
Thank you for your reply! I have learned much from your posts in this forum. However, I still have some questions, I would be really appreciated if you could help me.
In the first General Blog Layout, there is a component:
{% component source: âBlog Postâ, layout: ââ, sortBy: âreleaseDateâ, sortOrder: âDESCâ, limit: â1000â, collectionVariable: âallPostsâ, type: âmoduleâ %}
I was wondering where I could set the âcollectionVariableâ? You must have combined the name âallPostsâ to your posts, so you can use " allPosts.items" to get your real posts.
In the Post List Layout, similar situation here, do you need to define or combine a Liquid object to your blog? So you can use âhref="{{this[âUrlâ]}}"â to get the url of your post? Otherwise, it doesnât know what âthisâ represents.
Thank you so much for your help!
Sure @Linda, youâre welcome.
That first component tag gets all the blog posts and passes then to a Liquid collection (notice the normal Layout is suppressed with layout: ""). But this is only used for getting all the tags and categories assigned to all the posts.
But yes, since I used âallPostsâ as my collection name, we then use that as the starting reference to access the Liquid items within that collection.
inside Layouts this refers to the item/collection already being output by the component tag, so the system knows what this is already., so you donât need to define it.
Does that make sense?
Hi @Adam.Wilson,
Thank you for your replay! I tried to reproduce the first example, but there seems to be something wrong, here are my steps:
@Adam.Wilson
I am so sorry, I just hit the spacebar and it posted before I finished itâŚ
The above is all the settings for the two posts in the Blog-home folder. And I copied the codes from the first example and pasted it in my treepl, but it didnât work as expected. I was wondering if I missed any settings?
Thank you so much!
No problem @Linda. So what is the issue you are currently seeing? Are posts not being listed out?
Are you able to share a link to the trial site?
PS: Tags does not need to be set to âallPostsâ. But that will not likely be causing any issues.
Hi @Adam.Wilson I think I figured it out.
I used to put the example codes in a Page (a file created under Content/Pages), so I keep asking how to bind âthisâ to the specific post I want to display since the Page and the Post are different file. Just now I put your second example codes in the Post, and the truncatewords filter did work.
I was wondering if it would be possible that I could put
{{this[âDescriptionâ] | strip_html | truncatewords: 50}}
in somewhere else other than the post itsefl? Because I want it to display from a Page.Thank you so much!
Yes, you would put any tags like this in the Blog Postâs layouts (Detail layout or List layout, or any other custom layouts you make).
You can then list posts onto a page via a component tag⌠something like this:
{% component source: "Blog Post", layout: "List", filterBy: "parentid", filterValue: "1234", type: "module" %}
where filterValue: "1234" needs to be the ID of your Blog.
Or if you only have one Blog, you can just omit the filter and do this:
{% component source: "Blog Post", layout: "List", type: "module" %}
This should list all your blog posts onto a page (or wherever you place it) so long as you have a âBlog Post Layoutâ called âListâ.
Hi @Adam.Wilson Thanks for all your detailed and quick replies!
Yes, I found it on the Treepl documentation and put it in my Page:
{% component source: âBlog Postâ, layout: âListâ, filterBy: âparentidâ, filterValue: â2020â, sortBy: âreleasedateâ, limit: â3â, type: âmoduleâ %}
It worked great, but besides the title and image, I still need to display some text from the post, I was wondering if there could be a way that I could use something like this {{this[âDescriptionâ] | strip_html | truncatewords: 50}} in the Page?
Thank you!
Absolutely. For this youâll want to edit your âListâ layout.
So, in the Admin, go to âContentâ > âBlogsâ
Then click on the âEdit Settingsâ button at the top and select âLayoutsâ from the dropdown.
Now go into the âListâ layout under the âBlog Post Layoutsâ heading:
So in the Demo Site example, the âListâ layout looks something like this:
Hi @Adam.Wilson
Thank you so much! Adam you are a life saver!
By creating a new Blog and putting the second post in the new Blog, It is now working exactly as expected!
Thank you so much!
Ok great! Glad you got it working
