{% if data.fruit.shortDescription%}
{{data.fruit.shortDescription | translate | truncate: 250}}
{% endif %}
<br><be>
Product: {{data.fruit.code}} - {{data.fruit.name}} 
<br>
Bricks class: {{data.fruit.bricks | tagbox_list | join: ", "}}
<br>
{% if data.fruit.price%} 
Price: {{data.fruit.price}} {{data.fruit.currency.code}} 
{% if data.fruit.unit%} per {{data.fruit.unit.name | translate}}{% endif %}
{% endif %}
{% if data.fruit.supplier %}<br>Supplier: {{data.fruit.supplier | tagbox_list}}{% endif %}

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.

1. Open schemas.
2. Edit the schema.
3. Find the display pattern, and on hover, open the editor with the pen icon.
4. Click a field to add it to the Display Pattern
5. The preview is directly adapted.
6. Save your Display Pattern.

Fotoware Alto 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. 

Display Pattern: Link to Fotoware Alto Areas (Solutions)

Display Pattern: Using Icons, HTML and CSS (Solutions)

Display Pattern: Show Text as Headings (Solutions)

Display Pattern: Using HTML and CSS (Solutions)

Display Pattern: No Permission on Images (Solutions)

Display Pattern: Text (Solutions)

1. The Display Pattern Editor with Preview for Thumbnail Patterns (Overlay).
2. In the Monaco editor, you write the Liquid Syntax (base for Display Pattern).
3. 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
4. The Display Pattern preview will show you the Display Pattern (you must have at least one content item filled with the values in the Display Pattern for the preview to display).
5. You can easily add fields to the schema by clicking 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.
6. 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.
7. Languages allow you to add a different Display Pattern per Metadata language. If you only update the default language, it will be used for all other languages; values are always translated if translations are available.
   1. Hint: Adding languages makes only sense if you use static text in the Display Pattern, which will not be translated.
8. The JSON preview shows the detailed data structure of the current item you are previewing, along with all available objects for the Display Pattern.
   1. You can use this for debugging or to check which fields are available for usage.
   2. In contentSchemaId – you find data – where you find all metadata you can use, e.g., the title, which is translated into en only.

To improve your code's performance and handling, follow this example.

Goal: Show various tags, for example, products or keywords, in a display pattern. Use the push tags code example for simpler, maintainable, faster code.

Prettify with Push Explained

When you have a Display Pattern with lots of values, you can prettify your code using the following logic.
1. Create an array (name: tags) for looping through terms
    {% array tags %}
2. Push values (into the array)
    {% push tags%}
       {% if data.basicInformation %}
             {{data.basicInformation | layer_name: "BasicInformation"}}
    {% elsif data.productInformation %}
        {{data.productInformation | layer_name: "ProductInformation"}}
    {% endif %}
    {%endpush%}
    {% push tags%}
    {% for mediaType in data.imageAndUsageInformation.mediaType %} {{mediaType | tagbox_name}}{% endfor %}
    {%endpush%}
3. Check if something is in the array
    {% if tags.size > 0 %}
4. Display the values from the array with a filter: | uniq - which means unique values only
    {{tags | uniq | join: " | " }}
5. Show values in case array is empty
    {% else %}
       {% if data.imageMetadata.fileName %}
           {{data.imageMetadata.fileName}}
        {% else %}
           {{id}}
       {% endif %}
    {% endif %}

Complete Push Code Example

{% array tags %}
{% push tags%}
   {% if data.basicInformation %}
       {{data.basicInformation | layer_name: "BasicInformation"}}
{% elsif data.productInformation %}
   {{data.productInformation | layer_name: "ProductInformation"}}
{% endif %}
{%endpush%}
{% push tags%}
{% for mediaType in data.imageAndUsageInformation.mediaType %} {{mediaType | tagbox_name}}{% endfor %}
{%endpush%}
{% if tags.size > 0 %}
   {{tags | uniq | join: "_" | downcase}}
{% else %}
   {% if data.imageMetadata.fileName %}
       {{data.imageMetadata.fileName}}
   {% else %}
       {{id}}
   {% endif %}
{% endif %}

Fotoware Alto uses Display Patterns across different areas, often to construct more readable summaries instead of plain IDs. Check Display Pattern Types for details.

Fotoware Alto 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.

Fotoware Alto uses Display Patterns across different areas, often to construct more readable summaries instead of plain IDs. Check Display Pattern Types for details.

How to update your Display Pattern?

Find the required Display Pattern in the schema in edit mode, then hover to edit it.

1. Find the individual field values (1)
   1. {if} {{data.layer.field | liquid filter }} {endif}
2. Add spaces and special characters or line breaks using HTML <br>
3. Validate your edits in the preview

You can add HTML and CSS for styling your Display Pattern.

Display Pattern: Link to Fotoware Alto Areas (Solutions)

Display Pattern: Using Icons, HTML and CSS (Solutions)

Display Pattern: Show Text as Headings (Solutions)

Display Pattern: Using HTML and CSS (Solutions)

Display Pattern: No Permission on Images (Solutions)

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.

1. Open settings
2. Open status
3. Open outdated Display Pattern.
4. Re-Render

Fotoware Alto re-renders all display values that may affect system performance. First, finish your edits, work with the preview in the editor for quick validation, and start re-rendering when you complete your work.

How to delete a Display Pattern? 

To delete the Display Pattern, you must provide at least a space. The Display Pattern cannot be empty. For better readability, you should use a dash or a pipe instead of a space.

1. Open your desired schema and edit the desired Display Pattern
2. Remove everything in the editor on the left
3. Add a space, dash, or pipe (whatever you prefer)
4. Save your Display Pattern

Re-Render after Display Pattern Deletion

After changing an existing Display Pattern, you must re-index, as shown in the status panel at the top of the schema detail view. It is also indicated with a badge on schemas in the main menu.

1. Open settings
2. Open status
3. Open outdated Display Pattern.
4. Re-Render

Fotoware Alto re-renders all display values, which may affect system performance. First, finish your edits, work with the preview in the editor for quick validation, and start re-rendering when you complete your work.

• For security reasons, we do not resolve Javascript.
• When you update metadata or content, the Display Patterns are updated. You don't see Display Patterns change while viewing content.
• Children do not inherit display patterns from their parents. For example, you cannot set display patterns for all file types on FileMetadata. The display patterns that you do set here will take hold for any content that is a File Type content but does not belong to AudioMetadata, DocumentMetadata, ImageMetadata, VideoMetadata, e.g., for a .css file.
• Display patterns do not take permissions into account. They are pre-calculated and are not bound to user permissions. Display Patterns should therefore be optimized for your general audience, not for the super admin.
• Please use void using Fotoware Alto icons in HTML or CSS. Currently, material design icons are treated as fonts, so any CSS font styling applies to icons as well (e.g., color or size). Icons will be replaced in a future release, breaking all icon implementations. 
• Fotoware Alto does not support HTML and CSS in Display Patterns e.g. in the list views the HTML will be not interpreted and displayed as text.