fusiongrokker

Related Entries plugin for Mango Blog

This plugin has been a long time in the making. It's something I knew from the outset that I would want in Mango, but after getting my feet wet by writing a few other small plugins, I knew I could do it. I made it as simple as I could, but there are still a couple of things you will need to know; one of which is that you might need to modify your theme to broadcast a new event in a couple of places. This new event is going to be a part of future versions of Mango, so there isn't any worry about future-compatibility and worries when upgrading.

First of all, though you need a small update to the core of Mango. Even if you've got the latest version of Mango (1.1)! Laura posted a comment on the plugin ideas page with a link to the update zip file, and an explanation that it included a new plugin (home page chooser), some core modifications that were needed to support that plugin, and most importantly, some bug fixes — one of which is necessary for back-linking of related entries to work correctly. So before you do anything else, make sure you grab and install that update!

Once you've got the Mango update installed, go ahead and download my Related Entries plugin.

Now about that event. It's really simple to add. Open up your theme's index.cfm and post.cfm files (and archives, and other places you may want to show related entries…). The code to broadcast the event is really simple:

<mango:Event name="beforePostContentEnd" />

Simple, right? And where do you put it? Anywhere, really… within reason. It uses contextual information to look up related entries data for the current post, so you must broadcast it inside of a <post> (custom tag) block. So for example, here's the relevant information from my theme's index.cfm template:

<mango:Posts count="5">
    <mango:Post>
        ...
        <mango:Event name="beforePostContentEnd" />
        <p class="date">Posted in ...</p>
        ...
    </mango:Post>
</mango:Posts>

That's almost it! After you install the plugin, and add the event broadcast to your theme, there's just 2 more things.

First, relate a couple of entries. Edit a post, and look at the bottom of the form.

Related Entries Screenshot

This new section should be displayed at or toward the bottom of the form. As it explains, you select a category from the left column to see its entries from the selected categories (use control to select multiple). Then click on any entries from the center column that you want to relate to the current entry; they will be displayed in the right column. (This is all done with jQuery ajax!) To remove an entry from the right column, double click it. When you submit the form, the posts in the right column will be marked as related to the current entry; and in addition to that, the current entry will be related to those posts.

When you submit the form, if you get an error that looks like this, then you didn't install the update!:

Related Entries Install Error

If you don't get the above error, then your data should be good to go. Now, you just need to style it.

When you've got related entries data, the event you're broadcasting is going to be replaced with some code along this line:

<div class="related">
<h2 id="RelatedEntries">Related Entries:</h2>
<ul>
    <li><a href="http://server/post/your-post">Post Title</a></li>
    <li><a href="http://server/post/your-post">Post Title</a></li>
    <li><a href="http://server/post/your-post">Post Title</a></li>
</ul>
</div>

So, you can define some css rules for .related, #RelatedEntries (or .related h2), and .related ul, .related ul li, .related ul li a.

That's it. Enjoy!

One note for the future: The update I talk about above should be included in Mango 1.2, so if you've got 1.2 (or later) installed, don't worry about the update.

In case you missed the link before, you can Download my Related Entries Mango Blog Plugin right here.

Related Entries:

Posted in AJAX | ColdFusion | JavaScript | Mango | My projects | 23 Responses  

23 responses:





Leave this field empty: