Display Pattern: Using HTML and CSS

15. April 2025

While you can add HTML and CSS to all display patterns, the HTML and CSS are not displayed correctly (rendered) in certain areas (such as when adding HTML to the Name display pattern of a layer). Sometimes, the area where the Display Pattern is used may not be suited for fancy stylings (e.g., adding a <br> (paragraph break) in the File Type Image Metadata for Name is a bad idea, as the name pattern is used as a title. There is not enough space in the area below the thumbnails in the content browser). Please check what is in use and how much space you have before you start extended styling.

You can check against specific permission sets by finding the ID of your permission set in the URL when you click on it in /Permissions/.
You can reduce an image to a data URI and use this.
For security reasons, we do not allow Javascript to be resolved.

Picturepark only supports a limited number of icons. See here the list of supported icons in Display Pattern.

HTML and CSS rendering is not supported for all Display Pattern so in Lists the HTML will be not interpreted and displayed as text.

Display Pattern: Link to Picturepark Areas (Solutions) — You can link to specific areas in Picturepark using relative links, and the base URL of your Picturepark will be automatically added so your links don't break.

<a href="/ContentBrowser/rulesRegulations">Click here for rules and regulations</a>

Display Pattern: No Permission on Images (Solutions) — I want to display a red message "Private" on images as a thumbnail overlay (thumbnail pattern on file type images) when no permission sets are assigned.

{% if permissionSetIds.size == 0 %}
  < font color = "#ff5576" >
    Private
  </ font >
{% endif %}

Display Pattern: Show Text as Headings (Solutions) — To build the preview of a virtual item you can use various formatting options and use field values as headings and normal text. The styling from Picturepark will be applied except when you add additional CSS styles.

<h1>{{data.pressKit.name | translate}}</h1>
 
<h2>
    {% if data.pressKit.subline %}
        {{data.pressKit.subline | translate}}
    {% endif %}
<h2>
 
<h3>
    {% if data.pressKit.intro %}
        {{data.pressKit.intro | translate}}
    {% endif %}
<h3>
 
<h4>
    {% if data.pressKit.summary %}
        {{data.pressKit.summary | translate}}
    {% endif %}
<h4>
 
<p>
{% if data.pressKit.description %}
    {{data.pressKit.description | translate}}
{% endif %}
<p>

Display Pattern: Text (Solutions) — 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.


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

Display Pattern: Using HTML and CSS (Solutions) — While you can add HTML and CSS to all display patterns, the HTML and CSS are not displayed correctly (rendered) in certain areas (such as when adding HTML to the Name display pattern of a layer), and sometimes the area where the Display Pattern is used may not be suited for fancy stylings (e.g adding a <br> (paragraph break) in in the File Type Image Metadata for Name is a bad idea, as the name pattern is used as a title and there is not enough space in the area below the thumbnails in the content browser). Please check what is in use and how much space you have before you start extended styling.

Display Pattern: Using Icons, HTML, and CSS (Solutions) — I want to add large, red music icons for audio files.

Supported icon sizes are: 14, 18, and 24

<cp-icon name="music" size="24" color="red"></cp-icon>

Display Pattern: Using HTML and CSS

Related Articles