Tweaking WordPress Archive

I know it has been a long time since i’ve updated my English blog. I will start with something geeky.

I noticed recently some of the image links have been broken on my site. I’m not too sure whether it is because picasa/google photo change or WordPress upgrades that have been auto performed on these blogs(the latter seemed more likely).

I finally had time to fix some of these for Mom’s blog.. While getting her old photos to me to fix her site, Mom asked me if i could also change her archive pages to list all the blog title with links instead of paginated pages with a few full blog content on each. That should be easy i thought, clearly remember the same functionality i saw on blogger.com. Where user can click on a month on the sidebar and a list of blog title will expand under that month.

I went to the WordPress admin page looking for a setting checkbox to check. To my surprise, there is no such function. I started googling and realized that wordpress users have been asking/begging for such a feature since 9 or 10 years ago but there is still no official support!

Eventually i found a few ways that can be used to do what i want. Documenting them here in case someone else is looking for such a feature.

After getting a full archive page for Mom, i liked it so much, i updated both of my English and Chinese blog’s archives page as well.

1. a full archive page for Mom: Create a custom page template for Archive Index.
1.1 First the page template must has the following in its file. I think the most important is the “Template Name: ” line. It will be consumed by the WordPress Page creation UI, and it will use your mypagetemplate.php as a drop down that you can choose when creating a new page.

[php open tag]
/**
* Template Name: Full Width Page
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/

1.2 in the page template use wp_get_archives() with a filter to include dates along side the post title. per this discussion thread. wp_get_archives(‘type=postbypost’) function will give you a list of all your post title, but my mom wants a date next to each title, thus the filter.

2. My own Category Archive Page. Adjust category.php and make use Smart Archives Reload plug-in function to display a list of post title for one category. Per this discussion thread. except i didn’t add a content-archive.page and remove the content of the post and keep the title since i don’t like the pagination that method inherits. the function call i made to smart archives repload is

smart_archives( ”, ‘category_name=’.$category_name );

3.I also added an “All Archive” page for my own blog. But instead of using wp_get_archives(), i used Smart Archives Repload plugin again, but this time used its “format=both” arg since my blog has been around longer than mom’s. A giant list might seem too unstructured. So i make use the year and month block format. It also shows which month i didn’t blog (that’s how i realized i haven’t blogged that long here!)
The function call i used in the page template here is:

smart_archives(‘format=both’);

4. I’ve also created Child Theme to do all three above, it is surprisingly painless. and also ensures they won’t get overwritten once wordpress auto update itself again.

It seems fitting to start the re-blogging with a post that makes my Archive page looking better. It gave me some perspective on how long I have been blogging. Especially in today’s world, where so few still do. and even if they do, they do it in the most trendy site such as medium or tumblr. So why do i bother to keep tweaking this wordpress site? I think one reason is because i could do tweaks like this. I can fix things to my liking.

Then why haven’t I blogged for so long? Well actually I have been blogging, just not in English. I’m still able to find interesting blogs to read, interesting personalities to follow on the Chinese part of the net. But i haven’t been able to find the same in the English side. It seems everyone who used to blog in English are all busy twittering or slacking or somewhere i no longer can venture into… 🙁

I myself is just as guilty. So I will try to write more in English. We shall see. 🙂

A Flickr Badge Hack

Warning: This is a bit geeky.

I’ve always liked the idea of having rotating images on a web pages, so everytime a user refreshs the page, the look and feel changes slightly. But the only way i knew before was to write a javascript to rotate through a list of image names. It gets old after a while. I thought of crawling all the known image directories on my site and then collect the existing image path, then there is the question of non-uniformed size of each image. A webpage looks nice with a horizontal photo might not look as nice with a vertical one. Certainly there are scripts out there to resize the images to the desired size. Then there is also the possibility of storing your image file path in a db and just look it up there. Both seemed lots of work and maintenance.

For example, i liked the little image on the upper right corner on this site. It is a finite number of images that author scanned and nicely cropped for this use alone. But it is a limit number of choices, and it requires lots of work to create those images to fit that location.

V A G A B O N D I N G

Anyway, all these possibilities went through my head before there is flickr.

Now there is the “badge” concept created by flickr. Most people place their flickr badge on the side of their blog, and let it go on rotating and even flashing on by itself. It didn’t occure to me to use flickr badge to do what i always wanted until i saw Jason Goldman’s blog yesterday. He used the flickr photo badge to decorate his otherwise plain template.

So i emulated how Jason Goldman used the flickr script and modified the look of my Chinese blog. After some twicking of the layout, I was happy to call it finished. When i showed it to ZM, he liked it too, but the first thing he did was mouseover the image, and then the amazing thing was the title of the image was shown as the mouse move from image to image! I loved it so much that i went in my flickr and batch edited all my image title to make them meaningful. Lots of them are in Chinese. Then the trouble came.

Flickr’s badge generation javascript assumes everyone’s webpage is in UTF-8 encoding.

Mine wasn’t.


When i started setting up my Chinese blog, i didn’t really understand the world of encoding that well. At the time, all the Chinese pages i’ve ever seen were in “gb2312.” I figured out how to setup mine (using MT at the time) that way. Later when i switched to WordPress, i should’ve known better and taken the opportunity to convert everything into UTF-8. But by then i’ve accumulated so many articles in gb2312, i got lazy and was worried i might mess things up. So i ended up in gb2312 again.

Flickr, like all the other cutting edge websites(e.g. Google), uses UTF-8. So it could support multiple language on the same page. What Flickr badge generation script did was to assume the rest of the world is as clean and cutting edge as Flickr itself. It would have been an easy fix if i can access Flickr’s source code (time for Flickr to be open source, maybe?). All it needs to do is check the http header in the http request, identify the requesting page’s language setting, and return the image’s title in the correct format. Encoding conversion is easy to do on the server side.

But what was I to do now? I could file a bug on Flickr help and then wait. Except i can’t bear the ugly messed up encoding everytime i move my mouse over the image on the header.

So i set out to fix it from my side.

First i tried to insert an iframe on my gb2312 blog page, set the iframe’s source to another html that has encoding of utf-8, placed the Flickr badge on that utf-8 page. It works well with IE, but not with Firefox. 🙁

Then I started looking for something similar to php’s iconv on javascript. Since iconv in php has been so easy to use, i assumed it is a no brainer. But after googling around for 20 minutes and not finding anything useful, i started to realize it is not as easy as i thought.

Encoding conversion requires access to a huge amount of character resources, which are not available from client side. Sure i can try AJAX, but just for an image title, it seemed a little overkill. I might as well try to do this from server side. (actually i havn’t used AJAX, but i have a little project in mind so i can learn it. That’s another story.)

So my final solution is a relatively simple one.

I took the one-liner javascript from Flickr badge generator, executed on the server side using curl, took the returned value, converted from utf-8 to gb2312 using iconv, and then write it out to the page. It worked beautifully, on both IE and Firefox.

-php function that execute curl and return the http response (a very useful common function that can be used in many places, e.g. to fix douban.com’s badge for books/music/movies.)


function getResponse($post_url) {

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $post_url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    // Execute the http request.
    $response = curl_exec($ch);
        
    if (curl_errno($ch)) {
      echo curl_error($ch);
    } else {
        curl_close($ch);
    }

    // Return the response to the page
    return $response;
}

-php snippet that i placed on my header template:


<?php

// Send the request and receive a response
$querystring = <place your flickr javacript url here>;

$transmit_response = SendRequest($querystring);

$tempstr = iconv("utf-8", "gb2312", $transmit_response);
print ("<script language="JavaScript">".$tempstr."</script>");

?>

*Update: dotann just told me that changing the entire blog from gb to utf-8 is a matter of setting a configuration in mysql. Much easier than this hack. Now think about it. even AJAX might not be that bad. But i guess i just want to see if this kind of conversion can be done. 🙂

“Jean’s Weblog” Anniversary

Just realized that I’ve missed my blogging anniversary.
May 8, 2003
Wow, it has been a year!

The most delightful aspect of discovering a new blog I like is to piece together someone’s story. The process is just like working on a jigsaw puzzle, where I could collect the little beautiful pieces. Together, they form a recognizable picture. The vagueness of the picture doesn’t bother me; even its incompleteness seems to be an attraction rather than a shortcoming. Because then I would come back for more!

However, I also find myself looking for ‘About’ section in a systematic manner. It is good to know a little fundamental facts of the person so I could build up an interesting enough base to start.

So here are a few facts in case anyone is interested:

1. My native language is Chinese, and you can find my Chinese weblog here.
2. Occasionally I would write the same weblog entry twice, once in Chinese, and once in English. But they almost never translated verbatim. They often ‘feel’ different, too. I don’t know why but I can’t help it.
3. Won’t blink twice before I curse in English, but I can’t bring myself to say the mildest curse words in Chinese
4. Dream in color and with massive details
5. I’m a word person. (versus being a picture person or a musical person)
6. I’m a cat person. (Dogs are cool, but cats are so much cooler)
7. My high school was a boarding school in the center of Beijing, and it was supposed to be one of the finest in China. It means we were taught some rather liberal ideas in the late 1980’s China. It was only 15 minutes away from Tian’an men square, on a bicycle.
8. Wasn’t into politics until 911.
9. Enjoy traveling and have traveled to a few popular western European countries by myself. I enjoyed traveling alone. I enjoyed being alone in general. yes, i’m anti-social.
10. I’m now living in SF with someone I love and who claims to love me as well. If Happiness is a promise, then i think we’ve gotten one.
11. Among all the cities I’ve been to, I think San Francisco is the best place to live and work. The runners up are Nice and Barcelona.
12. I graduated with an EECS (pronounced ee-ks) degree but I gave up pursuing the profession of circuit design the day I graduated. I’m doing software programming for a living. I equate debugging with working on jigsaw puzzle. So I enjoy it somewhat. I changed job in June 2005, and I’m doing a mixture of technical account management and project management now. Debated heavily whether to go back being a programmer and finally decided against it. I think i am a good programmer, but i’m far better at proj. management than programming.  So i stop fighting with my head, even though my heart might be else where.
13. Listen to NPR everyday. Ever since i started taking company shuttle to work since 2007, i haven’t been listening to NPR as much. That might change soon, fingers crossed.
14. Believe all things are balanced out at the end, you gain some and you lose some. No tragedy will last forever.
15. Love good stories well told. Love good movies well made. Then again, who doesn’t?
16. I cry frequently when watching movies, in a very non-discriminatory fashion, i.e. including those not so well made ones.
17. I say no often, but i change my mind often, as well.
18. Love Skiing with a passion. There are few things can make me happier than craning down a slope while light snow following on my face.
19. Legally allowed to operate a motorcycle. Scuba certified. Sky dived once. No, I don’t think I’m crazy. It is more a kind of “you gotta try everything at least once” curiosity.
20. Used to be a social cigar smoker. Martini, Cigar, smokey bars, and jazzy piano music seem to go together. Since I love jazz, the others were loved in the same package. In Chinese, we say, if you love the bird, you gotta love the house where the bird lives, too. (As all your Chinese speakers out there know, i got this one backward. The actual saying was “if you love the house, then you must love the bird land on the roof, too.” i like my version better. 🙂 )
21. Love musicals, and cities that love them: New York, London, Toronto…
22. Used to drink black coffee only. Drinking something warm was immense comfort to someone who had to get up at 4:30am and catch a Monday morning flight.
23. Most of my friends think i’m a city person. I start to believe it, especially after I moved to the city in March’04. [update 2008- it is confirmed, i’m definitely a city person. I can’t imagine living in the suburb again.]
24. Used to rock climb regularly, both indoors and outdoors. During the peak of my “climbing career”, i did Nutcracker Sweet in Yosemite with my climbing partner at the time. It was a classic 5.8. 5 pitches total, 600 ft of perfect granite, it took us 6 hours. It is by far the craziest thing i’ve ever done. Skydiving can’t even compare.
—end of original 2004 list—
25. My biggest asset is passion, which is contagious (i’ve been told); my biggest shortcoming is impatience, which i have been trying to tame for a few years. i have mellowed out substantially comparing to my younger days.
26. I love a good argument. I’m opinionated and judgmental. But I adore quick wit and rational thinking. Thoughtful argument, clever come back, and most importantly kindness can swing my opinion (at least i’d like to think so).
27. I love data-driven results. Show me the facts!
28. I’m intensely curious. And i’m worried someday my curiosity will get me in trouble. I prefer to think myself as a hopeless romantic. My best friend Gui thinks I’m more rational than i’d like to admit. 🙂
29. One quality in others that i admire the most, also the quality i wish i had is the ability to persuade.
30. I don’t do diet because my mom taught me, “There is no shame in gaining weight, your body put in lots of honest labor to acquire those weight, you didn’t steal them.” 🙂
31. I don’t do regret either. Move on already!

This is fun! 🙂 I think I will come back and update this post from time to time…

change log:
v1: 2004.05.25
v2: 2008.12.19

MT 3.0 New Pricing Structure

Regarding all the “injustice” cry over MT 3.0’s new pricing structure, this funny response is a must read! via MovableType RIP | Metafilter (http://www.metafilter.com/mefi/33072).

This is getting talked about throughout the blogsphere and the reaction is pretty much universally negative.

The BLOGOSPHERE spake with one voice, and it said:

“Give us free stuff!”

And the Developers said, “Sure, why not,” and gave them simple web tools to played with. And the BLOGOSPHERE played with them, and rejoiced, and it was good.

And then the BLOGOSPHERE said:

“Give us more features!”

And the Developers did their best to comply, and they didst labour for many a year. Occasionally, they would shower.

And the Developers didst look up from their keyboards, and looked about their shabby one-room walkups, and they didst declare:

“Holy shit, we’re starving here. Does anybody have any money for some ramen or something?”

And they looked upon the BLOGOSPHERE, who didst use their product, and their many Amazon affiliate links and AdSense banners, and they said to themselves:

“Hmm. How do we get in on that action?”

And then it hit them, like a wet fish.

Yea, though they had planted the seed, watered the sapling, and tended the tree, but they did not reap any of the fruit.

“Fuck that noise,” they said, and they didst add a licence fee to the next upgrade under certain circumstances.

“AAAUUUGGHHH!” said the BLOGOSPHERE, which, like Slashdotters, never readeth the fucking article. “This is unjust. This is unexpected. This is so . . . so proprietary. Software should be FREE!” they said, as they cashed their cheques from Google.

“It’s not that great software anyway,” they said, as they entered stage two. “Anyone could whip up a blogging app. It’s slow. And the server doth verily give me those stoopid 500 Internal Server Errors.”

And the BLOGOSPHERE looked around and said, crying with a great voice:

“Anyone else want to give us free stuff?”

NEXT
posted by mcwetboy at 8:57 AM PST on May 13

The Spring Look

The Red and Green Christmasy color has been way way out of date for a while. I know summer is almost here, but I finally managed to get the Spring Look out for “fading notes”. Better late than never! 🙂 As you might already noticed, there is now an extra “yellow” bar on the “switch styles” section. Click on it you will be able to see the new look. Let me know if you have any suggestions on the color and fonts, as well as bug reports! 🙂

Happy Spring, everyone!

Styles Switcher

As you might have noticed, a small bar of color had appeared on the left column (between the link to Chinese Weblog and the Search button), with the notation: Switch Styles:.

I’ve been interested in such a feature since my first encounter with weblogs. Skins for weblog! 🙂 Everyone has some preference regarding color and layout. Now you can choose among all my three previous designs, and stay with the one you like the most.

I followed the instruction from alistapart.com step by step. It is well-writen and fairly easy to do.
Alternative Style: Working with Alternate Style Sheets

So, now check out the choices! Any suggestions or corrections are welcome. 🙂

Holiday Special

As you’ve noticed, Jean’s Weblog now sports a rather colorful/contrasty color combination. Welcome to the Holiday Special! 🙂

If it is too bright for your taste, you could still read this weblog using the old color layout here. I was planning to add in the new feature where user can switch “look and feel” between this and previous two (blue and green) layouts. Then it turned out to be harder than I had expected. All because of IE not supporting a few crucial features! 🙁

I’m still investigating other possibilities… If you know a good way of doing the switching, do let me know! Thank you! 🙂

After the Storm…

It seems this storm is officially over. 🙂 I’ve never been so happy to watch my website traffic slowed to a halt. heehee.

The culprit was an intro of that Chinese blogsphere sex symbol, which made to the largest Chinese news site: sina.com. One should never underestimate the power of traditional paper-based media, combined with popular web search engine that lies!

And here is the damage report:

Yesterday’s fadingnotes.com statistics:
Hits: 56£¬217
Files: 51£¬348
Pageviews: 17£¬624
Sessions: 12£¬430
KB sent: 345£¬473

Average daily statics prior to yesterday:
Hits: 1,822 – 5,826
Files: 1,192 – 3,610
Pageviews: 560 – 1,946
Sessions: 143 – 202
KB sent: 12,411 – 35,387

As you can see, it was roughly 10 times my peak traffic.

Looks like my current monthly transfer allowance could withstand another 10 days of such abuse. Yipee! Hat’s off to my web hosting company: One on One Internet, which weathered this storm with style. Thank you!

Under Siege

(* problem solved, see detail at the end…*)

That’s how I feel right now, like a trapped animal. Not sure where to turn.

This whole thing is so absurd.

There is this Chinese female columnist who writes a sex column for a relatively famous Chinese newspaper. She started writing a weblog detailing her personal sex life starting this summer. Her weblog was THE most famous in China, and because of it, weblog became mainstream in one summer in China.

I liked her writing, she is honest and a marvelous writer. So I praised her once in my Chinese weblog. The entire post was less than 50 words, one paragraph only. That was three weeks ago. During this past weekend, I started to notice that people who ended up on my Chinese weblog page by searching for her name or her blog name on google. I thought it funny. The traffic wasn¡¯t too much higher than normal so I didn¡¯t pay much attention to it.

Lo and behold, today my website traffic is 900% the normal and fast approaching 1000%. Now I got worried and dug out the actual google query that led them here. Guess what?! My Chinese weblog was number one on Google query result page if you search for HER NAME or HER WEBLOG NAME! WHAT the F**K! :(((((((

Google is so seriously busted.

Now I don¡¯t know what to do. Imagine all those people expecting some juicy details ended up on my boring page! Imagine all my precious bandwidth eaten away by all these stupid clicks!

I took down my Chinese weblog and replaced it with one page disclaimer. On it, I copied that paragraph which caused me all these trouble.

Still, those clicks kept on coming in. I¡¯m watching my bandwidth quota disappearing into nowhere with astonishing rate¡­

I¡¯m blocking Google bot for sure. Not sure how much longer my monthly quota will sustain the rest of the site. Oh Well! Moral of the story is: Never underestimate the power of Chinese people. If everyone of them makes one click on a link to your site, that makes 1.3 billion hits!

==========================
FIXED!
It turned out that Google allows the webmaster to remove any page from Google’s index. If you had ever had the same problem, go here. Register and list the page you want removed. Before doing so, make sure you put in the following meta tags in the page you want to remove.

Disallow indexing and archiving:
[META NAME=”ROBOTS” CONTENT=”NOINDEX, NOFOLLOW, NOARCHIVE”]
replace square bracket with angle bracket.

Google will remove them from their index within 24 hours. Whewww! That was close… 🙂

New SideLog

In case people are not familiar with the concept of a “sidelog”. I’ve added one to the right of the main column (yup, that narrow strip of blue thiny). The idea is when I find interesting stuff on the web, but don’t have much input other than the link itself, i will list them there. It is also reverse chronological ordered just like the main weblog, and the date is at the bottom of each short note. The (0) is indicating it has zero comments as of now. So you could comment on those items as well. The sidelog is itself a mini-weblog, so it has its own archive and RSS. Not sure if people would like those links, so i left them out for now.

This way, I can keep only the longer articles in the main log. From now on, most of the items that used to belong to the “web surfing” category will probably end up in the sidelog.

So check it out, it has some goodies already! 🙂
Let me know if you have any questions, suggestions, or complains… 🙂

Changing Season

Summer is over. Time for the changing of leaves…

I was planning to write an essay on September 11th. But as the day came closer, I was suddenly at a loss of words. It seemed whatever I wanted to say was trivial comparing to what had happened and what is happening still. Then I saw the Moment of Silence post made by many bloggers. I decided to follow their examples.

I worked on the autumn look of my weblog instead. Golden sunshine, vast blue sky and quieter days…

A Face Lift

Inspired by Alex the Girl, i gave the weblog a face lift. Color Theory is my weakness. It is one subject I’ve been having trouble with since the very beginning. I’m still not getting it. So my fool proof (literarily, trust me) method is trial and error. It works for me but it is very inefficient. 🙁

Therefore I need all the help I can get, here are a few very useful website that helped me a great deal in the color department:
EasyRGB-Color harmonies, complements and themes: I used this most often. But colors it provides tend to be on the contrasty and bright side.
Color Match: the javascript could work better, but it complements EasyRGB by providing more subdued colors within the same theme.
Palette Man: After you get all four color plus text set, try “rotate”. It is an excellent way to show how arrange the same group of colors differently will provide such different mood. Only have web safe colors though.
Scheme Machine: A good way to help decide the color of active links and visited links and how they look against different background color. It also gives you the final html code. Web safe colors only.
xblog-color: Want more? Try this! Tons of color theory related links. Go crazy! 🙂