Shashin 3.4 Beta: please help test

The beta version of Shashin 3.4 is ready. It has a lot of front-end design changes, which means its needs testing in a variety of browsers. So if you’re comfortable installing WordPress plugins manually, please download the beta version from GitHub and give it a try (important note: rename the folder after you unzip it to “shashin”). It especially needs testing in everyone’s favorite browser, Internet Explorer. Note since this isn’t a normal upgrade through the wordpress.org repository, you will need to deactivate and re-activate Shashin to update its settings.

The biggest new feature is responsive design. This was quite a challenge: since Shashin is a plugin that should work with any theme, the thumbnails it displays need to be responsive to their containing element (the <div> containing a post). This means I can’t just rely on media queries, as they require knowledge of the entire theme layout. So the first thing to note is that if your theme isn’t responsive, Shashin won’t be either. If your theme is responsive, Shashin thumbnails will shrink as the available width decreases. I also tried to find a happy medium for honoring the number of columns you specify for displaying your thumbnails. The rule I’m applying is this: if the thumbnails shrink to less than 80% of their intended size, then the columns will “float”, meaning that the number of columns will go down as the page gets narrower. Also, Shashin detects browser resizing, so you can expand and contract the width of your browser to see how Shashin responds.

Captions now overlay the bottom of the thumbnails, instead of appearing below them. A rule I’ve applied to displaying captions is that they will not appear if they would cover more than 30% of the image.

I’ve improved the browsing experience when you are paging through albums that contain a large number of photos. The “previous” and “next” links will scroll you to the top of the next thumbnail set as you page through them. I’ve added the navigation controls to the bottom as well, which several people have requested.

There are various other updates as well. The complete list is in the Change Log in the readme file.

Please use the comments section on this post for any feedback.

28 Comments

  1. Reply
    Dr John Studley May 30, 2013

    Mike
    I am not sure what I am doing wrong but there is no difference with Shashin 3.4 – the captions are still below etc

    I downloaded the zip – changed it to shashin – deactivated the old shashin and activated 3.4

    Do I need to add different code to the posts or what?

    John

    • Reply
      Mike May 30, 2013

      You should remove the old shashin folder and replace it with the new one from the zip file. If you did that, can you give me a link to your site so I can see?

  2. Reply
    Dr John Studley May 30, 2013

    Hi Mike
    Many thanks – SHASHIN 3.4 is working

    Many of my picasa photos have urls under the caption – with 3.4 and photos with captions are URLs I lose both

    Is there a way to show captions and URLs

    John

  3. Reply
    Dr John Studley May 30, 2013

    Hi Mike

    3.4 does not show long captions

    Is there a way to show long captions/

    John

    • Reply
      Mike May 31, 2013

      Hi John – this is how I have the captions working with thumbnails in the beta version:

      * They are shown in an overlay, across the bottom of the thumbnail (instead of below the thumbnail)
      * Words beyond 50 characters are truncated
      * If the caption overlay would cover more than 30% of the thumbnail image, the caption is not shown at all

      I’m limiting what’s shown in the caption so that long captions won’t cover the entire thumbnail image. Note that the full caption is still part of the “alt” and “title” attributes for the thumbnail, so if you hover over the thumbnail for a couple seconds, your browser will display it.

      The alternative would be for me to change it back to showing the captions below the thumbnails. I changed it because I felt the overlay looked better, especially when there are small thumbnails that have long captions (in the old version you’d end up with a very tall, narrow container for the caption).

      But it sounds like you would prefer it the old way… let’s see what others think too.

  4. Reply
    Meester June 1, 2013

    Hi

    I love the new look & truncated overlay captions!
    I do wonder though, if it’s not possible to make automatic slideshows of pictures (a little like Picasa’s slideshow)?

    What I also find less convenient is that when you have album photos that contain multiple pages, and PrettyPhoto reaches the last picture of that page, it doesn’t automatically continue to the next picture (on the following page). You actually have to click “Next” above/below the album page to continue to the next page before you can continue.

    Regards!

    • Reply
      Mike June 1, 2013

      Hi Meester – thanks for the feedback. I’ve been wanting to creating slideshows like you’re describing, I just haven’t had time to work on it. I figured I should get responsive design support taken care of first.

      Having prettyPhoto automatically advance to the next page is a neat idea. I’ll see if I can make that happen (without hacking prettyPhoto)

  5. Reply
    Dr John Studley June 1, 2013

    Hi Mike
    I have gone back to 3.4 because 3.4
    1) Does not show long captions
    2) Does not show captions with URLS
    3) Does not render well in my Blackberry (in 3.3 it renders fine)

    Is it possible to combine the best of both (in 3.4 I like the ability to be able to change the caption background and font colour)

    I also have problems in 3.3 and 3.4 with Highslide – firstly it tells me to load toppa plugins (no problem) but when I try to activate I receive errors

    Although most of my photos are geotagged (in picasa) I am not getting a google Map Icon under captions in Shashin (as shown in your example)

    Although I have selected “all” for exif I only get date and camera details?

    Regards

    John

    • Reply
      Mike June 1, 2013

      Thanks for the feedback John. I have not tested in a Blackberry (I don’t know anyone who has one). I’m surprised to hear you say the the old version is better though, as it had no support at all for phone-size displays. But it’s possible there’s a compatibility issue with Shashin 3.4 and the browser on blackberry – do you happen to know if blackberry uses their own custom browser?

      I’m in the process of updating the Shashin documentation – Highslide is no longer supported (I removed support in Shashin 3.3). Highslide is not compatible with the WordPress licensing requirements, and Highslide hasn’t been updated in over 2 years.

      The map icon and other details aren’t shown in the caption when the thumbnail is small (again, due to limited space).

      For EXIF, Shashin shows the information supplied in the Picasa API feed, which consist of camera details and the date and time. So I don’t have access to any other data.

  6. Reply
    Dr John Studley June 3, 2013

    Hi Mike

    Shashin v 3.3 works well with a BB 9360 on both the custom browser and Opera Mini. It works best with just Shashin thumbnails. It also links well with picasa mobile

    John

    • Reply
      Mike June 4, 2013

      Thank you for the details. I’ll see if I can add an option to the new version to display the captions under the photos, like the previous version.

      Can you describe what the problem is with the new version in your Blackberry?

      • Reply
        Dr John Studley June 5, 2013

        Hi Mike

        From memory – with 3.4 (and the BB browser) the images took ages to render and then they were 95% caption and 5% image

        John

  7. Reply
    Brad Lewis June 13, 2013

    Mike, just downloaded version 3.3.99 and am getting the following error when trying to activate. Fatal error: Class ‘ShashinWp’ not found in /home2/inmylens/public_html/wp-content/plugins/Shashin-3.3.99/start.php on line 24
    Brad

    • Reply
      Mike June 14, 2013

      Brad’s already resolved this, but for anyone else with this problem, the folder name needs to be “shashin”, with a lower case “s”. I’ve now highlighted this in the blog post.

  8. Reply
    BradRLewis June 13, 2013

    Mike,
    i did get 3.3.99 installed by just copying the code, via ftp, over the existing code. I have tested on several smart phones, tablets, laptops and browser and really the only issue i am having the the smart phones. As described before the photos is smaller than the thumbnail and the caption area takes most the page. Also the “view at Picasa” is now a large white box. Let me know if you need a screen capture. I really like the new thumbnail display and navigation between pages when viewing an album with many photos, very nice. Brad

    • Reply
      Mike June 14, 2013

      Thanks very much for taking the time to test it. I really appreciate it. I also noticed that in prettyPhoto on my phone, the space needed for the caption text didn’t leave much room for the photo. I’m thinking of adding a media query, so that if it’s a phone-sized screen, to have prettyPhoto not show the caption at all.

      I put the “view at Picasa” link in a box to make it clear that it’s not part of the caption text, but even with the font size set to x-small, it still seems too big. I’ll see what else I can do with it (it’s not actually essential to show that link for Picasa, but for Twitpic it’s part of their user agreement that you must provide a link back to the original photo).

      • Reply
        Brad Lewis June 23, 2013

        Mike,
        First a question, what is the best way to update my list of picasa sites? For example i just took a bunch of pictures, uploaded to picas and now want to sync to my shashin list. When i go to tools, shashin, sync all I get the following error. If I copy and paste my picasa url string then it will refresh with my new photos.

        Shashin Error:

        Failed to retrieve album feed athttps://picasaweb.google.com/data/feed/api/user/111865263222973454893/albumid/5773414681153167121?alt=json
        Error Response: 404 Not Found

        Now for a few more comments on your updated version. I would really recommend you create a media version that does not include captions or exif data, that would be a great idea per your previous post. Also you could create a check list of which exif data to include to help reduce the number of fields. The other option if that is to much hassle is to remove a few of the exif fields like manufacturer. If you have model you typically don’t need manuf. I have commented out a few of the fields, added an “f-” for aperture and it cleaned up the list. Here is a sample post with the streamlined version. I did also update the css to move the exif data up the the same line as the title.

        I had to smile at your comment about view at Picasa, I almost took it out but updated it so it was smaller and took up less room.

        Just trying to optimize the space. If I made too many changes sorry but one I started playing may have gotten carried away. If you would like to know exactly which files I modified I would be happy to send the to you.

        Thanks Again and I really like this updated version, very cool!!!!
        Brad

  9. Reply
    Sebastien August 1, 2013

    When Shashin 3.4 will be public release ?

    Regards

    • Reply
      Mike August 1, 2013

      Sorry I’m late finishing it. I’ve had a busy schedule this past month. I will try to finish it in August. I still need to improve how prettyPhoto looks on mobile devices, and I’d like to provide an option to keep the thumbnail captions below the photo (so they don’t get truncated, for those that prefer it that way).

      • Reply
        Sebastien August 1, 2013

        Great 🙂

        Thank you for support !

  10. Reply
    Brad Lewis September 7, 2013

    Hello Mike,
    Just checking in to see if you are back working on the new shashin update and needed any testing?

    Brad

    • Reply
      Mike September 9, 2013

      Hi Brad – yes, I’ve been making more updates. I’ll post a comment here again when I have a new version on github. Should be within a few days.

  11. Reply
    Brad Lewis September 30, 2013

    Hey Mike,
    I decided to download 3.4.2 and it is much better than 3.4.1, the xsmall image issues are gone based on the number of photos/columns. I will keep testing and let you know if I find anything else.

    Brad

    • Reply
      Mike September 30, 2013

      Thanks Brad! 3.4.2 actually isn’t quite done (I upped the version number on github a little too soon). I’ll push up some more updates tomorrow and then give it a release tag. The main thing I’m doing is giving an option to show the thumbnails with the old style (captions underneath, etc), as I’ve gotten requests for it.

      • Reply
        Mike October 1, 2013

        Brad, I just pushed up version 3.4.2 to wordpress.org. Since the version you downloaded from github wasn’t complete yet, after you upgrade to the latest version, you’ll need to de-activate and re-activate shashin to force the completion of the upgrade (internally the code checks the version number to determine its upgrade steps, and you got the 3.4.2 version before it was done).

  12. Reply
    Brad Lewis October 2, 2013

    Ok I am now on the wordpress download version of 3.4.2, thanks

  13. Reply
    Brad Lewis October 2, 2013

    Mike,
    I am finding a few bugs in 3.4.2 in the auto sizing and the layout of the icons. on full width everything is fine, as the browser width shrinks the images get smaller and then go from 5 colums to 1 even though there was room for 4, 3, 2, width columns before 1. Also notice if you play enough sometimes you will get smaller icons but then it jumps back to one column of larger icons. You can see this on PC/Mac browsers also on the ipad all the pages are always now only 1 column wide which is a bigger deal and where i first noticed the issue.

    The other issue with the ipad is it is not picking up the format settings of a black border for the pretty box window. previous released versions this did but has not been correct since the 3.4 versions.

    Below are 2 sample links with different number of icons. Along with my sample shortcode for the small and xsmall images.

    ‘[shashin type="albumphotos" id="999" size="small" crop="y" columns="5" caption="n" order="date" reverse="y" position="center"]‘

    ‘[shashin type="albumphotos" id="999" size="xsmall" crop="y" columns="10" caption="n" order="date" reverse="y" position="center"]‘

    http://www.inmylens.com/portfolio/acorn-woodpecker/

    http://www.inmylens.com/portfolio/annas-hummingbird/

    • Reply
      Mike October 2, 2013

      Thanks Brad. I had it so it was gradually removing columns – I must have inadvertently changed the behavior in one of my final changes. I’m seeing that problem now too. I’ll check it out and get it fixed. And thanks for catching the issue with the borders – I hadn’t noticed that. I’ll check into that too.

Leave a Reply