ICT:D Asset-Chain header arrangement with top asset

Drupal 11: Displaying Parent Asset Metadata in a Recursive View Header

This guide explains how to display fields (Thumbnail, Caption) from a parent "Digital Asset" entity in the header of a View that lists its children. This uses the "View Area" method to maintain a single View configuration.

Step 1: Create the "Header" Block Display

Instead of a new View, we add a specialized display to the existing one to keep the project organized.

1. Open your AssetChain View.
2. Click the + Add button and select Block.
3. Crucial: Change the "Display name" (found under Display Settings) to "Parent Header Block".
4. In the center column, look for the dropdown that says "All displays" and change it to This block (override).
5. Fields:
   • Add your Thumbnail field.
   • Add your Asset Caption field.
6. Pager: Set to "Display a specified number of items" and set the value to 1.
7. Contextual Filter:
   • Add Content: ID (This targets the parent asset directly).
   • Set "When the filter value is NOT available" to Hide view.
8. Save the View.

Step 2: Format the Header Layout

To make the thumbnail and caption sit side-by-side without a table, use a Custom Text field.

1. In the Parent Header Block display, add a Global: Custom text field.
2. Move it to the bottom of the field list.
3. Mark the original Thumbnail and Caption fields as Exclude from display.
4. In the "Custom text" box, use the following HTML (Verify tokens in the "Replacement Patterns" list):

<div class="parent-summary" style="display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; border: 1px solid #ccc; padding: 15px;">
  <div class="header-image">
    {{ field_media_thumbnail }}
  </div>
  <div class="header-text">
    <h3 style="margin-top: 0;">Parent Asset Information</h3>
    <p>{{ field_asset_caption }}</p>
  </div>
</div>

Step 3: Embed the Block in the Main View Header

This step connects the "Parent Header" to your "Children Table."

1. Switch back to your Main View (the display that shows the table of children).
2. In the Header section, click Add.
3. Search for and select Global: View area.
4. Configure the View Area as follows:
   • View to insert: Select "AssetChain".
   • Display to insert: Select "Parent Header Block".
   • Inherit contextual filters: Check this box. (This passes the ID from the URL to the header).
5. Click Apply and Save the View.

ICT Support Notes

• Recursive Logic: The header fetches the entity based on the current URL ID, while the table fetches children based on the reference field filter.
• Theming: If inline styles are forbidden by site policy, move the CSS from the Template:code block to the site's global stylesheet.