Display Pattern
- Elaine Foley
How to create a Display Pattern?
The display pattern editor will help administrators create simple display patterns. Click edit to open the display pattern editor in any Detail, List, Name, or Thumbnail display patterns.
Open schemas.
Edit the schema.
Find the display pattern, and on hover, open the editor with the pen icon.
Click a field to add it to the Display Pattern
The preview is directly adapted.
Save your Display Pattern.
Picturepark adds values without any formatting. You get one block of text from all values of the selected fields, e.g., TitelDescriptionDateTagbox. Each field code is a Liquid Syntax Tag (if not an empty statement) containing a Liquid Syntax Object (the metadata field to use) – see Liquid Syntax for details.
You can add HTML and CSS for styling your Display Pattern.
-
Page:Display Pattern: Link to Picturepark Areas (Solutions)
-
Page:Display Pattern: Using Icons, HTML and CSS (Solutions)
-
Page:Display Pattern: Show Text as Headings (Solutions)
-
Page:Display Pattern: Using HTML and CSS (Solutions)
-
Page:Display Pattern: No Permission on Images (Solutions)
-
Page:Display Pattern: Text (Solutions)
How to use the Display Pattern Editor?
In the Monaco editor, you write the Liquid Syntax (base for Display Pattern).
The search and paging to find a specific item you want to see in the preview. To find a specific content item search for the content's id which is shown in the content detail view URL bar e.g. id:cb20faba4e3342d9a9f83191deeec115
The preview will give you a preview of the Display Pattern (you must have at least one content item filled out with the values in the Display Pattern for a preview to display).
You can add fields of the schema easily by clicking on them. Each field will be added with a liquid tag checking if the field is not empty and the liquid object which is the field.
Layers are only necessary for the Virtual Type Display Pattern. The fields will be the virtual type fields and additional metadata fields from layers will be available in this section.
Languages allow you to add a different Display Pattern per Metadata language. If you only update the default language this will be used in all other languages, the values are always translated if translations are available.
Hint: Adding languages makes only sense if you use static text in the Display Pattern which then not be translated.
The JSON preview shows the detailed data structure of the current item you are previewing and all the available objects you have for the Display Pattern.
You can use this for debugging or to check which fields are available for usage.
In contentSchemaId – you find data – where you find all metadata you can use e.g. the title which is translated into en only.
Solution: Optimized Code Example
To improve your code for performance and handling, you can follow this example.
Picturepark uses Display Patterns in different areas, usually to construct nicer summaries instead of plain IDs. Check Display Pattern Types for details.
Picturepark shows Display Pattern only for ID-based filters e.g. a filter on the tagbox _refid uses the name pattern of the connected list, but a filter on a field value of that list e.g. product name will show the name.
How to update your Display Pattern?
Find your desired Display Pattern in the schema in edit mode, hover to edit the display pattern.
Find the individual field values (1)
{if} {{data.layer.field | liquid filter }} {endif}
Add spaces and special characters or line breaks using HTML <br>
Validate your edits in the preview
You can add HTML and CSS for styling your Display Pattern.
-
Page:Display Pattern: Link to Picturepark Areas (Solutions)
-
Page:Display Pattern: Using Icons, HTML and CSS (Solutions)
-
Page:Display Pattern: Show Text as Headings (Solutions)
-
Page:Display Pattern: Using HTML and CSS (Solutions)
-
Page:Display Pattern: No Permission on Images (Solutions)
-
Page:Display Pattern: Text (Solutions)
Re-Render after Display Pattern Update
After changing an existing Display Pattern, you will find a badge on settings in the main menu. Go there and follow the red badge.
Open settings
Open status
Open outdated Display Pattern.
Re-Render
Picturepark re-renders all display values which may affect the performance of the system. First, finish your edits, work with the preview in the editor for quick validation and start re-rendering when you complete your work.