Content Fragment Display

This component allows you to curate a page using individual or multiple fields sourced from a specific Content Fragment. The fragment can be determined dynamically by a slug passed into the page URL or selected statically in the component dialog(s). The goal of this component is to help build reusable dynamic page(s) that surface Content Fragment-driven data.

Think of it as a Master/Detail view: you create the "master" list using components such as a Content Fragment List or Content Fragment Data Table control, and then link to a dynamic "details" page containing one or more of these components to display the full details of a specific record.

Unlike a Content Fragment List or DataTable component, which displays multiple fragments in a condensed format, this component focuses on presenting an in-depth, comprehensive view of a single fragment. This allows you to show detailed information and additional fields that wouldn’t be practical in a list/table view. You also have full control over:

• Which fields from the fragment are displayed
• How each field is formatted for presentation

You can use a single instance of this component for a linear detail view or place multiple instances on a page to create a highly customized layout tailored to your design needs. For example, you can use all the normal container, columns, and other layout related controls on the page along with multiple instances of the Content Fragment Display Components to create a ornate page layout to showcase a individual record entry as a personnel bio page or product page.

An agency wants to display a listing of licensed vendors. Each vendor has a Content Fragment Model containing details such as address, phone number, website, products, and board members. Instead of creating individual pages for every vendor, you can:

1. Build your Content Fragment Model
2. Create Content Fragments with all your vendors, populating fields for each vendor.
3. Build a directory listing page with a Content Fragment DataTable with minimal info (e.g., name, city, county), but with filtering and searching capabilities to aid in user searching.
4. Link each name to a dynamic page where you have a standard custom layout for the directory details page for the vendor. This can show the vendors NAme as a H1, Address as "small" and short bio of the company as a standard paragraph tag, followed by a seperator and then the phone number, email, etc..

This approach ensures consistency in branding and presentation while reducing maintenance overhead of creating a page per vendor.

Before using this component, ensure you have:

• A Content Fragment Model defined for your data structure. This has to be done by EAS Web Services at this time.
• Content Fragments created and published based on that model.
• (Optional) A dynamic page configured to accept a slug parameter for fragment selection.

See also guides for Content Fragment Data List, Content Fragment Data Tables, Content Fragment Container, Content Fragment Models

Once you have placed a Content Fragment Display component on a page, configure the properties.

• Content Fragment: point to the content fragment you would like to display
• Display Mode: Select whether you want a Specific Content Fragment to always display or Dynamic Content Fragment for loading data based on the currently loaded fragment on the page..
  • Specific fragments will always show the selected fragment.
  • Dynamic fragments will use the selected fragment's Model and Path to determine the list of fragments that will be able to be displayed dynamically on page load. These are known as Dynamic Pages.
• Content Fragment Name Styling: If you would like to display the name of your content fragment, select a CSS style. If you don't want to display the Title select "hidden."
• Elements: Select which elements from the content fragment you would like to display.
  • Element Field Name: Authoring settings will vary based on the variables which define the Content Fragment.
  • Element Type: Will determine how this field will display. Depending on Element Type, authoring settings will vary. Options include Asset, Date, Image, Tag, Text, and Link List.
  • Element Field Name Label Styling. Select CSS style or select "hidden" if you do not want to display the label.
  • Element Value Styling: Enter a Class to use for CSS targeting this element.
  • Date Display Format: You have the option to choose how you want the date to display:
    • Date Only: Will display the Day of the week and Date.
    • Date and Time: Will display the Day of the Week, Date, and Time.
    • Time Only: Will only display time.
  • Show label if value is blank?: If checked, the label will display even if the value entered in the field is blank. When unchecked, no label will display if the value for the field is blank.
  • Paragraphs: Displays when the Element Value Styling is set to Paragraph. Determine if all paragraphs should display, or limit to a range. 
    • IE: Enter '1; 3-5; 9-*' to include the 1st paragraph, the 3rd through 5th paragraphs, and the 9th paragraph through to the end.
  • Asset Icon: Displays when the Element Type is set to Asset. When checked, an icon is displayed before the visible text for this column.
  • Open in New Tab: Displays when the Element Type is set to Asset. This Open in New Tab is specifically for the Asset type option and opens assets in a new tab when checked.
  • Link Element: If selected you will pick which Content Fragment element contains the linking data.
    • Link Field: Select a column to use as the link data source.
    • Open in New Tab: This Open in New Tab is specifically for items that need to be physically linked via the Link Field (IE: not Assets). When checked, links will open in a new tab instead of the same tab.
    • This is an Email Address: When checked, links will be prepended with "mailto:" so when clicked they will open email applications to start an email on the user's device.
    • This is a Phone Number: When checked, links will be prepended with "tel:" so when clicked they will open phone/calling applications on the user's device.
• Variation: Sets to Master by default. If needed, select a different variation of the model to use. This option is rarely, if ever, changed.
• ID & Class: Set an ID and/or Class to the component for CSS targeting.

In the following example, we have pointed to a specific puppy within our custom content fragment model "Puppies."

We've added the elements "Image" and "Description" to the display.