Related Posts On Demand

Topics: Controls
Mar 30, 2011 at 1:44 AM

I've made some minor adjustments to the related posts control that give quite a nice visual effect.

Example click on the suggested further reading link and the toggle comments.

Now that JQuery is included out of the box with BE ver 2, might as well use it.

To avoid cluttering up posts, I thought it might be quite a good idea if related posts could initially be hidden, with the option to view via a link.

The code adapts the toggle comments JavaScript which it's also applied to, if you check the example you will see what I mean.

BE is first class and I think one of the reasons why people go with WordPress is presentation, some of the themes are undeniably very slick, with liberal sprinklings of nice touches.

This might not be everyone's cup of tea, but it's just an effort to show what you can do with BE, if you think it's OK then leave a comment and I will post the details.

Mar 30, 2011 at 12:06 PM

I like that! Could you post the details?

Mar 30, 2011 at 9:22 PM
Edited Mar 31, 2011 at 1:12 PM

3 steps, assumes BE default styling (alter to suit)

1

In App_Code\Controls\RelatedPosts.cs swap the CreateList function with this:

 

private void CreateList(IEnumerable<IPublishable> relatedPosts)
        {
            var sb = new StringBuilder();

            const string LinkFormat = "<li><a href=\"{0}\">{1}</a>";
            const string DescriptionFormat = "<span> - {0}</span></li>";
            //sb.Append("<h3 id=\"related\">" + headline + "<a  id=\"toggleRelated\"title=\"Show related posts\" style=\"float:right;width:20px;height:20px;border:1px solid #ccc;text-decoration:none;text-align:center\" href=\"javascript:toggle_visibility('relatedPosts', 'toggleRelated');\">+</a></h3>");
//Edit: Might as well use the substitution on the +++
sb.Append("<h3 id=\"related\">+++<a  id=\"toggleRelated\"title=\"Show related posts\" style=\"float:right;width:20px;height:20px;border:1px solid #ccc;text-decoration:none;text-align:center\" href=\"javascript:toggle_visibility('relatedPosts', 'toggleRelated');\">+</a></h3>");
            sb.Append("<div id=\"relatedPosts\">");
            //sb.Append("<p>+++</p>");
            sb.Append("<ul class=\"relatedList\">");

            var count = 0;
            foreach (var post in relatedPosts)
            {
                if (post != this.Item)
                {
                    sb.Append(string.Format(LinkFormat, post.RelativeLink, HttpUtility.HtmlEncode(post.Title)));
                    if (this.ShowDescription)
                    {
                        //Utils.StripHtml added to prevent possibility of croped HTML tags in post description messing up code.
                        var description = Utils.StripHtml(post.Description);
                        if (description != null && description.Length > this.DescriptionMaxLength)
                        {
                            description = string.Format("{0}...", description.Substring(0, this.DescriptionMaxLength));
                        }

                        if (String.IsNullOrEmpty(description))
                        {
                            var content = Utils.StripHtml(post.Content);
                            description = content.Length > this.DescriptionMaxLength
                                              ? string.Format("{0}...", content.Substring(0, this.DescriptionMaxLength))
                                              : content;
                        }

                        sb.Append(string.Format(DescriptionFormat, description));
                    }

                    count++;
                }

                if (count == this.MaxResults)
                {
                    break;
                }
            }

            sb.Append("</ul>");
            sb.Append("</div>");
            Cache.Add(this.Item.Id, sb.ToString());
        }

 

2

In User controls\CommentView.ascx swap the function toggle_visibility (bottom of page) with this:

 

<script type="text/javascript">
    function toggle_visibility(id, id2) {
        var e = $("#" + id);
        var h = document.getElementById(id2);
        if ($(e).is(":visible")) {
            $(e).hide("normal");
            h.innerHTML = "+";
            h.title = "Show";
        }
        else {
            $(e).show("normal");
            h.innerHTML = "-";
            h.title = "Hide";
        }
    }
</script>
Google for options on the JQuery show and hide functions.

3
Somewhere in the theme CSS add this:
#relatedPosts { display:none; }
#related { margin-bottom:0;}

 

Mar 30, 2011 at 9:31 PM

Thanks Andy for nice tweak changes in related posts. I like it.