Download Shashin
Shashin phpDoc
Support development of Shashin
Shashin is a powerful WordPress plugin that enables you display Picasa images and videos anywhere in your WordPress site. It has many features:

Examples

See my personal [p2p type="slug" value="photo-albums" text="photos page"] for an example of displaying albums and their photos. See [p2p type="slug" value="shinjuku-gyoen-national-garden" text="my post on the Shinjuku gardens"] for an example of using Shashin to display individual images and groups of images in a post.

Help!

Please use the comments section in [p2p type="cat_slug" value="shashin" text="my most recent blog post about Shashin"] for questions.

Commercial Use of Highslide

Shashin comes bundled with Highslide. Although I do not charge anything for using Shashin on a commercial site, Highslide is free for non-commercial use only. If you are using Shashin for commercial purposes, you must either 1. deactivate Shashin's Highslide option or 2. pay the appropriate fee for Highslide to its creator.

Usage Guide

Q&A About Shashin

Change Log


Usage Guide

Requirements

⇑ top

Installing and configuring Shashin

  1. Download the Shashin zip file, unzip it, and copy the "shashin" folder to your plugins directory. Then activate it from your plugin panel. After successful activation, Shashin will appear under your "Tools" menu and under your "Settings" menu.
  2. If you are upgrading from a previous version, it's important to deactivate and then reactivate Shashin. This ensures that new settings will be configured correctly.
  3. Go to the "Settings" menu, review the default settings, and make whatever changes you like. If your Picasa server is outside the US, it is especially important that you change the server (e.g. to http://picasaweb.google.co.uk).
  4. Go to the "Tools" menu and follow the directions to add your first album!
Note: Shashin will add two tables to your WordPress database, named wp_shashin_album and wp_shashin_photo. You should include these tables when making backups of your WordPress tables. The Shashin tags rely on key numbers from these tables that you won't get back if you lose the data in these tables. ⇑ top

Keeping Shashin synchronized with Picasa

If you add albums to your Picasa account or make changes to them, you need to let Shashin know. On the Shashin "Tools" page, click the icon to sync an album whenever you update it in Picasa. You can also use the "Sync All" option to sync all your albums at once, or activate the option to have Shashin automatically synchronize all your albums daily (this option is on the "Settings" page). The synchronization is smart: if you move a photo from one album to another, Shashin will update its information on that photo (as opposed to deleting it and adding it again). This way references you have to the moved photo in your posts won't break. Note that "Sync All" will not automatically pull in new albums to Shashin. It only synchronizes albums you've already added to Shashin. For new albums, you need to use the "Add Albums" form on the Shashin "Tools" page. This allows you to selectively control which of your Picasa albums are added to Shashin. If you have an extremely large number of albums or photos, see the Known Issues section below concerning the limits of the "Sync All" option. ⇑ top

Using Shashin with Highslide

Shashin comes bundled with a specially configured version of Highslide, so you don't need to download Highslide separately. After installing Shashin, you'll want to specify your desired settings for Highslide in the Shashin Settings menu. You also have the option of linking your photos directly to Picasa and not using Highslide, or using a different image viewer. Do not upgrade Highslide independently of Shashin, as that may cause it to stop working with Shashin. Note that Highslide is free for non-commercial use only. ⇑ top

Using Shashin with other image viewers, such as Lightbox

Shashin provides settings that allow you to configure it for use image viewers other than Highslide. If you want to use another viewer, there are several things to consider: ⇑ top

Using Shashin tags

There are a number of options available in Shashin's tags. The easiest thing to do is to keep two windows or tabs open in your browser - one for writing your post and one for the Shashin "Tools" page. It has example markup for Shashin tags that you can copy and paste into your post. After pasting a tag, you can edit it as needed. An important thing to note is that Shashin assigns its own numbers to Picasa albums and photos. In the documentation below these are referred to as "album keys" and "photo keys". This is mainly to avoid the impracticality of you having to type the extremely long Picasa ID numbers when you use Shashin tags. A Shashin tag will be translated into an xhtml "div" container. Always use a Shashin tag on a line by itself in your post or page. This is important because of how WordPress auto-formats your posts. If you put a Shashin tag on the same line as other text, then it will get wrapped in the paragraph tag that WordPress adds to the line. This will result in invalid xhtml, as nesting a div tag inside a paragraph tag is not allowed (although in most cases browsers will still display it correctly). ⇑ top

Controlling the position of Shashin's thumbnails

All the Shashin tags have options that let you center or float thumbnails, and control the clearing of margins. Remember that the purpose of floating an image is to have it flow around other elements on the page. If you float an image near the end of your post, it may flow down below the post. To avoid this, put a <br clear="all" /> tag at the very end of your post. ⇑ top

Supported image sizes

Picasa supports only a specific set of image sizes. If you try to use a size not listed, your image will not display at all. The sizes are: 32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576, 640, 720, 800 Note that these sizes represent a "maximum dimension." This means if you pick 640, and your picture has a landscape orientation, then it will be 640 pixels wide. If it has a portrait orientation, then it will be 640 tall. Shashin automatically calculates the correct size for the other dimension. Note that 32, 48, 64, and 160 are special sizes. Picasa will crop them to a square shape. This makes them good sizes for displaying tables of thumbnails. The Shashin tags also allow you to use the word "max" as an image size. In the Shashin Settings menu, if you provide the maximum width of your theme's content area, Shashin will use that to dynamically determine the largest image size it can use. It will even take into account the number of thumbnail columns. See below for more information. ⇑ top

Displaying a single photo - the [simage] tag and widget

In a post or page, use the [simage] tag:
[simage=photo_key,max_size,caption_yn,position,clear,alt_thumb]
Tag examples
This displays the photo with Shashin key 17, maximum possible size, show the caption, centered (the size of the image depends on the width of your theme's content area):
[simage=17,max,y,center]
Displays the video with Shashin key 22, thumbnail size of 200 pixels, no caption, float left, do not clear margins, use photo with Shashin key 33 as the thumbnail:
[simage=22,200,n,left,none,33]
Displaying in the sidebar
You can pick the Shashin Single Image widget in your widgets menu, or if you're not using widgets, use this code and substitute the desired values:
<?php echo Shashin::getSingle(photo_key,max_size,'caption_yn','position','clear'); ?>
⇑ top

Displaying a table of album thumbnails - the [salbumthumbs] tag and widget

In a post or page, use the [salbumthumbs] tag:
[salbumthumbs=to_show,max_cols,location_yn,pubdate_yn,position,clear]
Tag examples
Show all albums in the reverse of the picasa order, 3 columns of thumbnails, show albums locations, don't show publication dates, center on the page:
[salbumthumbs=pub_date desc,3,y,n,center]
You can use "pub_date", "title", "location", or "last_updated" for the order. If you add " desc" then they will be put in reverse order. Show albums with Shashin keys 2, 24, and 33 only, 1 column of thumbnails, don't show album locations, show publication dates, float left:
[salbumthumbs=2|24|33,1,n,y,left]
Displaying in the sidebar
For your sidebar, you can pick the Album Thumbnails widget, or if you're not using widgets, use this code and substitute the desired values:
<?php echo Shashin::getAlbumThumbs('to_show',max_cols,'location_yn','pubdate_yn','position','clear'); ?>
The arguments are the same as in the tag examples above.
Notes
⇑ top

Displaying a list of album thumbnails - the [salbumlist] tag

With the default layout, the album thumbnails are displayed in a two column layout, with the album titles and descriptions to the right of the thumbnails. You can adjust shashin_album_list* in shashin.css if you want a different layout. In a post or page, use the [salbumlist] tag:
[salbumlist=to_show,max_cols,info_yn]
Tag examples
All albums ordered by when they were last updated, with additional album information shown between the title and description (photo count, publication date, and location):
[salbumlist=last_updated,y]
Albums with Shashin keys 2, 24, and 33 only, no additional information shown:
[salbumlist=2|24|33,n]
Displaying in the sidebar
There is no widget for [salbumlist], but you can put it in your sidebar with this code:
<?php echo Shashin::getAlbumList('to_show','info_yn'); ?>
Notes
The notes for [salbumthumbs] also apply to the salbumlist tag. ⇑ top

Displaying a table of photos from a single album - the [salbumphotos] tag

You can display all the photos from a specific album, without having to click an album thumbnail first. The title for the album is shown above the photos:
[salbumphotos=album_key,max_size,max_cols,caption_yn,description_yn,order_by,position,clear]
Tag example
Album with album key 9, 160 pixels thumbnail size, maximum number of columns, no thumbnail captions, show the album description along with the album title, sort in reverse order by filename (title):
[salbumphotos=9,160,max,n,y,title desc]
Notes
Since most themes have sidebars that are too narrow to display tables of thumbnails, there is no salbumphotos widget. ⇑ top

Displaying a table of any photos you choose - the [sthumbs] tag and widget

In a post or page, use the [sthumbs] tag:
[sthumbs=photo_key1|photo_key2|etc,max_size,max_cols,caption_yn,position,clear]
Tag examples
Display photos with Shashin keys 5, 202, 115, 84, 33, and 189, size of 160 pixels for each image, display in 2 columns, no captions, float right (this is a 2x3 grid of pictures, floating to the right of the page's main content)
[sthumbs=5|202|115|84|33|189,160,2,n,right]
Display photos with Shashin keys 5, 202, 115, and 84, use the maximum possible size, 2 columns, show captions, centered (the size of the images depends on the width of your theme's content area)
[sthumbs=5|202|115|84,max,2,y,center]
Displaying in the sidebar
You can pick the Image Thumbnails widget, or use this code and substitute the desired values:
<?php echo Shashin::getThumbs('photo_key1|photo_key2|etc',max_size,max_cols,'caption_yn','position','clear'); ?>
The arguments are the same as the tag examples above. ⇑ top

Displaying a table of random photos - the [srandom] tag and widget

In a post or page, use the [srandom] tag:
[srandom=source,max_size,max_cols,how_many,caption_yn,position,clear]
Tag examples
Pick random photos from albums with Shashin keys 3, 7, and 9, size of 288 pixels for each image, display in 2 columns, 6 pictures total, no captions, float left (this will display a 2x3 grid of pictures, floating to the left of the main content)
[srandom=3|7|9,288,2,6,n,left]
Pick random photos from any album, size of 160 pixels for each image, create the maximum number of columns possible, 10 pictures total, show captions, centered (the number of columns depends on the width of your theme's content area)
[srandom=any,160,max,10,y,center]
Displaying in the sidebar
You can pick the Random Images widget, or use this code and substitute the desired values:
<?php echo Shashin::getRandom(album_key,max_size,max_cols,how_many,'caption_yn','position','clear'); ?>
The arguments are the same as the tag examples above.
Notes
If you change an album's "Include in Random" flag to "No" on the Shashin Tools page, then its photos will not appear in random image displays. The same is true for individual images where you set the flag to "No." ⇑ top

Displaying a table of your newest photos - the [snewest] tag and widget

In a post or page, use the [snewest] tag:
[snewest=source,max_size,max_cols,how_many,caption_yn,position,clear]
See the documentation and examples for the [srandom] tag above. [snewest] works exactly the same way, but shows the newest photos instead of random photos.
Displaying in the sidebar
You can use the Newest Images widget, or use this code and substitute the desired values:
<?php echo Shashin::getNewest(album_key,max_size,max_cols,how_many,'caption_yn','position','clear'); ?>
Notes
[snewest] uses the upload date of photos to determine which ones are newest. ⇑ top

The Shashin and Highslide stylesheets

The CSS for styling Shashin is in your plugin directory at shashin/display/shashin.css. If you want to customize it, copy it to your active theme folder, and edit it there. Shashin automatically looks for a copy of shashin.css in your active theme folder first. This way you won't lose your customizations the next time you upgrade Shashin. Important Note: if you change the padding for ".shashin_image img" or ".shashin_thumb img" you will need to go to the "Settings" page for Shashin and adjust the "Image div padding" and "Thumbnail div padding" accordingly. There's also a stylesheet for Highslide, at shashin/display/highslide.css. Like shashin.css, you can put a customized version of it in your active theme directory. You can find documentation on the Highslide CSS rules here. ⇑ top

Highslide's JavaScript settings

Highslide settings are managed in an "hs" JavaScript object. Its API is extensively documented at highslide.com. With Shashin, the place to make adjustments to the Highslide settings is in the shashin/display/highslide_settings.js file. ⇑ top

Using the "max" keyword to dynamically set image sizes or the number of thumbnail columns

You cannot use "max" for the image size and the number of columns at the same time. Shashin needs one to be a number so it can calculate the other. ⇑ top

Known Issues

⇑ top

Q&A About Shashin

Does Shashin support unlisted Picasa albums?

Not at this time, but there is a workaround - see [p2p type="slug" value="workaround-for-using-unlisted-picasa-albums-in-shashin" text="this post on how to get unlisted albums to work in Shashin"]. ⇑ top

Why store all the album and photo metadata locally? Why not just read the Picasa RSS feed on the fly?

Three reasons: ⇑ top

Are there other plugins for integrating Picasa with WordPress?

Yes, there are other good plugins for Picasa too. IMHO, Shashin is the most flexible and feature rich, but, as you can see from this page, there's a learning curve. If you don't need all of Shashin's features, then you may want to consider a more lightweight plugin - browse the Picasa plugins at wordpress.org. ⇑ top

I'm a programmer and I want to tweak or re-use your code. Is that ok, and do you have documentation?

I've thoroughly documented the Shashin code in PHPDoc. Shashin is released under GPL, so feel free to extend it. I'd like to hear about any features you add. Please be aware of the GPL rules, especially these two: 1. you cannot use Shashin, or portions of it, in proprietary software; and 2. if you re-use portions of Shashin code, you must include my copyright statement in your files. I've already had a problem with one person who re-used several parts of Shashin, and just replaced my copyright statement with his own. This is not only a violation of the GPL, it's also not cool. ⇑ top

What does "Shashin" mean?

I started working on this plugin while living in Tokyo. Shashin is the Japanese word for photograph, so it seemed fitting. ⇑ top

Change Log

⇑ top