ICT:D Asset-Chain header arrangement with top asset: Difference between revisions

Latest revision as of 22:20, 29 March 2026

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.

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

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

In the Parent Header Block display, add a Global: Custom text field.
Move it to the bottom of the field list.
Mark the original Thumbnail and Caption fields as Exclude from display.
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."

Switch back to your Main View (the display that shows the table of children).
In the Header section, click Add.
Search for and select Global: View area.
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).
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.

@@ Line 1: / Line 1: @@
 == 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 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.
-=== Prerequisites ===
-'''Content Type:''' Digital Asset (containing fields: {{code|field_media_thumbnail}}, {{code|field_asset_caption}}).
-'''Entity Reference:''' A field (e.g., {{code|field_parent_asset}}) linking children to parents.
-'''Main View:''' An existing View (e.g., ''AssetChain'') showing child assets in a table.
 === Step 1: Create the "Header" Block Display ===
-Instead of a new View, we add a specialized display to the existing one.
+Instead of a new View, we add a specialized display to the existing one to keep the project organized.
-Open your '''AssetChain''' View.
-Click '''+ Add''' and select '''Block'''.
+# Open your '''AssetChain''' View.
-'''Crucial:''' Change the "Display name" to "Parent Header Block".
+# Click the '''+ Add''' button and select '''Block'''.
-In the center column, look for the dropdown that says "All displays" and change it to '''This block (override)'''.
+# '''Crucial:''' Change the "Display name" (found under Display Settings) to "Parent Header Block".
-'''Fields:'''
+# In the center column, look for the dropdown that says "All displays" and change it to '''This block (override)'''.
-#* Add {{code|field_media_thumbnail}}.
+# '''Fields:'''
-#* Add {{code|field_asset_caption}}.
+#* Add your Thumbnail field.
-#* Remove any fields you don't want in the header (like the table columns).
+#* Add your Asset Caption field.
-'''Pager:''' Set to "Display a specified number of items" and set value to '''1'''.
+# '''Pager:''' Set to "Display a specified number of items" and set the value to '''1'''.
-'''Contextual Filter:'''
+# '''Contextual Filter:'''
-#* Add {{code|ID}} (from the Content category).
+#* Add '''Content: ID''' (This targets the parent asset directly).
 #* Set "When the filter value is NOT available" to '''Hide view'''.
-Save the View.
+# Save the View.
-=== Step 2: Format the Header Layout (Optional but Recommended) ===
-To make the thumbnail and caption sit side-by-side:
-In the '''Parent Header Block''' display, add a '''Global: Custom text''' field.
-Move it to the bottom of the field list.
-Mark the original Thumbnail and Caption fields as '''Exclude from display'''.
-In the "Custom text" box, use the following HTML (adjust tokens based on "Replacement Patterns"):
+=== Step 2: Format the Header Layout ===
+To make the thumbnail and caption sit side-by-side without a table, use a Custom Text field.
-{{ field_media_thumbnail }}
+# In the '''Parent Header Block''' display, add a '''Global: Custom text''' field.
+# Move it to the bottom of the field list.
+# Mark the original Thumbnail and Caption fields as '''Exclude from display'''.
+# In the "Custom text" box, use the following HTML (Verify tokens in the "Replacement Patterns" list):
-Parent Asset
+<pre>
-{{ field_asset_caption }}
+<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>
+</pre>
+=== Step 3: Embed the Block in the Main View Header ===
+This step connects the "Parent Header" to your "Children Table."
-=== Step 3: Embed the Block in the Main View Header ===
+# Switch back to your '''Main View''' (the display that shows the table of children).
-Switch back to your '''Main View''' (the Page or Block that shows the table).
+# In the '''Header''' section, click '''Add'''.
-In the '''Header''' section, click '''Add'''.
+# Search for and select '''Global: View area'''.
-Search for and select '''Global: View area'''.
+# Configure the View Area as follows:
-Configure the View Area:
 #* '''View to insert:''' Select "AssetChain".
 #* '''Display to insert:''' Select "Parent Header Block".
-#* '''Inherit contextual filters:''' [[File:Checked_checkbox.png]] '''CHECK THIS BOX'''. (This passes the Parent ID from the URL to the header).
+#* '''Inherit contextual filters:''' Check this box. (This passes the ID from the URL to the header).
-Click '''Apply''' and '''Save''' the View.
+# Click '''Apply''' and '''Save''' the View.
-=== Troubleshooting ===
-'''Empty Header:''' If the header doesn't appear, check that the "Inherit contextual filters" box is checked in the View Area settings.
+=== ICT Support Notes ===
-'''Wrong Asset:''' Ensure the Contextual Filter in the "Parent Header Block" is targeting the '''ID''' of the asset, not the reference field.
+* '''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 {{code|<pre>}} block to the site's global stylesheet.