Rich web storiesWith Paragraphs and Islandora DAMS

Alex Bridge / Tassos Koutlas

Who we areAlex Bridge

alexb@cogapp.com

Tassos Koutlas

tassosk@cogapp.com

OverviewAbout the projectDrupal and Islandora DAMSCreate rich web storiesDiscussion

Baseball Hall of Fame

Serves as the central point for the study of the history of baseball in theUnited States and beyond.

Stats last monthPageviews: ~ 765,000Sessions: ~ 305,000Active users: ~ 250,000

Cogapp development9 content types93 template files (.tpl.php)647 taxonomy terms45 contrib modules9 custom modules19 features

Project scopePresent the vast archive of content BHoF has, create connections that bring

data to life and drive user engagement.

DAMS

What is a DAMS?Digital Asset Management SystemUsed for long­term storage and management of digital assetsManages metadata associated with these assets

Popular DAMSFree/Open source

DSpaceResourceSpaceFedora Commons...

ProprietaryPictionWebDAMBynder...

Fedora CommonsBest­of­breed object repository for storing, managing, and accessingdigital contentWell­thought­out structures for long­term storageJava/Tomcat­based

Fedora featurescontent is managed as data objects, represented using XMLallows complex relationships between data objectseach object contains a number of datastreamsprovides ability for virtual datastreams or behaviors of the object

Why not just use Fedora?

Very technical to administrateRequires a lot of customisation

IslandoraNot a stand­alone software packageFedora Commons backendSuite of Drupal modules providing:

management interface to Fedoracommon data typesimport/export capabilitiesvarious other features

Islandora featuresProvides solution packs meeting common needsMetadata supportArchival­specific features

Islandora features (contd.)REST APIFaceted search and browse (Solr)Ability to sync content to Drupal nodes

Whylandora?Single system for managing archival & web contentArchival content stored in best­of­breed system/format, even if websitemoves from Drupal in future (other front­ends to Fedora are available)Multiple ways to integrate DAMS content with web

Web integrationOpen DAMS as read­only to webIslandora Sync to nodesReference Islandora objects in Drupal

Approach chosen for Baseball Hall of Fame siteUsed   module to deliver images from FedoraImagecache External

Getting started with IslandoraSandbox

Virtual machine image

Chef cookbook

Manual install

http://sandbox.islandora.ca/

http://alpha.library.yorku.ca/releases/7.x­1.4/Islandora_7x­14.ova

https://github.com/ryersonlibrary/islandora_chef

https://wiki.duraspace.org/display/ISLANDORA714/Chapter+8+­++Installing+Islandora

Rich web stories

Rich web storiesThree main components contribute to the methodology we have developed:

A way to deliver content (paragraphs)A way to integrate content (entity references)A way to present content (entity view modes)

Deliver content with ParagraphsA new way to deliver contentNo WYSIWYG editor to create content inCreate paragraph types and define any fields in them (they are entities)Paragraph types can be anything from a simple piece of text to a complexassortment of fieldsSo how are they used?

Step 1Add paragraph field to the content type

Step 2Create paragraph bundles (paragraph types)

Step 3Add a paragraph type to your content

Step 4Add content

Step 5Review result

What do we get out of using itAn extendable content areaComplex content with paragraph typesDrag and drop functionalityEasily create structural parts of the page (eg. subtitles, promotions, etc)Bring together diverse content within the CMSFiner control over html output

Paragraph templatesAbility to control markup within the node (every paragraph bundle gets a

different template).<node> <!-- paragraphs-item--para-text.tpl.php --> <paragraph_item>TEXT</paragraph_item>

<!--paragraphs-item--para-subtitle.tpl.php --> <paragraph_item>RELATED HALL OF FAMERS</paragraph_item>

<!-- paragraphs-item--para-hof.tpl.php --> <paragraph_item>HALL OF FAMERS WIDGET</paragraph_item>

<!-- paragraphs-item--para-promos.tpl.php --> <paragraph_item>PROMO</paragraph_item></node>

Paragraphs vs Field collectionsParagraphs have multiple bundles (types)Paragraph bundles are accessible through the interfaceDifferent types in a single paragraph fieldParagraph types are exportable with features

Integrate content with entityreferencesWhat we were aiming at:

Reach content regardless of source (images vs dams_assets)Support onward user journeys (reach other content)Support social media sharing (assets and content)

Preprocessing per node typefunction nbbhof_preprocess_node(&$variables) { ... // Create preprocess functions per content type. $function = __FUNCTION__ . '_' . $node->type; if (function_exists($function)) { $function($variables); }}

function nbbhof_preprocess_node_hof_dams_asset(&$variables) {

// Code that is specific to this content type }

It enables usTo have finer control on content (eg. create inline table of contents)To interchangably use locally hosted images and DAMS assets

as hero imagesas sidebar imagesas full size images on contentas slideshows

To create different twitter cards based on typeTo integrate other sources of content from the CMS

Paragraphs and entity referencesTwo types of Paragraph types

Paragraph types that contain entity referencesParagraph types that contain other fields (textfields, etc)

So farWe have an extensible way to reach and deliver content through

paragraphs.Wouldn't it be nice to control how referenced content is presented in the

same way we control paragraph types?

What we have so far<node> <paragraph_item>TEXT</paragraph_item> <!-- we have templates for this --> <paragraph_item>RELATED HALL OF FAMERS</paragraph_item> <!-- and this -->

<paragraph_item> <!-- what about these? --> <referenced_entity>HALL OF FAMER</referenced_entity> <referenced_entity>HALL OF FAMER</referenced_entity> <referenced_entity>HALL OF FAMER</referenced_entity> </paragraph_item>

<paragraph_item> <!-- or this? --> <referenced_entity>PROMO</referenced_entity> </paragraph_item></node>

Present content with entity viewmodes

View modes provide entities with a mechanism to select which fields todisplay and a way to display them through templates.

Enabling view modesA simple function call in D7 (through the interface in D8).

function bhof_view_modes_entity_info_alter(&$entity_info) { // Create a paragraph view mode. $entity_info['node']['view modes']['paragraph'] = array( 'label' => t('Paragraph'), 'custom settings' => TRUE, ); ...}

Availability on content type

Result

Use on paragraph type

Use on paragraph type

Use on paragraph type

Use on paragraph type

Now<node> <paragraph_item>TEXT</paragraph_item> <!-- we have templates for this --> <paragraph_item>RELATED HALL OF FAMERS</paragraph_item> <!-- and this -->

<paragraph_item> <!-- node--hof--paragraph.tpl.php for each --> <referenced_entity>HALL OF FAMER</referenced_entity> <referenced_entity>HALL OF FAMER</referenced_entity> <referenced_entity>HALL OF FAMER</referenced_entity> </paragraph_item>

<paragraph_item> <!-- node--hof-promo--paragraph.tpl.php --> <referenced_entity>PROMO</referenced_entity> </paragraph_item></node>

Why do we use themEach view mode has its own display fieldsEach view mode has its own template fileApply logic depending on the view mode (slideshows, full images, etc)Front­end work with templates rather than drupal theming system

DiscussionParagraphs provide an extensible model to deliver contentEntity references in paragraphs allows us to bridge content (incl. DAMSassets)Entity view modes provide finer control over markup

Questions?