Copy link to clipboard
Copied
In our company the Business Catalyst blog will be used by several users, most of them without any HTML knowledge. At the moment the full blog posts are being showed on the blog frontpage, but I would like to divide the posts and include a "Read more" function.
I know this is possible with the {tag_blogpostbodypreview}, but I can't seem to figure out an easy way to do it. Will I really have to insert <p></p> tags where I want the content to start and finish? I know trouble will come of this when users without any knowledge start blogging.
Isn't there an easier way to tell BC to divide the posts? Maybe after a certain amount of words or characters? Or even better, just by inserting a tag of some kind where I want the "Read more" function to come in place? (in case I want it after a picture or a video)
Notice that you can easily add an image button instead of the "Read more" text by adding the img src="" html code inside the "blogpostbody" tag.
On BC, open the develop mode and go to Blog --> postlist
By exemple, you can add this code directly inside the tag :
<div class="post-body"> {tag_blogpostbody,400,</br><img src="http://nsa33.casimages.com/img/2015/03/11//150311020843942706.jpg" align="right">} |
Copy link to clipboard
Copied
for proper markup and to properly enable search engines to know your content your content should be in p tags anyway. Not doing a lot if you have website content thats not.
In the page editor in the admin for the blog editor (slightly different from the page editor) you select your text and choose the format dropdown and choose "normal". This will wrap the content in a p.
For web pages in the same dropdown you choose "Paragraph" to do the same.
First paragrap will be the first part of the blog to use as the preview. Pretty straight forward really
Copy link to clipboard
Copied
Yeah, that wasn't so hard For my test posts I have just pasted in placeholder text, and this text did not get the <p> tags automatically attached to them, so I feared the user would have to manually place the <p> tags. I didn't know I could just select all and choose "normal" to make it right. Well, this should solve my problem! Thank you!
Copy link to clipboard
Copied
Hello,
Alternatively to what Liam just proposed, you can also use {tag_blogpostbody, 100} to display the first 100 characters from each blog post. You can replace 100 with whatever number of characters you want.
{tag_blogpostbodypreview} will always show the content of the first <p> </p> tag, so you can instruct the client to ue the formatting options from the Editor to create paragraphs, as Liam pointed out.
Hope this helps!
Cheers,
Florin
Copy link to clipboard
Copied
Thanks Florin,
I wasn't aware of your method. I like that method better. Question though, do you need to add your link text to that?
Example: {tag_blogpostbody,100,Read More}
Copy link to clipboard
Copied
Hi Brad,
If you use {tag_blogpostbody, 100} the system will render the first 100 characters and a link to the full post
If you use {tag_blogpostbody,100,Read More} the sistem will render the first 90 characters and the "Read More" text will be a link to the full blog post.
Cheers,
Florin
Copy link to clipboard
Copied
NOTE: The chracter limiting method will strip all HTML from those first 100 characters. {tag_blogpostbodypreview} will render the first block element.
Copy link to clipboard
Copied
Is there any talk of impleneting a readmore button in the wysiwig editor similar to Wordpress... or any other blog patform really.
Being limited to the contents of the first block element or 100 characters makes featured images and workabale previews tricky.
Copy link to clipboard
Copied
That's my recommendation in the ticketing system. It's be great to be able to place something like <!--read-more--> inside the body of the post, which is what WP does, and have the text cut off there and replace it with button. I think there are even more elegant ways to do it, but the limitations of the current framework are know to the eng team.
-m
Copy link to clipboard
Copied
That is why I did not mention that one Mario so that's a useful point.
I like to do things like have an image in blog post intros etc
Copy link to clipboard
Copied
Just discovered a great fix for this. Since the tag {tag_blogpostbodypreview,Read More} does only display content within the first paragraph tags, simply move all desired content to be within the first <p> tags. Use span and line break tags to format text appropriately. Can also use this to display images within the preview post in list view.
Copy link to clipboard
Copied
I did mention that is war I use 😛
Copy link to clipboard
Copied
Does this technique only apply to blog post or can it be used in product description as well?
Copy link to clipboard
Copied
Hi Jeaneve,
No, this does not work for product description.
Thanks,
Florin
Copy link to clipboard
Copied
Thank You Florin,
I'm a newbie to BC and I think I figured out that basically this can be accomplish with the individual product small module, native to BC or some JS available at a third party (Quick product view).
Copy link to clipboard
Copied
Notice that you can easily add an image button instead of the "Read more" text by adding the img src="" html code inside the "blogpostbody" tag.
On BC, open the develop mode and go to Blog --> postlist
By exemple, you can add this code directly inside the tag :
<div class="post-body"> {tag_blogpostbody,400,</br><img src="http://nsa33.casimages.com/img/2015/03/11//150311020843942706.jpg" align="right">} |
Copy link to clipboard
Copied
Does this only apply to images? I tried implementing a DIV or even a P and got the result I want, but the button doesn't link to the full post - it does nothing...
{tag_blogpostbody, 350, <br/><p class="btn btn-white">Read More</p>}
Copy link to clipboard
Copied
Span seems to have worked. Sorry - should have tried this before posting. But hopefully it's helpful for others:
{tag_blogpostbody, 350, <br/><span class="btn btn-white">Read More</span>}