Show a story with your photos!

SSG is vertical gallery lightbox optimized for smartphones (notch area included). SSG will support your brand and marketing. It has optimally placed captions, full screen mode, no ugly arrows. View demo gallery:

↑ Optional 3D animation of image thumbnails is part of this plugin.

SSG lightbox works with existing WordPress galleries (and images) or optionally with galleries made with other plugins. Story Show Gallery is Gutenberg ready and works out of the box.

Your photos in the main role

Give your photos maximum space with SSG full screen lightbox, it works on every display size. The gallery doesn’t have any ugly arrows next to a photo, vertical slider and cur­sor are subtle.

On smartphones, full screen mode works like on You­Tube. It activa­tes after rotating a phone into landscape mode. Story Show Gallery can use whole smartphone display – even notch area:

SSG (on the left) versus usual gallery lightbox. Do you want more icons or more from a photo?
SSG (on the left) versus usual gallery lightbox. Do you want more icons or more from a photo?

There is no icon for full screen mode, I did a little research and users simply don’t use it. So it’s up to you, if the gallery will go into full screen.

Browsing without clicking and thinking

Scrolling is the most natural interaction with a webpage. Story Show Gallery works like Facebook – as a user scrolls down new pictures are constantly loading.

Story Show Gallery is vertical and therefore great for use with smartphones. In portrait mode a user usually sees a part of the next photo, so he keeps scroll­ing to see it whole.

Brand building and social sharing

SSG can display your logo or some text (emoji) over images. You can configure it in the SSG settings.

Social sharing icon is not put aside, it is part of a content, but subtle. A spectator’s eyes will literally crash into the share icon at the end of a caption or in the corner of a photo. It can be disabled in the settings.

SSG supports deep linking into the gallery to show a part­icular pict­ure.  Just use image name in the hashtag:

Complete your photos with captions

With captions you can tell the whole story behind pictures or amuse a spec­tator with some fun fact.

Google treats captions as a text content. Especially when you haven’t much text on your page, captions will help a lot your page to rank higher in Google search.

SSG is probably the only gallery which can place each caption individually according to image size vs. screen size. It is really important on smartphones.

SSG compares image size vs. screen size and place a caption to optimal position.

Some more features

  • Support of  Google analytics. Find out, how long site visitors view each photo and how many times.
  • Animated transition while scrolling is similar to old slide projectors – it is combi­nation of sliding and fading.
  • Protection of photos from being copied via right click menu.
SSG

Download & install SSG plugin

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.

SSG

Gutenberg gallery

Gutenberg is the new block editor which came with WordPress 5 and it has also new gallery. Story Show Gallery is compatibile with Gutenberg.

SSG

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
SSG

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 particular 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:

In full screen mode you can get an image link via social share icon, where is the 🔗 link option.

Sample Link to a 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 an active 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.

SSG

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, but you can change it in the SSG settings.

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 gossg class assigned to the single image.

SSG

Google Analytics

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 this site

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.

 

SSG

SSG as the jQuery library

SSG Wordpress plugin is based on SSG jQuery library, which can be used on every website. It is very easy to implement, you just need to add three lines of code.

Find out more about Story Show Gallery jQuery library.

SSG