Drupal's Paragraphs module, combined with a DAMS (Digital Asset Management System) can deliver powerful, rich stories on the web. This session will show how, showing the inner workings of the Baseball Hall of Fame (baseballhall.org) website as a case study. This site uses Drupal with the Islandora DAMS to leverage the Baseball Hall of Fame's huge archive of images. Topics covered: - Building flexible content types using the Paragraphs module - Multifaceted display of content using view modes - DAMS & integrating Islandora assets with Drupal content First presented at DrupalCamp Brighton in January 2015, by Alex Bridge and Tassos Koutlas.

1. Rich web stories
With Paragraphs and Islandora DAMS
Alex Bridge / Tassos Koutlas

2. Who we are
Alex Bridge
alexb@cogapp.com
Tassos Koutlas
tassosk@cogapp.com

3. Overview
About the project
Drupal and Islandora DAMS
Create rich web stories
Discussion

4. Baseball Hall of Fame
Serves as the central point for the study of the history of baseball in the
United States and beyond.

5. Stats last month
Pageviews: ~ 765,000
Sessions: ~ 305,000
Active users: ~ 250,000

6. Cogapp development
9 content types
93 template files (.tpl.php)
647 taxonomy terms
45 contrib modules
9 custom modules
19 features

7. Project scope
Present the vast archive of content BHoF has, create connections that bring
data to life and drive user engagement.

8. DAMS

9. What is a DAMS?
Digital Asset Management System
Used for long­term storage and management of digital assets
Manages metadata associated with these assets

10. Popular DAMS
Free/Open source
DSpace
ResourceSpace
Fedora Commons
...
Proprietary
Piction
WebDAM
Bynder
...

11. Fedora Commons
Best­of­breed object repository for storing, managing, and accessing
digital content
Well­thought­out structures for long­term storage
Java/Tomcat­based

12. Fedora features
content is managed as data objects, represented using XML
allows complex relationships between data objects
each object contains a number of datastreams
provides ability for virtual datastreams or behaviors of the object

13. Why not just use Fedora?
Very technical to administrate
Requires a lot of customisation

14. Islandora
Not a stand­alone software package
Fedora Commons backend
Suite of Drupal modules providing:
management interface to Fedora
common data types
import/export capabilities
various other features

15. Islandora features
Provides solution packs meeting common needs
Metadata support
Archival­specific features

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

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

20. Web integration
Open DAMS as read­only to web
Islandora Sync to nodes
Reference Islandora objects in Drupal
Approach chosen for Baseball Hall of Fame site
Used module to deliver images from FedoraImagecache External

21. Getting started with Islandora
Sandbox
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

22. Rich web stories

23. Rich web stories
Three 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)

24. Deliver content with Paragraphs
A new way to deliver content
No WYSIWYG editor to create content in
Create paragraph types and define any fields in them (they are entities)
Paragraph types can be anything from a simple piece of text to a complex
assortment of fields
So how are they used?

25. Step 1
Add paragraph field to the content type

26. Step 2
Create paragraph bundles (paragraph types)

27. Step 3
Add a paragraph type to your content

28. Step 4
Add content

29. Step 5
Review result

30. What do we get out of using it
An extendable content area
Complex content with paragraph types
Drag and drop functionality
Easily create structural parts of the page (eg. subtitles, promotions, etc)
Bring together diverse content within the CMS
Finer control over html output

31. Paragraph templates
Ability 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>RELATEDHALLOFFAMERS</paragraph_item>
<!--paragraphs-item--para-hof.tpl.php-->
<paragraph_item>HALLOFFAMERSWIDGET</paragraph_item>
<!--paragraphs-item--para-promos.tpl.php-->
<paragraph_item>PROMO</paragraph_item>
</node>

32. Paragraphs vs Field collections
Paragraphs have multiple bundles (types)
Paragraph bundles are accessible through the interface
Different types in a single paragraph field
Paragraph types are exportable with features

33. Integrate content with entity
references
What 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)

34. Preprocessing per node type
functionnbbhof_preprocess_node(&$variables){
...
//Createpreprocessfunctionspercontenttype.
$function=__FUNCTION__.'_'.$node->type;
if(function_exists($function)){
$function($variables);
}
}
functionnbbhof_preprocess_node_hof_dams_asset(&$variables){
//Codethatisspecifictothiscontenttype
}

35. It enables us
To have finer control on content (eg. create inline table of contents)
To interchangably use locally hosted images and DAMS assets
as hero images
as sidebar images
as full size images on content
as slideshows
To create different twitter cards based on type
To integrate other sources of content from the CMS

40. Paragraphs and entity references
Two types of Paragraph types
Paragraph types that contain entity references
Paragraph types that contain other fields (textfields, etc)

41. So far
We 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?

42. What we have so far
<node>
<paragraph_item>TEXT</paragraph_item><!--wehavetemplatesforthis-->
<paragraph_item>RELATEDHALLOFFAMERS</paragraph_item><!--andthis-->
<paragraph_item>
<!--whataboutthese?-->
<referenced_entity>HALLOFFAMER</referenced_entity>
<referenced_entity>HALLOFFAMER</referenced_entity>
<referenced_entity>HALLOFFAMER</referenced_entity>
</paragraph_item>
<paragraph_item>
<!--orthis?-->
<referenced_entity>PROMO</referenced_entity>
</paragraph_item>
</node>

43. Present content with entity view
modes
View modes provide entities with a mechanism to select which fields to
display and a way to display them through templates.

44. Enabling view modes
A simple function call in D7 (through the interface in D8).
functionbhof_view_modes_entity_info_alter(&$entity_info){
//Createaparagraphviewmode.
$entity_info['node']['viewmodes']['paragraph']=array(
'label'=>t('Paragraph'),
'customsettings'=>TRUE,
);
...
}

45. Availability on content type

46. Result

47. Use on paragraph type

48. Use on paragraph type

49. Use on paragraph type

50. Use on paragraph type

51. Now
<node>
<paragraph_item>TEXT</paragraph_item><!--wehavetemplatesforthis-->
<paragraph_item>RELATEDHALLOFFAMERS</paragraph_item><!--andthis-->
<paragraph_item>
<!--node--hof--paragraph.tpl.phpforeach-->
<referenced_entity>HALLOFFAMER</referenced_entity>
<referenced_entity>HALLOFFAMER</referenced_entity>
<referenced_entity>HALLOFFAMER</referenced_entity>
</paragraph_item>
<paragraph_item>
<!--node--hof-promo--paragraph.tpl.php-->
<referenced_entity>PROMO</referenced_entity>
</paragraph_item>
</node>

52. Why do we use them
Each view mode has its own display fields
Each view mode has its own template file
Apply logic depending on the view mode (slideshows, full images, etc)
Front­end work with templates rather than drupal theming system

53. Discussion
Paragraphs provide an extensible model to deliver content
Entity references in paragraphs allows us to bridge content (incl. DAMS
assets)
Entity view modes provide finer control over markup

54. Questions?

55. We're hiring!
Senior front­end developer
Graduate developer