RKN Studio News & Big Ideas

Business Catalyst: Controlling the Blog Post Excerpt by Kim Joy Fox

Business Catalyst - Using jQuery to control the Blog Post ExcerptBusiness Catalyst can be a great setup for many businesses, but it can also come with big headaches. While creating a recent site in BC, I needed to extract the most recent blog post and add both the image and an excerpt of the blog to the home page.

Here’s how to make it work using the beautiful jQuery library.

Install jQuery

I figure you already know how to, but just in case, don’t forget to add the jQuery library to your page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

The link above just links to the Google jQuery 1.7.1 library. Update as necessary.

Editing the Blog Post List Module

You’ll need to confirm that the Blog Post List Module is ready to be used, so go to Site Manager -> Module Templates -> Blog Templates -> Blog Post List Layout.

Switch to the HTML view (tab at the bottom of the textbox) and take a look at what you’ve got.

You’ll want it to look something like this:

<div class="blog-post">
<h2 class="post-title"> {tag_blogposttitle} </h2>
<div class="post-body"> {tag_blogpostbody}
<div class="links">
<a href="{tag_permalinkonly}">Read More...</a></div>

First, we put the whole thing in the class “blog-post”. Then each area is separated out – “post-title” and “post-body” as well as the read more link – “links”. This will allow jQuery to accurately grab each of these sections and manipulate them.

Add the Blog Module to the Home Page

Next you’ll need to add that module to the home page. To add it, go to your home page (or wherever you’re adding it) and add the module using the Toolbox on the right side. It should look something like this:


Make sure you add this module under a Div with an ID. That way, when we reference it in our jQuery, we can make sure we only deal with this specific iteration of the blog post list, in case you want to reuse this module somewhere else on your site.

Now we’re all set up for you to add in some magic jQuery.

The jQuery

So here are the steps we’ll need to take to accomplish our goal:

  1. Get the permalink for the blog
  2. Get the image within the blog (since we’re moving this to the front of the blog)
  3. Get the text within the blog
  4. Remove the image from the blog text (we don’t want it showing up twice!)
  5. Change the post to an excerpt only
  6. Add everything into our Div the way we want it to show
  7. Wrap any other items outside of our Div with the link

And here’s what our jQuery looks like: *note that #Hnews is the Div that I added the module into.

var linkKF = $('#Hnews #container h2.post-title a').attr('href');
var imageBlog = $('#Hnews .post-body img').attr('src');
var blogcontent = $('#Hnews .post-body').html();
var blogcontent = $(blogcontent).find("img").remove().end().html();
var stringBlog = $.trim(blogcontent).substring(0, 100);
$('#Hnews .post-body').html('<center><div class="blogImage"><a href="'+linkKF+'" ><img src="'+imageBlog+'" style="clear:both;" /></a></div></center>'+stringBlog+'...');
$('#HnewsLink').wrap('<a href="'+linkKF+'" >');

Each line in our jQuery matches up with the steps I said before, so it should be pretty self-explanatory.

In the final result (Step 6), we add the link to the image (line 6). In the final line in our jQuery, I had a separate extra link outside of the “#Hnews .post-body” Divs that needed to be a link as well, which is why it’s not included in line 6.

Do you have another way you do this? Let me know!

radminBusiness Catalyst: Controlling the Blog Post Excerpt by Kim Joy Fox

Related Posts