Posts in Category: WordPress

Shashin 2.3 Is Coming…

I’ve been getting more emails than ever about Shashin, and it’s been many months since the last version. I’m about halfway through a full re-write of Shashin. The new version will feature:

  • Improved database security
  • Internationalization
  • Most (maybe all) of Brian Hsu’s feature additions
  • Simplified approach to displaying all the photos in an album (you won’t need the salbumphotos tag anymore)
  • Automated scheduled album syncing
  • Various new tag options
  • And, of course, bug fixes

Since it’s a full re-write, it will need some testing, so I’ll release it initially on my site only, as a beta version. So stay tuned – look for it in 2-3 weeks.

Nice Feature Contributions to Shashin

Brian Hsu has made some nice enhancements to Shashin. You can see his post in the WordPress forums describing his additions. I posted a reply there, but I also want to mention it here, as I’d like to hear from other Shashin users to find out what you think of his additions. I haven’t made up my mind yet, but right now I’m thinking I’ll include all of his enhancements in the next Shashin upgrade. However, I’ll make it so the Picasa link-backs are turned on or off in the Shashin Settings menu, instead of extending the argument list in the Shashin tags (as the arguments lists are already quite long). Use the comments below to let me know what features you like (or don’t like) that he added.

Shashin 2.2 – Slideshows and Built-In Video Display

Shashin was overdue for an upgrade. The new version incorporates the latest version of Highslide, which means the big new feature is slideshows (scroll to the bottom of my Post to Post Links II error: No post found with slug "shinjuku-gyoen-national-garden" post to see a slideshow in action). I made the addition of the slideshow buttons automatic, which means if you’re already a Shashin user, you don’t need to do anything to enable slideshows in posts you’ve already written.

The other major new feature is that Shashin can now play Picasa videos locally in a Highslide window. This is also automatic. If you already have video thumbnails in your posts, and you’ve selected Highslide for viewing full size images in the Shashin Settings menu, then the videos will now play locally in a Highslide window. Here’s an Post to Post Links II error: No post found with slug "eidan-rocks-out".

A word of caution if you put a video within a slideshow of other images: the video will load up and start playing, but if the length of the video exceeds the length of time that’s set for displaying each image, the video will stop and the next image will be loaded. There’s no way around that.

Other new features include:

  • New options in the Settings menu for autoplaying Highslide slideshows, how long to display each slideshow image, and the dimensions for displaying videos.
  • Checks for shashin.css and highslide.css in your active theme directory – this allows you to customize the stylesheets without worrying about losing your customizations the next time you upgrade Shashin.
  • No longer necessary to update image paths in highslide.css if you have WordPress installed in a subdirectory on your site (unless you choose to put a custom version of highslide.css in your theme directory – then you need to update the image paths to point to their location in the plugins directory).
  • For the caption in Shashin’s tags, in addition to “y” or “n” you can now use “c”, which means all pictures will get the caption “Click picture to enlarge” and all videos will get the caption “Click picture to play video.” The actual caption will be displayed in the Highslide window.
  • Option to make thumbnails not clickable, if you don’t want to display a larger version.

You can download Shashin 2.2 at wordpress.org.

Important note to upgraders: Deactivate your old installation, upload the new version, and then reactivate. This is necessary for required updates to the Shashin tables. Also, you need to sync all your albums – click the “Sync All” button (under the “Manage” tab).

Deko Boko 1.1 – Compatible with IE 7 and the New WP-reCAPTCHA

A report of CSS trouble with IE7 in Deko Boko 1.0 has led me to release a fairly major upgrade – Deko Boko 1.1 is available for download at wordpress.org:

  • I’ve completely rewritten the XHTML and the CSS for the contact form. If you’re upgrading, and you’ve customized your contact form, you’ll need to migrate your changes. The reason is that the widely used CSS “clearfix” code that I had in Deko Boko breaks in IE7 (I know, I’m late in catching this – I’ve switched to Ubuntu on my laptop and I wasn’t keeping up with the latest Microsoft nonsense). For reasons explained in my rant below, this pushed me to do a full rewrite, which simplifies both the markup and the CSS.
  • One of the features of Deko Boko is that is it plays nicely with WP-reCAPTCHA (the official reCAPTCHA plugin for handling spam in comments). The latest version of WP-reCAPTCHA changed the name of the WordPress option variable where it stores its API key, so Deko Boko now looks for it under the new name and the old name.
  • I added a language selector to the Deko Boko settings menu, so you can choose a language other than English for the reCAPTCHA widget.

<rant>The challenge with writing a plugin like this is keeping both the XHTML and the CSS at a level where you don’t need to be a coding guru to make changes yourself. I want the Deko Boko contact form to be customizable by people with beginner-to-intermediate level coding skills. But there are a multitude of variations in how CSS is implemented in different browsers, not to mention the things that are just plain broken. Nowhere is this problem worse than forms. So developers are often forced to choose between doing semantically “incorrect” things in their markup (like using br tags to force certain layout effects), or writing hundreds of lines of complicated CSS, often with filters to deal with incompatibilities between browsers.

Unfortunately the solution for the IE7 “clearfix” problem I mentioned above breaks clearfix for IE6 (requiring an IE6 filter to then fix that). IMHO clearfix is a hack to begin with, needed to deal with an oversight in the CSS model. And in any event, the code needed to fix the problem for definition lists was way too fragile for a plugin like this, which is meant to be flexible and extensible. So I dropped the definition list in favor of an ordered list, following the techniques described in Cameron Adam’s excellent article on form layout. His approach to form layout is the best I’ve seen, with some clever yet simple approaches to the markup (the right word is “elegant” – as it’s semantically correct too) to get around some of the most common problems with form layout. It’s also such a well written and highly detailed article, that I can simply refer you to it if you want to extend the layout of the Deko Boko contact form to suit your own needs πŸ˜‰ .</rant>

Deko Boko 1.0 Now Available – A WordPress Contact Form Using reCAPTCHA

My thanks to everyone who tried out the beta release of Deko Boko. I received a lot of useful feedback, which led to some of the features and fixes in the 1.0 release of Deko Boko, now available for download at wordpress.org. I’ve added:

  • A selector for using different reCAPTCHA widget themes, as well as support for custom CSS for the reCAPTCHA widget.
  • Support for multiple, custom contact forms.
  • “CC Me” option for users to receive a copy of the message they submit to you.
  • Protection from cross-site scripting attacks.

See the Post to Post Links II error: No post found with slug "deko-boko-wordpress-plugin" for further details.

Important note to upgraders: you will need to deactivate and then reactivate Deko Boko after you upload the new files.

Deko Boko – A reCAPTCHA Contact Form for WordPress

I now have available for download my second WordPress plugin: Deko Boko, a contact form that uses reCAPTCHA for spam protection. There are a number of good contact forms for WordPress, so why create another one? There are two things that make Deko Boko different from the others:

  1. It uses reCAPTCHA for blocking spam. reCAPTCHA is a great project that uses data from its captcha form submissions to help digitize books.
  2. The Deko Boko contact form can be extended any way you want, but without the need for complicated admin menus. If you’re comfortable editing HTML, then you can add any number and any type of input fields to the contact form. You can control which fields are optional or required. When the form is submitted, any fields that you added will have their data included in the body of the email.

The form layout is controlled by a CSS styled definition list, which provides a great deal of flexibility. With just a few CSS edits you can change the position of the field labels to top-aligned, left-justified, or right-justified.

Spam protection in addition to reCAPTCHA is also included. Deko Boko protects against email header injections and will verify that the return address provided by the user has a valid format.

This is a beta release (v0.8). I’ve been using it on my own site for some time and it’s working well. I’d like to hear feedback before making it an “official” release.

Go to the Deko Boko page for more information and to download it. Note that comments are turned off on the page – please submit any comments on this post.

Customizing WordPress: Limiting Categories on Your Home Page and Sidebar

Update: I’ve redesigned my site since writing this post. The advice in this post is still valid, but the descriptions no longer match what you see on my site.

If you click around into different parts of my site, you’ll notice that only certain categories of posts appear on the home page, and there are two variations to my sidebar. What I’ve done is make a single blog look like two different blogs: one for my professional work, and one for my personal posts. I’ve achieved these effects without using plugins, and without registering multiple sidebars. The only downside to my approach is that it’s not a technique you can use to control which widgets appear on which pages (but it’s fine if you want your widgets on all your pages). I don’t use widgets so it’s not a downside for me πŸ˜‰ .

To follow along, you’ll need to be comfortable with editing a couple of your theme’s files, and be comfortable with the basics of PHP.

Limiting the categories on your home page can be done by adding a few lines of code to the top of your theme’s index.php file.

<?php if (is_home()) {
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    query_posts("cat=12,23,6&paged=$paged");
} ?>

For “cat=” on the 3rd line, list the numbers for the categories you want to appear on your home page (or you can put a minus sign in front of the category numbers to exclude specific categories). The WordPress documentation for query_posts says you can do this with simpler syntax, but you can’t. The documentation is wrong. If you follow the suggestion there, your “Newer Entries” and “Older Entries” links on your home page won’t work. They will just continually re-load the most recent posts. The code I’ve given here is explained nicely in this WordPress support forum post.

So with this code, my home page includes only the categories related to my professional work. For my personal blog, I needed a way to get posts from all the right categories to appear together on a page. The answer is simple: I created a single parent category that encompasses all the categories I use for my personal posts. So the page for that parent category serves as the “home page” for my personal blog.

I also wanted my sidebar to change depending on whether you are viewing the “professional” pages or the “personal” pages. Achieving this involves two steps. First, add the following code to the top of your sidebar.php file. The category and page numbers you see listed are the ones where I want the “professional” sidebar to appear, which I call $home_sidebar (so you should substitute category and page numbers appropriate for your site). Note the ability to pass an array to is_category is new with WordPress 2.5.

<?php
$home_sidebar = false;
if (is_category(array(12,23,6))
  || in_category('12') || in_category('23') || in_category('6')
  || is_page(array(345,440,496,501)) || is_home()) {
      $home_sidebar = true;
} 
?>

The second step is to check the value of $home_sidebar whenever you want to vary what appears in the sidebar. For example, to vary the category links in your sidebar, use code similar to this (again, substituting your category numbers). You’ll want to explore the options for the wp_list_categories function to get the exact appearance you want:

<ul>
<?php if ($home_sidebar) {
    wp_list_categories('include=12,23,6&feed=RSS&order=desc&title_li=');
}
     
else {
    wp_list_categories('child_of=26&feed=RSS&title_li=');
} ?>
</ul>

Note my use of child_of. This is the number for the parent category I created for all of my personal posts. This is a very convenient way to get all of the child categories without having to list them individually.

I’ve used this approach to make my blog look like two blogs. But you could easily extend this approach to subdivide your blog into as many mini-blogs as you like.

Shashin 2.1 – Easier Steps for Displaying All Album Photos

Shashin 2.1 is now available. It does not include any new dazzling features, but it has a new, easier to use option for displaying all your album thumbnails, and then have them link to a page on your site that displays all the photos in each album. The Shashin page has instructions on how to do this.

There were 3 problems with how I implemented this feature in the previous (2.0) version of Shashin, but they only became clear to me after hearing feedback from people using Shashin 2.0 in a wide variety of WordPress themes. One problem was that the steps involved were just too complicated for most people’s needs (but the more complex options are still there, if you need greater control of the configuration than the new “easy” way).

The second problem was my attempt to manipulate the title of the page containing the [salbumphotos] tag. Shashin 2.0 tries to dynamically append the title of the selected photo album to the page title. In a rational world this would be easy, but WordPress makes it extraordinarily difficult to isolate and manipulate the title of a page, as reported here. I thought I had come up with a work around. But, as it turns out, my solution was not reliable across all the different WordPress themes that are out there. So, with Shashin 2.1, I have removed all the code that tries to manipulate the page title. It now simply displays the album title as a caption on the table that contains the photo thumbnails. This is much cleaner and shouldn’t cause conflicts with any themes.

The third problem was the [salbumphotos] tag, which is used to display thumbnails for all the photos in an album. In Shashin 2.0, a page with the [salbumphotos] tag won’t play nicely with sidebars that use the wp_list_pages function (for listing links to all the pages on a site). The [salbumphotos] tag only worked correctly if you used it in conjunction with Shashin album thumbnails. You couldn’t just go to the page directly from a sidebar link. This is fixed in Shashin 2.1.

Shashin 2.1 also has a few minor bug fixes, the most important of which is that you can now once again see the photo thumbnails in the Shashin admin panel.

I should point out that, if all you want to do with your Picasa photos in WordPress is display your album thumbnails on a page, and then link them to a page that displays the photos in each album, then I recommend kPicasa Gallery. It has similar features to Shashin in this area, but without Shashin’s management overhead. But if you want to do more than just that, then I recommend Shashin πŸ˜‰ .

…And …And …Shashin 2.0.4

This is a very minor release in terms of code changes. It’s not critical if you have a previous version of Shashin installed, but it is critical if you’ve upgraded to WordPress 2.5 and you’re installing Shashin for the first time. It has to do with WordPress 2.5’s new handling of variable scope when activating plugins (if you were curious).

The only other change I made was to add mp4 as a video type that Shashin will recognize (it’s not documented as a supported video type for Picasa, but it does in fact accept them).

Download Shashin 2.0.4.

Update: I’ve received a few reports from first-time Shashin users who are having trouble activating Shashin properly, despite this fix. This seems to be happening to only a small number of people, and I haven’t been able to track down the cause yet. If you are having trouble with Shashin under WordPress 2.5, please leave a comment on this post and let me know exactly what’s going wrong.

…And Now Shashin 2.0.3

In version 2.0.2 I updated Shashin to accommodate changes in the Picasa RSS feed. The feed changes had caused images to stop displaying after you synced your albums in Shashin. I fixed that, but what I didn’t notice was that they also changed how videos are represented in the feed, so version 2.0.2 still doesn’t display videos after you sync your albums. Someone kindly pointed out the problem, so I’ve fixed it – Shashin 2.0.3 is now available at wordpress.org.