Thinking Steps: A Layout Builder and Shorthand integration project

Project genesis and design

ROMEO's design work focused on creating a unique editorial experience that seamlessly integrates various media formats while highlighting inspiring stories, groundbreaking research, and the exceptional experiences of Bond students and staff.

Development and implementation

Following the design phase, we began development. Bond University already uses Drupal's Layout Builder (LB) for landing pages, so the new hub needed to integrate seamlessly with the existing content management system.

Early in the discovery phase, we identified that most of the Thinking Steps landing page components were variations of existing components with their own distinctive look.  We needed to develop a solution that prevented the styling from the new Thinking Steps components from bleeding into the main site while ensuring the editorial experience was smooth for the Bond team.

We did this by creating variants that extend existing blocks and apply the unique styles. Using Layout Builder Browser, we created a new category called “Contenthub”, where all the new variations were added. This kept the editorial experience easy for the Bond team, as there is a clear distinction between when to use a component's global or content hub version. 

Shorthand and Layout Builder integration 

One of the standout features of 'Thinking Steps' is the integration of Shorthand, an editorial platform renowned for producing visually stunning articles and blog content. Shorthand allows editors to craft articles off-platform and embed them seamlessly into the site, providing an exceptional editorial experience.

We integrated the Drupal Shorthand module into the Bond site and contributed several improvements to the module as part of this process.

A new Shorthand Article content type was created, which allowed Shorthand stories to be embedded alongside the existing Layout Builder components.

This Thinking Steps article shows the power of combining an embedded Shorthand article and Layout Builder components (e.g., header navigation bar, article topics, related articles, and footer) that allow easy access to other site content.

Shorthand in Drupal search

A challenge in using Shorthand was that the article content needed to be searchable from within the Drupal CMS. 

Since Shorthand articles are built outside of Drupal, we needed to ensure that the content was being passed to our OpenSearch index. We did this by including the rendered version of the Shorthand article in the indexing process. This allowed users to search for terms, and the correct page in Drupal would be returned, even if the term only existed in Shorthand.  

This standalone search function enabled visitors to search by topics and terms, enhancing the overall user experience.

Thinking Steps microsite

'Thinking Steps' was configured as a microsite within Bond University's main site and managed within a single CMS. 

Thanks to this setup, the new hub inherited powerful tools from across the CMS while maintaining a unique identity and navigation. Users can easily search and explore the hub, which supports various types of content, including videos and podcasts, leveraging Shorthand's capabilities to deliver a rich multimedia experience.

The ThinkingSteps microsite is powered by the PreviousNext-maintained Entity Reference Hierarchy module.

The Results

'Thinking Steps' went live in alignment with the 2024 Olympics, ensuring maximum visibility and engagement with Olympic-related stories.

The project is a testament to the power of collaboration and innovative design, having successfully created a versatile and visually appealing content hub by integrating Shorthand with Drupal's Layout Builder.

This dynamic platform was born from strategic planning, technical expertise, and creative vision and elegantly showcases its community's achievements and activities.