Add a Book Cover as a Featured Image to your Template

Introduction

A well-displayed book cover is one of the most critical elements of any book page, serving as the primary visual hook for readers. In this lesson, you’ll learn how to add a book cover dynamically to your Single Book Template using Breakdance. By linking the featured image from your book posts, you ensure every book is displayed with a consistent size and format. Additionally, you’ll learn how to include image credits dynamically, protecting your site from legal issues while maintaining a professional look.

Add the Featured Image

From the Breakdance editor screen of the Single Book Template

• Click inside the BOOK COVER COLUMN
• Add an IMAGE ELEMENT

The image element wants to know which element to display. Instead of asking it to display one specific image we are going to use the dynamic data to tell the element to use the featured image for the Book post it displays.

• Go to the configuration tab for the image element
• Hover over the MEDIA label
• Click on the DATABASE ICON to open the Dynamic Data Selector

Dynamic Data Selector

Lets stop for a moment and take a look at the Dynamic Data selector as it’s very important to building templates in Breakdance.

From top left we have a search box that we can use if we know the name of the field data we want to use as our dynamic data selection.

Next we have a drop down box for the type of field data we are looking for.

When we open the Dynamic Data Selector it displays the suggested type of Dynamic Data it thinks we can use for the active element.

For example because we have asked for dynamic data options for an image element the selector has automatically selected the IMAGE URL type because WordPress uses URL’s to insert images into pages and posts. 

We can change this type selection to other data field types or even choose the ALL option. Notice that when we choose ALL we get a lot more data field options in the selector but all of the new options are greyed out.

That’s because the default inside the selector is to have TYPE SAFETY turned on. This is the selectors way of warning us not to use the wrong data type with the active element. When we select the ALL data fields option we get an extra toggle to DISABLE TYPE SAFETY that makes ALL available DYNAMIC DATA TYPES able for selection but I don’t recommend doing this.

I’ll turn TYPE SAFETY back on and choose IMAGE URLs from the TYPE drop down.

Set the Feature Imaged

• From the Dynamic Data SELECTOR choose POST > FEATURED IMAGE

And there it is! We just added our first piece of dynamic content to the Single Book Template. I’m going to make a quick change in the DESIGN TAB to ensure we have a consistent image size based on the AMAZON eBOOK RATIO

• Go to IMAGE
• Set the image width to 40 rem

We haven’t just set this for the ADVENTURE DANGER book post. 

• Go to the top of the Breakdance Editor screen
• Change the PREVIEWING BOOKS drop down to any of the other books

The displayed image will change to match the Featured Image, the book cover, for that book post and and will do that for all the book posts because they are linked to this template in Breakdance.

Image Credit

There are auditing companies acting on behalf of artists, or more often stock image sites, who scour the internet looking for uncredited images. When they find uncredited images belonging to their clients on a website they contact the owner asking for proof they have the rights to display that image.

If the website owner is unable to provide that evidence the auditors will send you a violation notice along with an amount you have to pay to avoid being taken to court.

At this point it is too late to take down the image as the auditing company has already screen grabbed evidence the site displayed the image. The website owners only option is to confirm the auditors are legitimate and pay up. These settlements can run into hundreds or even thousands of dollars.

By default all the images on sites I build display image credit. I won’t accept an image from a client unless it is accompanied by a an email clearing stating their rights to display the image.

The easiest way as the owner of an author website to avoid hassle over images is to attribute credit in the caption section of the image when you upload it to our website

(SHOW THE CAPTION SECTION IN MEDIA LIBRARY)

With every image having credit in the caption we can use Dynamic Data to display that on the website making it more likely the image auditors will slide on by you and go somewhere else. To help make that happen we’ll add a text box underneath the book cover dynamically linked to the caption field of the linked image

• Click on the BOOK COVER IMAGE
• Add a text element
• In the configuration tab hover over the TEXT label
• Click on the database icon.
• Go to the FEATURED IMAGE section in the DYNAMIC DATA SELECTOR
• Click on the FEATURED CAPTION dynamic data field.
• Go to the DESIGN TAB of the text element
• Under SIZE change the width to 100%
• Under typography change alignment to centred
• Change the FONT SIZE to 1.2 rem
• Save those design choices as Preset named Image Credit
• Click SAVE.

Summary

This lesson covered how to dynamically display book covers in your Single Book Template using the featured image field. By linking the featured image and ensuring consistent formatting, you created a visually appealing and efficient design. Adding dynamic image credits further safeguards your site from legal concerns, demonstrating professionalism and responsibility. This setup ensures your book pages are both attractive and compliant, ready to captivate readers.