• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
1

Dividing blog posts automatically with a "Read more" function?

Guest
Jun 06, 2012 Jun 06, 2012

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)

TOPICS
Content management and modules

Views

5.4K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

New Here , Mar 11, 2015 Mar 11, 2015

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">}

Votes

Translate

Translate
LEGEND ,
Jun 06, 2012 Jun 06, 2012

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jun 06, 2012 Jun 06, 2012

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 06, 2012 Jun 06, 2012

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 06, 2012 Jun 06, 2012

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}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 06, 2012 Jun 06, 2012

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jun 06, 2012 Jun 06, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 07, 2012 Jun 07, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jun 07, 2012 Jun 07, 2012

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 07, 2012 Jun 07, 2012

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 12, 2012 Oct 12, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 12, 2012 Oct 12, 2012

Copy link to clipboard

Copied

I did mention that is war I use 😛

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 23, 2012 Nov 23, 2012

Copy link to clipboard

Copied

Does this technique only apply to blog post or can it be used in product description as well?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Nov 27, 2012 Nov 27, 2012

Copy link to clipboard

Copied

Hi Jeaneve,

No, this does not work for product description.

Thanks,
Florin

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 29, 2012 Nov 29, 2012

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).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 11, 2015 Mar 11, 2015

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">}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 23, 2015 Jun 23, 2015

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>}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 23, 2015 Jun 23, 2015

Copy link to clipboard

Copied

LATEST

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>}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines