NWRS Developer’s Notebook

Multimedia

1 | P a g e

The NWRS Multimedia section for each microsite (Refuge) can be considered from two distinct vantage points:

1.) Structure (navigation)2.) Content (subject & type)

The structural elements are comprised of four interrelated entities:

1.) Multimedia Landing page smart form record 2.) Media Listing PageBuilder Page (with embedded custom widget)3.) Multimedia subject three column smart form record (aka the Multimedia “Browse by” record)4.) Multimedia Refuge Section Configuration smart form record

The first three structural elements are stored in the Multimedia folder. The last (the multimedia section configuration) is stored in the Section Configuration folder).

Multimedia Folder

Section Configurations Folder

2 | P a g e

The content is maintained in the MM Galleries folder.

Multimedia Galleries Folder

******************************************************************************

NB: If managed properly, there should be NO NEED to create new folders or pages in the Multimedia section other than Gallery smart form records in the Multimedia Galleries folder.

There is no need to add folders for a specific media type as that is managed in the Multimedia Gallery records themselves.

The files in the Multimedia folder itself are very much like The Highlander: there can be only one. Adding files to the Multimedia folder is counter-productive and would most likely end up causing problems.

******************************************************************************

Structure

There are a handful of identifiers that are stored in several of the structural records which relate or “bind” these records together.

The Multimedia Folder ID The Multimedia Galleries Folder ID The Content ID of the Media Listing page The Content ID of the Multimedia subject three column smart form record in the Multimedia

Folder (aka the Multimedia “Browse by” record)

3 | P a g e

Section Configuration

The Multimedia Section Configuration record needs Multimedia Folder ID, the Content ID of the Multimedia “Browse by” record as well as the URL of the Media Listing page.

Multimedia Section Configuration Details

1.) Section Folder ID – set to the Multimedia Folder ID – assigned through a folder resource selector2.) Menu ID – this is the ID for the menu to display in left column for all Multimedia pages. *Section

Configuration menu settings are covered in greater detail in the Developer’s Notebook: Refuge Configuration document.

3.) Section settings – if the Section dropdown is set to “Multimedia”, then the Multimedia Setting section is displayed. Both settings are links to records in the Multimedia Folder:

a. Browse By Multimedia Category List resource selector – linked to the Multimedia “Browse by” record in the Multimedia Folder

b. Multimedia Listing Page link – linked to the Media Listing PageBuilder Page

NB: The last item – the listing page - is quite important as it forms the basis for links dynamically generated on the Multimedia Landing page.

4 | P a g e

Section Configuration

The Multimedia Section Configuration record dictates two consistent UI elements within the overall Multimedia section of the refuge: the left column menu; and the “Browse by” section in the main content column.

One note about the Multimedia navigation in general, there is a permanent – required – link to the Multimedia Landing page in the right column. It is defined in the Refuge Homepage smart form record in the Home folder. As such it will be detailed under separate cover.

Right Column Multimedia Link

Multimedia Section “footer” – Browse By links

The “Browse By” section is limited to 3 columns with 20 items in each column. The layout is determined by the Browse Multimedia Three Column List smart form record in the Multimedia folder. The “Browse By” section content column “footer” is discussed in greater detail on page 19 below.

5 | P a g e

The Landing Page

Even though the Section Configuration determines the left column menu and the “Browse By” section footer element, the primary means of navigating the Multimedia section of each Refuge will be the Multimedia Landing page.

The Multimedia Landing page can be considered as having two separate sections – or halves. It has a top half which is a set of text & image elements (with optional description and link elements), and a bottom half with a “list” of items.

Multimedia Landing Page - Top half in front-end UI

1.) Title – this is hardcoded. All refuges will display “Multimedia Galleries” in this position2.) Main image – required – assigned in Multimedia Landing Page smart form record3.) Description – required – assigned in Multimedia Landing Page smart form record4.) Introduction Link – optional – assigned in Multimedia Landing Page smart form record. Should

link to a Multimedia Gallery record.

Please note: the left column menu is defined in the Section Configuration record as described above.

6 | P a g e

Multimedia Landing Page - Top half in back-end CMS Workarea

1.) Main Image – corresponds with item #2 above2.) Description – corresponds with item #3 above3.) Introduction Link – optional – corresponds with item #4 above

7 | P a g e

Multimedia Landing Page - Bottom half in front-end UI

Items in the bottom half are in a list stored in the Multimedia Landing Page smart form record.

8 | P a g e

Multimedia Landing Page - Bottom half in back-end CMS Workarea

You can have as many items in this list as you like, but the required link value is appended to the Media Listing Page link assigned in the Multimedia Section Configuration. (Please see refer to item 3b. in the Multimedia Section Configurations Details on page 4 above for more info about the “root” link that the type gets appended to.) Given that the Link dropdown list has only four items, the practical limit of items listed on the Multimedia Landing page is four.

Each item in the list has four required components:

1.) Title – this is free-text, but assigning a value that most closely matches the link type makes the most practical sense.

2.) Image – this is a small image used for decorative purposes3.) Description – this is a short blurb that should help illustrate the gallery type being linked4.) Link – better described as link type, this is a parameter passed to the NWRS_MediaListing widget

embedded in the Media Listing PageBuilder page.

9 | P a g e

The Media Listing Page

As noted above, the link to the Media Listing page is coupled with the Link Type from the Multimedia Landing Page smart form items section. The result is a link to the Media Listing page with a Media Type being passed to the page.

The Media Listing page is a PageBuilder Page with a single embedded widget: the NWRS_MediaListing widget.

Multimedia Media Listing PageBuilder page – Viewing Details in CMS Workarea

Multimedia Media Listing PageBuilder page – Editing Widget settings in PageBuilder Template

10 | P a g e

When a site visitor clicks on a link to the Media Listing page – like the Media Type links on the Multimedia Landing page detailed above – the Media Listing PageBuilder page loads and the NWRS_MediaListing widget loops through ALL Gallery records in the Multimedia Galleries folder and filters the returned list based on the media types passed to the page (and by extension the widget itself).

It is important to remember that the Media Listing PageBuilder page settings set the Folder ID so the NWRS_MediaListing widget knows which folder to look to for content. It is also important to note that the NWRS_MediaListing widget has a Default Gallery Type setting, so even if there is no value passed to the “type” URL querystring parameter, the widget will use the default value supplied in the PageBuilder settings.

Compare the two following screenshots. Both were arrived at via clicking on links in the Multimedia Landing Page. The first shows there is only one record with a set of photos: Rocky Mountain Elk. The second shows there are several Gallery records with Videos as well as several Video items in each. (Please refer to the Multimedia Gallery Smart Form section below for more information.)

Media Listing Page with single set of results for Media Type

11 | P a g e

Media Listing Page with multiple results for Media Type

A Quick Note about the Media Listing Page and Gallery Media Types

****** Important ******

“Photos” are unique amongst the Media Types. Photos are treated as a collection assigned to a gallery, so the results list for the Media Listing Page when filtering for photos are links to the Gallery Detail record(s). Conversely, the other three Media Types (Video, Audio and Web Cams) are treated as individual entities.

This distinction is very much apparent in the two screenshots above. The first shows links to the Gallery Detail page only. The second shows links to both the Gallery Detail pages as well as links to the individual media files themselves.

12 | P a g e

Galleries, Files and Media Types

Much like the Multimedia Landing Page – particularly the smart from – the Multimedia Gallery Detail record can be consider as having two halves: a top half that defines the Gallery itself and a bottom half that lists items in the Gallery grouped by type.

Regardless of how the site visitor arrives at an individual Gallery Detail record in the Refuge website, he or she will be presented with a screen that looks very much like the following:

Multimedia Gallery Detail Page

Every Gallery has a few key, required, components:

1.) Title2.) Main image3.) Description4.) At least one Media Type

13 | P a g e

So let’s look at a Gallery smart form record in the Workarea (note the numbered items in the image below align directly with the numbered items in the previous image):

Multimedia Gallery Detail smart form record in Workarea - Top Half

1.) The Content Title is the Title of the Gallery. This is used for text displayed in links to the Gallery Detail in the Refuge website UI.

2.) Main Image. This is the image that “defines” a Gallery in the Refuge website UI. Not only is this a required element, but the image itself should be 713 pixels wide by 410 pixels tall for best results.

3.) Description. There is no limit on text entered here, but 120 – 180 characters seem to display well.

The “bottom” half of a Gallery is where the files and links are assigned.

14 | P a g e

Multimedia Gallery smart form in CMS Workarea with no Media Items defined - Bottom Half

If we were to click the blue cross in the Photos section, we would begin the process of adding an image to that Gallery’s photo collection:

An individual photo being added to a Gallery smart form record - Bottom Half Detail

Photos are treated as a “collection” assigned to a Gallery, whereas all other media types are treated as individual links – regardless of the number assigned. Media types other than “Photos” are individual

15 | P a g e

links to the media source itself – wherever it lives in the internet, as long as it’s a well-formed URI, it’ll work.

When adding a photo to the Gallery, you will need the full-size image (recommended 712px × 534px), a small thumbnail image (recommended 70px × 53px) and a short description.

An individual photo being added to a Gallery smart form record - Bottom Half Detail with sample data

16 | P a g e

When the user clicks the Photos button on the Gallery detail page on the Refuge website, they launch the Photo Gallery viewer Colorbox, this JQuery widget has several UI elements including a photo gallery scroller -which displays sets of thumbnails; a view of the full-size image; the image description; etc.

An individual Gallery photo being displayed in the Photo Gallery viewer on the refuge website UI

The items numbered in the image above align directly with the numbered items on the previous image.

17 | P a g e

A detail from a Gallery with all four Media Types defined

As mentioned above, when a Multimedia has Photos added, the Photos button will launch the Photo Gallery Colorbox image gallery viewer with ALL images loaded. The other three Media Types link directly to the Media Listing page. However, this time the Media Listing page is not only filtered by Media Type, but is filtered by the Gallery record itself.

Gallery Item List by Media Type and Gallery – Refuge Website Detail

The individual links to non-Photo Media Type files are links directly to the source file. No media players were created for this solution. Media files are relying upon the local users system for media players.

18 | P a g e

A Further Note on Multimedia Section “Browse By” Content “Footer”

As noted above, there is a “Browse By” section element referenced in the Multimedia Section Configuration file. This element is defined by the “Browse Multimedia Section” Three Column List smart form record in the Multimedia folder. (Please see the Multimedia Folder screencap on page 2.)

Browse Multimedia Section Record Smart Form Detail

19 | P a g e

1.) Content Title – only visible in the CMS Workarea2.) List Title – the text that appears at the bottom of all Multimedia pages, above the “Browse By”

list3.) Column Items4.) New Column Item – clicking the blue plus adds a new item to the list5.) A Single Column Item – each item has two required fields and two optional fields

a. Item Link – required – links to the Multimedia Gallery recordb. Additional Text – optional – will appear next to the list item in the listc. File Size – optional – appears in parenthesis in the listd. Column – required – determines which column the item is listed in

NB: the “order” of items in a given column is determined by how they are listed within this smart form. To move an item click the small “page” icon that appears to the left of each Column Item in the smart form, the context-sensitive menu will allow the editor to “move up” or “move down” as desired.

Browse By Section UI Detail

This Section Detail demonstrates the optional and required fields entered into the smart form record illustrated in the previous image.

20 | P a g e