<< Picasa for BlogEngine | Commentor – new version >>

Post Pager Control

25. January 2009 14:53 by rtur.net in BlogEngine // Tags: blogengine, controls // Comments (14)

When you have lots of pages on your blog, moving through using just “next” and “previous” buttons doesn’t cut it. It seems like a small thing, but if you look at most sophisticated web 2.0-style sites with large volume of content, they all go into the long way to provide good navigation. Because it is important for your users to feel good, and some get really dizzy when they don’t understand where they are. I made this control to provide such a post navigation for BlogEngine blogs. The best way to understand how it works is to take a look at the picture below.

As you progress through the pages, your current page is always tend to be in the middle and links to the most resent and oldest posts are always on the navigation menu so that you can jump to the end or to beginning at any time.

This functionality will likely be part of the standard BE 1.5 release, but if you want to use it right now, you can easily do so.

Download and unzip files to your local drive.
Move PostPager.cs to the ~/App_Code/Controls in your blog installation.
Override ~/User controls/PostList.aspx.
Copy and paste styles from Style.txt into your theme’s style sheet.

You might want to adjust style if it does not match your blog’s color scheme. This control produces unsorted list that you can style whichever way you like.

<ul id="PostPager">
    <li class="PagerLinkDisabled">Next posts</li>
    <li class="PagerLinkCurrent">1</li>
    <li class="PagerLink"><a href="/default.aspx?page=2">2</a></li>
    <li class="PagerLink"><a href="/default.aspx?page=3">3</a></li>
    <li class="PagerLink"><a href="/default.aspx?page=4">4</a></li>
    /* more code here */
    <li class="PagerEllipses">...</li>
    <li class="PagerLink"><a href="/default.aspx?page=32">32</a></li>
    <li class="PagerLink"><a href="/default.aspx?page=33">33</a></li>
    <li class="PagerLink"><a href="/default.aspx?page=2">Previous posts</a></li>
</ul>

Let me know if you run into the bug or have suggestion how to make it better.

PostPager.zip (2.90 kb)

UPDATED for 1.6.1 (if already installed, only files in user control folder need to be refreshed)

PostPager_161.zip (4.55 kb)

Writing extensions for BlogEngine 1.4 (part 4)Default admin interface for extensions in BlogEngine works fine in most cases and very easy to use. ...Spam counter controlI’ve been playing a lot with Commentor and Waegis lately and got a little tired of having to g...Tutorial - Building NivoSlider Extension (Part 2)Creating Repository HTML code we added to site.master can be moved to user control (1), so we&rsquo...

Comments (14) -

Gunner
1/27/2009 6:00:49 PM #

Fantastic extension. I'll give it a try it sure!!!

Greetings from [url=www.gunner.es]Spain[/url].

P.d.: Any news on release date of BE 1.5?

Gunner
1/29/2009 6:58:38 AM #

Fantastic extension. Already installed on my web site at:

http://www.gunner.es

Greetings from Spain, Gentleman!!!.

P.d.: Any news on release date of BE 1.5?

rtur.net
1/29/2009 9:51:21 AM #

Looks good, Gunner ;) 1.5 release date should be soon - it mostly depends on Mads coordinating few wrap-up tasks, like nested comments etc.

Nick Harrington
1/29/2009 10:04:36 AM #

Excellent component! Really helps expose the quantity of content better than Next/Previous. Minor featurette where page-volume is 100+. URL below shows wrap on Page Previous when managing large # of pages.
http://www.mostlysafeforwork.com/default.aspx?page=145

rtur.net
1/29/2009 11:08:50 AM #

Nick, In PostPager.cs, in the line:

int maxPages = 12; // should be more then 4

change maxPages from 12 to 10 - that should fix it for you. This is going to be a setting in the future, because number of pages you want in the control is dependent on the page width which can vary.

David Miles
1/29/2009 7:17:40 PM #

Um - not sure if this is right - I view all posts, the new pager bar is right, let's say it shows 10 pages of posts available - then view all posts in a category ... it still shows the 10 pages - almost as though although the posts are filtered, the pager bar is not

rtur.net
1/29/2009 11:47:02 PM #

You right David, it did not play well with categories. Re-download it if you need the fix. As you can see if you go to "BlogEngine" category on my site, it will only show 4 pages now - as it should.

Nick Harrington
2/2/2009 5:40:06 AM #

Changing maxPages = 10; fixes that minor "featurette". Thanks! Nick

deedee
2/24/2009 5:00:48 PM #

Very nice Extension. Works as expected out of the box. The only little thing i had to change was in User controls\PostList.ascx.cs, Line 100 and in PostPager.cs Line 68 path += "&"; to path += "&"; for XHTML validation. (think it was same before in the orgiginal be-build.)