Shashin 3.4: responsive design and social sharing

Shashin 3.4 is now available for download at wordpress.org. It has great new features for sharing your photos, and for responsive design (so your pictures will look good on any size display). Check out Post to Post Links II error: No post found with slug "shashin-3-development-progress" to see it in action.

Important upgrade notes:

  • This version of Shashin comes with a customized version of prettyPhoto. On the Shashin settings page, you will want to pick prettyPhoto as your viewer to take full advantage of the new responsive design and social sharing features.
  • If you customized your Shashin stylesheet (shashin.css) in a previous version and placed it in your theme folder, you will need to update it to incorporate the latest changes in the new version.

New features:

  • Sharing: you can now share a link that will take you directly to any Shashin photo on your site, and automatically open it in prettyPhoto. The sharing links appear below the caption in prettyPhoto.
  • Mobile display of slideshows: I’ve customized the version of prettyPhoto that comes with Shashin to improve its display on mobile devices (if you are using Fancybox, I’ve disabled it on mobile displays, as it simply doesn’t work very well on them).
  • Two thumbnail design options to choose from: one is almost exactly the same as the design Shashin has always used – showing the captions underneath the thumbnails and putting a border around each thumbnail. The other design gives the thumbnails rounded corners, a slight box shadow, no borders, and puts the captions in an overlay along the bottom of the thumbnails. Long captions are truncated, to prevent them from covering the entire thumbnail. You can specify which design you want on the Shashin settings page.
  • Responsive design for thumbnail layouts: Shashin will resize and rearrange thumbnails to best match the available space on the page. The final result for a given layout depends on several factors. Let’s say you want to display 3 thumbnails in a single row. If you enter “3” for the columns in your Shashin shortcode, Shashin will try to give you 3 columns. How many you actually get depends on how big the thumbnails are, and how wide the content area is. If the content area isn’t wide enough to accommodate the thumbnails at their full size, Shashin will scale down the thumbnails to about 90% of their actual size to maintain the 3 column layout. After that, it will let the columns start to “wrap,” so the thumbnails don’t shrink too much (that is, the number of columns will go down). If you gradually narrow and then widen your browser window you can see Shashin re-arranging and scaling its thumbnails on the fly.

Implementing responsive design for Shashin was a real challenge. This is because the traditional tools for responsive design – media queries – are not helpful with Shashin. Since Shashin is a WordPress plugin that needs to work in any theme, I couldn’t make any assumptions about the page layout. So basing layout decisions on the display width of the viewing device or the browser window is not helpful. What I need to know is the current width of the HTML element Shashin happens to appear in, which could be anything. So I implemented Shashin’s responsive design with a mix of CSS and jQuery.

Please post any support questions in the wordpress.org support forum for Shashin, not here.

Leave a Reply