Posts By Mike
Workaround for Using Unlisted Picasa Albums in Shashin
Update 2/14/2010: As of version 2.6, Shashin now has support for unlisted albums, so you no longer need the workaround described in this post.
There’s still no support for unlisted albums in the new version of Shashin, but there is a workaround. If you temporarily make your unlisted album public, then add it to Shashin, and then make it unlisted again, it will work in Shashin. If you later add photos to the album, you’ll need to briefly make it public again to sync it with Shashin. I was actually surprised this worked. Shashin is able to display the photos even without the authkey for the unlisted album. It seems that Picasa requires an authkey to access the Picasa pages that display the unlisted photos, but doesn’t require an authkey for the images themselves.
The reason I haven’t added better unlisted album support yet is that it’s more difficult to do than it might seem. I could use an album’s authkey to give Shashin access to an unlisted album’s RSS feed. However, Shashin also needs to access your Picasa user feed, which contains important metadata about all your albums. Unlisted albums don’t show up in the public version of that feed, even if an authkey is available.
To access that feed, I’ll need to give Shashin the ability to log in to your Picasa account. This is possible with the Picasa Web Album API. There’s an officially supported PHP library for interacting with it, but the problem is that the library is over 3MB in size, and I don’t want to bundle something that enormous with Shashin.
I wrote my own authentication routine using Google’s ClientLogin method for another project, but that approach isn’t appropriate for a distributed web application like Shashin. I’ll have to figure out their AuthSub method instead, which is intended for web applications. So… look for better unlisted album support in a future version of Shashin, and hopefully the workaround described here will get you by in the meantime.
Shashin 2.3 Beta is Here
Shashin 2.3 is a complete rewrite, with more robust error handling, improved security, and several new features. I’m initially releasing it on my site only, as a beta release. Update: The final version is now available for download at wordpress.org:
I’ve done a fair amount of testing myself, but since it’s a rewrite, there’s the possibility of new bugs where there weren’t any before, so I’m looking for help testing it before I make it more widely available on wordpress.org. Please use the comments section on this post to let me know if you run into any problems.
If you’d like to see an overview of the code, here’s the Shashin 2.3 phpdoc documentation.
Important installation instructions if you’re upgrading:
- Make a backup copy of your current Shashin files
- Deactivate Shashin
- Delete Shashin from your plugins directory (this will not harm your Shashin photo data)
- Unzip and upload the new version
- Reactivate Shashin
- Go to the Shashin settings page. You will need to reset your options (they’re stored in a different way in Shashin 2.3, and it doesn’t inherit from previous versions)
New features and how to use them:
- Automatic daily synchronization of all your Shashin albums with Picasa. This is turned off by default – you can go to the Shashin settings page to turn it on. This was the last feature I added and I haven’t tested it thoroughly, so I’d especially appreciate feedback on this.
- Internationalization: Shashin now comes with a shashin.pot file and will work with localization files you create. If you create a translation for Shashin, please send me your localization files and I’ll include them with the Shashin distribution.
- Simplified use of the [salbumthumbs] tag. If you’re using Highslide with Shashin, you no longer need a second page with the salbumphotos tag to display an album’s photos. Just click an album thumbnail, and the page will reload showing thumbnails of the album’s photos. On the Shashin settings page you’ll see a new set of options for specifying the thumbnail size, sort order, etc.
- Repurposed [salbumphotos] tag: you can now use it to show all the photos for an album, without having to first click an album thumbnail. This means the syntax has changed slightly – the first argument is now an album key:
[salbumphotos=album_key,max_size,max_cols,caption_yn,description_yn,order_by,float,clear]
- Improved usability for the Shashin admin menus. You can sort your albums and photos by clicking on different column headers. Also, Shashin makes use of the new styling options in WordPress 2.7 to make the album list easier on the eyes.
- The [srandom] and [snewest] tags used to require either a single album key or the word “any” as its first argument. You can now also provide multiple album keys. Here’s an example:
[srandom=3|7|2,288,2,6,n,none,both]
- For each of the Shashin widgets, you can now specify CSS “float” and “clear” values.
- Uninstall option: this will delete the Shashin database tables and delete all the Shashin options from the WordPress options table. You can never get your photo key and album key numbers back if you do this, so only uninstall if you really don’t like Shashin 🙁
Bug fixes, security fixes, and error handling:
- If you list multiple album keys or photo keys in a Shashin tag, they’ll now always display in the order you listed them.
- There were a number of minor bugs with Shashin widgets. I won’t list them all here, but it’s probably safe to say that if you noticed something that wasn’t quite right with one of the widgets, it’s fixed now.
- Better protection against SQL injection (this is a very low risk for Shashin anyway, since it doesn’t take user inputs through public-facing pages, but the extra protection can’t hurt).
- Removed an XSS (cross site scripting) vulnerability.
- In the admin panels, Shashin used to report the same error message regardless of what really went wrong. Now the error reporting is much more specific, which will make debugging much easier.
Acknowledgements
- Northclick’s excellent internationalization tutorial. I scoured the web looking for a guide to using xgettext for generating the shashin.pot file, and this was the only good one I found.
- Glenn Slaven’s guide to scheduling events in WordPress.
Update 1/21: the official release is now available at wordpress.org. Thanks to everyone who helped with testing! The download link above now points to wordpress.org.
Update 1/18: I’ve uploaded another revised version, thanks to a couple bug reports I received. You’ll need to deactivate and reactive Shashin for one of the fixes to go into effect (there was a datatype problem with the date fields, resulting in albums and photos not always sorting in the right order).
Update 1/16: Post to Post Links II error: No post found with slug "shashin-wordpress-plugin" for the Shashin 2.3 beta. Also, I found and fixed two very minor bugs. The download link below includes the fixes.
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.
Introducing Kai’s Candy Company
My blog has been quiet recently, as I’ve been focused on creating and launching the site for my new business, Kai’s Candy Company. Our goal with the company is to seek out the most unusual, fun, and tasty candies from around the world, and sell them! We’re starting with Obama and McCain candies that we’ve made especially for the 2008 Presidential campaign. The candies are hand made by artisans in Japan, using traditional kumi ame (rolled candy) techniques.
We also have a Halloween candy poll that’s waiting for your vote! Your votes will help us decide which candy designs to pick for our Halloween candies.
Making an HTML Table Using Arrays of Column Data
Most of the time, if you need to create an HTML table to display data pulled from a database, it’s a fairly straightforward task: the data is organized in rows, and since HTML tables are generated in rows, it’s easy to loop through the rows of data and display them in succession. But sometimes you can have a situation where you want to display the data as columns, which is not something you can easily do in HTML. Here’s an example of how to approach this challenge.
Displayed below is an array of data from a project I’ve been working on. I’ll explain the color coding in a minute. The first element is a sub array of laboratory sample IDs, and the subsequent elements are subarrays indicating which laboratory tests should be run on which samples. (I’ll spare you an explanation of the database structure behind all this, but suffice it to say that pulling out the data with this organization was the most efficient solution).
Array[4] (
0 => Array[6] (
0 => 'Sample ID',
1 => 193,
2 => 194,
3 => 195,
4 => 196,
5 => 197,
),
1 => Array[4] (
0 => 'Phospholipids',
1 => 'Y',
3 => 'Y',
5 => 'Y',
),
2 => Array[6] (
0 => 'Apolipoprotein A-I',
1 => 'Y',
2 => 'Y',
3 => 'Y',
4 => 'Y',
5 => 'Y',
),
3 => Array[4] (
0 => 'Gastrin',
2 => 'Y',
3 => 'Y',
4 => 'Y',
),
)
How I ultimately what to display the data is like this:
| Sample ID | Phospholipids | Apolipoprotein A-I | Gastrin |
|---|---|---|---|
| 193 | Y | Y | |
| 194 | Y | Y | |
| 195 | Y | Y | Y |
| 196 | Y | Y | |
| 197 | Y | Y |
To get from here to there, you need to visualize how you want to arrange the data elements. If you use the color coding I assigned to the array indexes above, you can picture the data in rows, like this:
0,0 1,0 2,0 3,0
0,1 1,1 2,1 3,1
etc.
To generate a display of the data in this manner, you need to loop through the arrays in an inside-out manner. You loop through the subarrays to set the rows, and then have a nested loop through the parent array to set the cells. Here’s the PHP code for it:
$content = "<table>\n";
// This loop controls the table rows
// $cols is the name of the parent array
for ($inner=0; $inner < count($cols[0]); $inner++) {
$content .= "<tr>";
// This loop generates the table cells
for ($outer=0; $outer < count($cols); $outer++) {
// this assumes you want the first row to be a header row
$tag = ($inner == 0) ? "th" : "td";
$content .= "<$tag>{$cols[$outer][$inner]}</$tag>";
}
$content .= "</tr>\n";
}
$content .= "</table>\n";
// then display or return $content...
The first subarray contains the Sample IDs, so I used it to set the maximum count for the outer loop that controls the HTML table rows (because I can be confident there will never be data beyond the last sample). If you don’t have an analogous subarray, you’ll need to check to see which subarray is longest, and use that to control the count.
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:
- It uses reCAPTCHA for blocking spam. reCAPTCHA is a great project that uses data from its captcha form submissions to help digitize books.
- 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.