Download & install SSG

Story Show Gallery is in WordPress plugins directory, so you can install it directly from WordPress admin: Plugins menu – Add new – search for Story Show Gallery – install now button – activate.

Or you can download it as a ZIP archive and install manually:

  1. Unpack the downloaded zip file
  2. Upload story-show-gallery folder to the /wp-content/plugins/.
  3. Activate the plugin through the Plugins menu in WordPress.
  4. Click on settings link for more options


Any size donation is greatly appreciated. It will help me to continue developing Story Show Gallery for WordPress.

Show a story with your photos!

Story Show Gallery for WordPress is especially for photographers and all who want to present photos without distracting elements (no arrows and icons around a photo). SSG is a truly minimalist gallery, you can browse through the gallery just by scrolling or touching. View demo gallery:

Main features

  • Story Show Gallery is fully responsive – works on a desktop, tablets and smart­phones. For every image SSG calculates optimal position of a text caption to utilize a whole screen:
    SSG compares image size vs. screen size and place a caption to optimal position.
  • Fullscreen mode with an unobtrusive scrollbar and cur­sor. Even dark photos are well visible.
  • Story Show Gallery is just a presentation layer, it doesn’t change your existing WordPress galleries in any way.
  • Ready to go out of the box, works with existing galleries and images. SSG uses standard WordPress gallery, so working with photos stays the same.
  • 3D animation of image thumbnails.
  • Story Show Gallery supports Google analytics. Find out, how long site visitors view each photo and how many times.
  • Gutenberg ready.
  • Every image has its own adress, so you can link into the gallery to show a part­icular pho­to.
  • Browsing through the gallery by scrolling, tapping or keyboard.

How to easily caption multiple images

Firstly, let me write few important things about WordPress image captions. When you look into the gallery settings, there are four fields for each image, where you can enter some image’s description:

 

Story Show Gallery displays as an image caption only Alt text for a very good reason:
An alt text is required by HTML standard. Google considers the alt text as a part of page’s content, it helps the page to rank higher in Google search. Other fields are matter of WordPress. Title and Description are shown on a separate Attachment page, so they don’t help page in Google search. Caption is great for a single image, below the small gallery’s thumbnail isn’t enough space for a caption.

But isn’t the alt text field too short?

Yes, it is. That is why I use Quick Alt Editor plugin. It has much longer alt text field and you can easily edit the alt text at multiple images. But it works only within the Media Library:

Media library with Quick Alt Editor plugin. You can easily edit captions at multiple images
Media library with Quick Alt Editor plugin. You can easily edit captions at multiple images

To have as much space as possible it is necessary to deactivate all columns in the Media Library except the alternative text column. To deactivate them click on the Screen options at the top of Media Library.

My workflow of adding photos into the gallery is following:

  1. I upload all photos into the Media Library
  2. I enter the alt text for all photos
  3. And finally I add the photos into the gallery in some post

Controlling Story Show Gallery by CSS classes

You can selectively deactivate Story Show Gallery by the nossg class. After click on the image below SSG won’t activate and the full image will open normally into a new tab of a browser.

This image will open into a new tab of a browser because of nossg class

You can enter nossg and other classes into a Gallery and Image settings:

This image has gossg and fs class. It will show in the full screen gallery only if you click on it.
This image has gossg and fs class.

An image with gossg class will show in the gallery only if a user clicks on it. If a user activates Story Show Gallery through another image, images with gossg class won’t be in the gallery.
The fs class opens image into full screen. Images inside a gallery opens into full screen by default.

The gallery below has no classes, it is here just for complete showcase:

If you click on the image with classes settings, four images will show in the full screen gallery.
If you click on some thumbnail above, only three images will show in the full screen gallery. This happens because of the nossg class assigned to the single image.

Deep linking

Every image in Story Show Gallery has its own URL adress in following format: www.myblog.com/postname/#photoname. So you can use it to link directly into your gallery to show the photo.

As you are browsing through the gallery, the #photoname is constantly changing according to currently viewed photo. And the whole address is shown in the browser’s navigation bar, but the bar isn’t visible in the full-screen mode.

So there is a little hack. If you will hold alt key and click on a thumbnail the SSG won’t run into full-screen.  And you can copy image address in browser’s navigation bar:

There is one exception, it doesn’t work in Opera browser due to some conflict with CSS image cursor.

Sample Link to photo in Story Show Gallery

If you click on it, Story Show Gallery will open and show the linked photo. SSG will also offer a full-screen mode for better experience. It can’t be activated without a click of a site visitior.

If the #photoname is too long, you can use just a crucial part of it. For example: #bats-in-bankang-cave.jpg can be shortened just to #bankang, #bats or #cave. Story Show Gallery displays the first photo which name contains bankang, bats or cave. SSG search for the photo just within one page which address is in the link.

 

 

Find out, how long site visitors view each photo

Story Show Gallery supports Google Analytics – every viewed image is logged into your Google Analytics account. So you can see statistics for all images viewed via Story Show Gallery – how many times each photo was seen and for how long:

Three days statistics for my site ssg.flor.cz

Photo called its-time.jpg was viewed 106 times, and visitors look at this photo for average time of four seconds. Unique pageviews means that photo was viewed within 48 unique visits, so in the each visit it was viewed in average twice a time.

If you already have GA tracking code on your website, SSG already counts image views into your statistics.

Setting up Google Analytics

  1. Set up account at https://analytics.google.com/analytics/web/. You will get an unique ID for your website. There are a lot of tutorials on YouTube about Google Analytics.
  2. Install the WordPress plugin, which adds Google Analytics on your website. I can  recommend this one – https://wordpress.org/plugins/ga-google-analytics/
  3.  Enter the your GA tracking ID into the plugin settings and set the tracking method to Universal Analytics / analytics.js
  4. After few hours you will see first numbers – detailed statistics for your whole website (not only photos).

It’s important to give each photo some meaningful name, before you upload it into WordPress. Because you will see that name in the statistics.