Replicating the Blogger blog archive in Drupal

One thing I've noticed a lot of people like about Blogger is the block displaying an archive of posts that expands showing posts in each month.

Of course the easiest method is to let views do this for you; one of the preconfigured views is indeed a monthly archive block, perfect for displaying all the posts for a particular month-year combination. Views also provides a page version of this functionality which I have taken the liberty of enabling here.

This is all right, but what about having some kind of jQuery interaction, instead of a full page load to drill down into further detail what if all the posts were accessible in a dynamic list that expanded when the user clicks on the month. 

Implementation

The functionality I've described above is represented exactly, at the time of writing, in the Blog Archive block in the right sidebar. Rather than repeat the methods I've learnt (and modified/expanded upon) describing similar functionality here or in this blog post, ironically about Drupal and written on Blogger. I will instead simply provide readers with two files that should enable them to quickly implement the same block on their site without following a number of finicky step by step instructions.

I will however provide steps:

  1. Import this views export into views.
  2. Place this javascript file in your theme folder. NB - change the file extension to .js before doing this. The file has .txt extension for security reasons.
  3. Ensure the javascript file is used by the theme by including scripts[] = path/to/archive-block.jsin your theme info file.

One thing I wanted especially was for non-node pages to expand the most recent month and for all node pages to expand the month the specific node was posted. Of course, if you have some js/jQuery knowledge the sky is the limit!

Update

In your views configuration for the 'Content: Post Date' field in the rewrite results section ensure the box that says 'Rewrite the output of this field' is ticked and within the box check it reads:
<span class="collapse-icon">►</span> [created]

If you can't do that then comment here with tales of your woes, if you can then let me know if you like it!

AttachmentSize
Plain text icon blogger_archive_view_export.txt4.19 KB
Plain text icon archive-block.js.txt807 bytes

Comments

it works fine only if all caching parameters in Configuration > Performance properties are disabled.
In fact, If I enable page chaching, as well as javascript compression and so on, it happens that all nodes of the tree are exposed.
Some suggesion?

After trying all combinations in the Configuration > Performance page, flushing cache every time, I found that the issue actually appears when I check the Aggreate javascript files box.
In addition, I saw that my treee looks different from yours because I do not have the black little arrow near the months names.
(Sorry for my poor English)

My first thought when JS breaks after enabling page caching is that there is a JS error somewhere.

I have JS caching enabled on http://adammalone.net and the block works for me so I'd suggest that some other javascript you have on your site is causing the blog archive javascript to fail.

When javascript is aggregated, Drupal takes several different javascript files and puts them all together in one big JS file. Sending one file to users is less of a performance hit than sending many. It also minifies them (removing spaces and line breaks etc). This reduces the overall filesize - reducing the bandwidth required to transfer the file to the user from the server.

If you have an error in another part of the file this can affect other JS on the site.

Having a quick look at your site and checking out the JS errors displayed in chromebug it looks like you are not defining '$' (http://drupal.org/node/171213) in the JS file as I do at the end of my code (http://www.adammalone.net/sites/default/files/archive-block.js.txt) (This maps $ to jQuery). It is useful to limit the scope of your variables so you don't override any globals.

Try surrounding your javascript code with 

(function ($) {
// your file here
})(jQuery);

Good luck!

Hi,
thank you for your reply. I copied your .js file as it was so the "(Function ($)..." is already there.
But now it works even if i use the "Aggregate javascript" option in Configuration > Performance.
Now there are the other issue of the arrow not displayed near the month name and the mouse cursor that do not change.
I have written a custom oltreilcerchio.css file but I think the problem is still an incorrect javascript execution.

My situation:
oltreilcerchio.css file is in css folder inside the subtheme folder named "oltreilcerchio"
The content of oltreilcerchio.css file is:

div.archive-block h3 {
cursor: pointer;
margin: 0;
font-size: 1em;
font-weight: normal;
padding: 6px 0;
}
div.archive-block ul {
padding: 0 0 0 10px;
list-style: none;
}
div.archive-block ul li {
background: none;
line-height: 130%;
padding: 3px 0 5px;
}

The archive-block.js file is in js folder inside the subtheme folder and is unmodified

In my oltreilcerchio.info file I added the two lines:

stylesheet[all][]=css/oltreilcerchio.css
scripts[] = js/archive-block.js

Are there some relative path issue?

In your views configuration for the 'Content: Post Date' field in the rewrite results section try ticking the box that says 'Rewrite the output of this field' and in the box that appears enter:

<span class="collapse-icon">►</span> [created]

According to Firebug my jQuery is being loaded yet it's not taking effect, I imported your views and used your javascript (to make sure it wasn't a miscode on my end), and updated my jQuery but it still doesn't work! I'd really like this fuctionality on my website (hessefamily.ca/test2 is the test page).

Submitted by Adam Malone on

Make sure you have copied the file exactly. I've taken a quick look at your site and noticed the file is not quite the same.

ie:

}); (jQuery)instead of ;})(jQuery);

Submitted by Nateman332 (not verified) on

Thanks! that worked!

Submitted by amit (not verified) on

Hi , you have done a very good job.I did all and working fine with some css alter. But I want to open the recent month content above the view and if I click on any other month list should be expanded and above content should also change to that month's(clicked month) content.

Thanks in advance

Submitted by Surendra Prasad (not verified) on

Hi,
Your post is quite useful and good to be used. But i am little confused about how you can show without arguments and u did not say anything about arguments. I have done what u said in your post but i am not getting what the structure is?
So please clarify it.......
Thanks for ur help

Add new comment