Display Pattern: Text

Summary

Show the translated text from a text field with different translations in the Display Pattern. Add some color with CSS and truncate longer text, showing three dots.

JSON

< font color = "#ff5576" > 
  {{data.corporateInformation.title.en | translate | truncate: 5, ‘...’ }} 
< /font >

Setup in Picturepark

Layer: Corporate Information
Text field: Title

Field Value Access

data.corporateInformation.title | translate

The Liquid filter | translate returns the value that matches the default language.

Use Case

One use case is to just show the title of a Content Item in the Detail Display Pattern.

CODE

{{data.corporateInformation.title | translate}}

Another use case is using HTML for better styling and add headlines.

CODE

<h1> 
  {{ data.corporateInformation.title | translate }} 
</h1>

<h2> 
  {% if data.corporateInformation.note %}
    {{ data.corporateInformation.title | translate }}
  {% endif %} 
<h2>

Another use case is to show text, truncated with three dots, in red (using CSS)

JSON

< font color = "#ff5576" > 
  {{data.corporateInformation.title.en | translate | truncate: 5, ‘...’ }} 
< /font >