Add Dynamic Series Details to Your Book Template

Introduction

In this lesson we are going to add another Div with child elements. This time we are adding the Series Details Div with dynamic data elements for the Book Number, total books in series and the series name.

We are also going to configure the Div to only display when a book is part of a series!

Add Series Details Div

• From the structure panel click on the Book Details Column
• Add another div 
• I’ll name it the SERIES DETAILS DIv
• Set the layout to Horizontal
• Aligned Left
• Vertical ALigned Middle
• Gap is 0.5 rem

Add the Book Number Text

• Click the plus icon inside the SERIES DETAILS DIV
• Add a new text element
• Change the text to Book
• Click on the element’s DESIGN TAB
• Go to Typography
• Change font size to 1.6 rem

Add the Book Number Text

• Add a new text element
• Set the DYNAMIC DATA to BOOK NUMBER
• Click on the element’s DESIGN TAB
• Go to Typography
• Change font size to 1.6 rem

Add the ‘Of’ Text

• Add a new text element
• Change the text to ‘Of’
• Click on the element’s DESIGN TAB
• Go to Typography
• Change font size to 1.6 rem

Add the Total Books in Series Text Element

• Add a new text element
• Set the Dynamic Data to Total Books in Series
• Append the DYNAMIC DATA with a ‘’:’
• Click on the element’s DESIGN TAB
• Go to Typography
• Change font size to 1.6 rem

Add the Series Name

• Add a new POST META ELEMENT to the Div

This is a similar element to the POST TITLE element. The Post META ELEMENT is a text element preconfigured to pull Meta Data from the post, including taxonomies which is what we are interested in right now.

• From the POST META ELEMENT’s CONFIGURATION TAB add a new META item to the list
• Set the type to TERMS
• Set the TAXONOMY to SERIES
• Set the count to 1
• And activate the link.
• Delete all the other meta items from the element
• Click on the element’s DESIGN TAB
• Go to Typography
• Click on TEXT
• Change font size to 1.6 rem

Set the Conditional Display

I only want to show this Div if the book is part of a series. Breakdance has a powerful contextual conditions feature that allows us to control when to show, or not show any given element and that’s what we are going to set up here.

• Click on the SETTINGS TAB for the new Series Details DIV
• Click on CONDITIONS
• Edit CONDITIONS
• ADD CONDITION
• In the first field choose HAS TAXONOMY
• In the second field choose ‘Is one of’
• And in the final field select ‘All Series’
• Click APPLY
• Click SAVE.

This div with series details will only display if the book is part of a series. Let’s check it to make sure.

• Exit to Frontend to view the Adventure Danger Book Post
• We can see we have all the series details
• Edit the ADVENTURE DANGER book post.
• Remove the series name from the post
• Update the Book
• View the Adventure Book POst again
• The Series Details Div disappears.
• Edit the post and add the series again
• Update
• Check the live view and the Series Name Div should have returned.

Summary

This lesson covered how to dynamically display series details in your Single Book Template using Breakdance. By adding a Series Details Div with child elements for book number, total books, and series name, you provide readers with valuable context. The conditional display feature ensures this section only appears for books in a series, keeping your layout clean and relevant. This setup enhances your website’s organisation and usability, making it easier for readers to explore your works.