Story Gallery

This is an alternative way of displaying News items in a responsive grid view.

This is an advanced feature of our web system.  As such, you need to be comfortable working with HTML to implement this.  

The story gallery will pull the News items from a folder(s) and displays them in a responsive grid view.  Each grid will display the Title as well as a thumbnail of the Image or Video attached to the News item.

StoryGallery_01.png

When one of the grids (News item) is clicked, the display expands to provide a larger image along with the news items Title and Summary information.

StoryGallery_02.png

 

Create the News Items

  • Before you can add a story gallery to a page, you will first need to create the news items that are to be displayed in the story gallery.
  • We suggest that you create a new folder to contain all the news items for the story gallery.  
  • Only published news items will display in the story gallery.

 

Categories

The web system allows you to group your stories (News items) into categories.  Lineberger, for example, created categories for the different types of cancer (brain cancer, breast cancer, leukemia, lung cancer, etc.).  Categories are optional and can be removed from the gallery view if you choose not to use them.  If you do decide to use categories, you have the option of defining them either by tags or by folders.

From Tags

When creating a news item (while in edit mode), click on the Categorization tab to either select an existing tag or create a new tag.

Tags

From Folders

In the folder that contains the news items, you can create sub-folders to organize the news items.  It is the title of these sub-folders that can be used to create the categories.  For example, Lineberger opted to create categories from folders.  They created a main "Patient Stories" folder.  Within that folder they created a another folder for each of their categories - Breast Cancer, Lung Cancer, Leukemia, Brain Cancer, etc.  The corresponding News items should be created or moved to their appropriate folder/category.

 

Set the Editing Preference For the Page

In the main folder containing the News items for your story gallery, create a new page.  

Before you can add a story gallery to a page, you must first change the editing preferences on the page you wish to add the gallery to. Doing so will disable the editor and will require you to work with the HTML.  Reference our Editing Preferences page which tells you how to change the editing preferences on a single page If you do not change the editing preferences before adding a story gallery, the editor will modify the custom code and the slideshow will never work.

 

The Code

Copy the code listed below and paste it into the page that you created in the step above.

<div id="storygallery">
<script type="text/javascript" src="++theme++SOMTheme/js/somstorygallery.js"></script>

<p class="som-story-gallery-no-js"><a href="site-name/folder-name">Link to Patient Stories</a></p>

<script type="text/javascript">
        $(document).ready(function () {
	        somStoryGallery({
		        sourcePath: 'site-name/folder-name',
                        container: '#storygallery'
	        });
        });
</script>
</div>

You will need to replace site-name/folder-name that is listed twice in the code and is highlighted in bold red, with the correct path to the folder containing the news items you wish to display in the story gallery.   For example, lccc/patientstories.

 

Options

Here is a list of all the options that can be configured to customize the story gallery.

NameTypeDefaultDescription
sourcePath string ' ' The path to the folder containing the news items to be displayed.  This is a required field.
perPage number 16 Max number of news items to display per page.
categorizeBy string 'folder' Determines whether categories are pulled from the name of the containing folder of a news item, or the news item's 'tag' (category/keyword). Your options are either 'folder' or 'tag'.
showCategories boolean true Determines whether or not the categories (folder name/category/keyword) is shown at all.
allowFiltering boolean true Provides a drop-down menu for users to filter news items by category (folder/keyword).

 The code for these options needs to be inserted into the somStoryGallery section of the code.  Each option needs to be followed by a comma unless it is the last option listed.  Here is an example:

<div id="storygallery">
<script type="text/javascript" src="++theme++SOMTheme/js/somstorygallery.js"></script>

<p class="som-story-gallery-no-js"><a href="lccc/patientstories/">Link to Patient Stories</a></p>

<script type="text/javascript">
$(document).ready(function () {
somStoryGallery({
sourcePath: 'lccc/patientstories', container: '#storygallery',
perPage: 10,
categorizeBy: 'tag',
showCategories: false,
allowFiltering: false
});
});
</script> </div>

perPage

Allows you to specify the maximum number of news items to display per page.

categorizeBy

Determines whether categories are pulled from the name of the containing folder of a news item, or the news item's 'tag' (category/keyword).  This option can be set to either 'folder' or 'tag'.

showCategories

Gives you the option of showing or hiding the categories.  If they are displayed, it will be under each news item's title.  This option can be set to true or false.

showCategories.png

allowFiltering

Provides a drop-down menu for users to filter news items by category.  This option can be set to true or false.

allowFiltering.png

 

 

Examples

UNC Lineberger uses the story gallery to highlight patient stories.  

StoryGallery_01.png

 

The Children's Cochlear Implant Center

StoryGallery-03.png