Resource Carousel Block

The Resource Carousel Block is a component designed to showcase a collection of "Resource" items in a dynamic, horizontally scrolling slider. This is ideal for promoting articles, news, downloads, or other related content in a visually engaging and space-efficient manner.

Example on the current website

-   Example: View live example

-   Preview with image:

-   Editor preview:

Content Editor Fields

This block functions by pulling in content from pre-existing "Resource" posts, pulled from "Industry White Paper," "Downloadable", "Animal Research", "Videos" custom post types. Therefore, the content for the carousel is managed in two places: the block itself and the individual "Industry White Paper," "Downloadable", "Animal Research", "Videos" posts.

Block-Level Fields

• Heading:

  • Description: The main title displayed above the carousel.
  • Usage: Enter a concise heading for the entire section (e.g., "Industry White Paper," "Downloadable", "Animal Research", "Videos").
  • Requirement: Optional.

• Resources:

  • Description: A relationship field used to select which "Resource" posts will appear in the carousel.
  • Usage: Search for and select one or more "Resource" posts. The order in which you select them will determine their order in the carousel.
  • Requirement: At least one "Resource" post must be selected for the block to render.

"Resource" Post Fields

To create the cards that appear in the carousel, you must first create entries in the "Industry White Paper", "Downloadable", "Animal Research" or "Videos" custom post type area of the WordPress admin. Each "Resource" post has the following fields:

• WordPress Title: The standard title of the post. This is used as a fallback if the custom "Title" field is empty.
• Image:
  • Description: The main image for the resource card.
  • Usage: Upload a high-quality image for the card. If left empty, the post's "Featured Image" will be attempted as a fallback.
  • Requirement: Highly recommended.
• Title:
  • Description: The heading displayed on the resource card's content area.
  • Usage: Enter a short, compelling title for the resource.
  • Requirement: Optional (will fall back to the post's main title).
• Excerpt:
  • Description: A short paragraph of text displayed below the title on the card.
  • Usage: Provide a brief summary of the resource.
  • Requirement: Optional.
• Background Color for Text:
  • Description: Sets the background color of the text content area on the card.
  • Usage: Select a color from the dropdown list (e.g., dark, light-shore).
  • Requirement: Optional (a default color will be used).
• CTA (Call-to-Action):
  • Description: A link field to create a call-to-action at the bottom of the card.
  • Usage: Add a URL and Link Text (e.g., "Find Out More," "Download PDF").
  • Requirement: Optional.

Example Usage:

Steps:

1. Create the Resource Content:

   • In the WordPress admin, navigate to "Industry White Paper" and click "Add New".
   • Set the WordPress Title to "Vivamus egestas semper ipsum".
   • Upload a primary Image of a shark.
   • Set the Title field to "Vivamus egestas semper ipsum".
   • Write a short Excerpt: "Luctus at tempor facilisis diam egestas egestas diam viverra dignissim. Adipiscing eu elit tincidunt tempus scelerisque amet."
   • Set the Background Color for Text to dark.
   • Add a CTA with the title "Find Out More" and a link to the full article.
   • Publish the resource. Repeat for other resources you want to feature.

2. Add the Block to a Page:

   • Edit the page where you want the carousel to appear.
   • Insert the Resource Carousel Block.
   • Set the block's Heading to "Industry White Papers".
   • In the Resources field, search for and select "Vivamus egestas semper ipsum" and any other resources you created.
   • Save the page.

Result:

The block will render a full-width section containing a heading and a carousel. Each item in the carousel will be a card with an image on top and a colored content box below containing the title, excerpt, and a call-to-action link. Users can scroll horizontally through the cards using the provided navigation arrows.

Benefits:

• Reusable Content: Create a resource once and feature it in multiple carousels across the site.
• Organized Content Management: Keeps promotional content separate from page layouts, making it easier to manage and update.
• Visually Engaging: The card-based slider is an attractive way to present a list of related content.
• Saves Space: Allows you to feature numerous items without creating a long, scrolling page.

Conclusion:

The Resource Carousel Block is a powerful tool for promoting and cross-linking content. By leveraging the "Resources" custom post type, it provides a structured and efficient way to manage and display a collection of featured items in a clean, interactive slider.