Display Pattern Help

13. March 2025

More general details about Display Pattern Display Pattern

File Type Pattern

The following code fragments can be used:

<cp-overlay-box-top-left style="..."></cp-overlay-box-top-left>
<cp-overlay-box-bottom-left style="..."></cp-overlay-box-bottom-left>
<cp-overlay-box-bottom-right style="..."></cp-overlay-box-bottom-right>

Rules

the style property is optional: if defined it will allow overriding the default styles of the overlay box. It directly binds to the style attribute of an HTML element and therefore can contain standard CSS style attributes
The content of each element can be other HTML tags or text
See Examples for some examples of different display patterns for different FileTypes / VirtualTypes

Virtual Item Pattern

<cp-thumbnail-content></cp-thumbnail-content>
<cp-overlay-box-top-left></cp-overlay-box-top-left>
<cp-overlay-box-bottom-left></cp-overlay-box-bottom-left>
<cp-overlay-box-bottom-right></cp-overlay-box-bottom-right>

Icons

Only a limited set of icons will be supported with the overnext release. We implemented backward compatibility with Picturepark Weisshorn to ensure that you have enough time to update the icons to the new supported ones.

Embed icons with

<cp-icon name="video-image" size="24"></cp-icon>

Example Image

    <cp-overlay-box-top-left style="background-color: #1f1f1f; fill: #17202A; color: #000000">
       <font color="#FFFFFF">
           {% if data.fileMetadata.fileExtension %}{{data.fileMetadata.fileExtension | replace:"." | upcase }}{% endif %} 
       </font>
   
   </cp-overlay-box-top-left> 
   
   <cp-overlay-box-bottom-left style="background-color: #1f1f1f; fill: #17202A; color: #000000">
   
       {% if data.explicitContentLayer %}
           <font color="#FFFFFF"> 
               <i class="material-icons md-16 icon-block-helper">
           </font>
       {% endif %}
       
       {% assign start = "now" | date: '%s' %} 
       {% assign end = audit.creationDate | date: '%s' %} 
       {% assign lifespanSeconds = start | minus: end %}
       {% assign lifespanDays = lifespanSeconds | divided_by: 3600 | divided_by: 24 %}
       
       {% if lifespanDays <= 5  %} 
           <font color="#f74931">
               <i class="material-icons md-16 icon-new-box"></i>
           </font>
       {% else %} 
           <!--This content is {{ lifespanDays }} days old. <br-->
       {% endif %} 
       
       {% if contentPermissionSetIds contains 'a16d98ceebe342c28fc5fc089a0f2ac4' %}
       
           <font color="#FFFFFF">
               <i class="material-icons md-16 icon-archive"></i> 
           </font>
       
       {% elsif contentPermissionSetIds contains 'fb0fa99c03cc4a72b0b586cf3bed18cc' %}
           <font color="#FFFFFF">
               <i class="material-icons md-16 icon-earth"></i> 
           </font>
       
       {% elsif contentPermissionSetIds contains 'c0b46e3b39154f12a1d1c9ab8fd365f0' %}
           <font color="#FFFFFF">
               <i class="material-icons md-16 icon-earth"></i> 
           </font>
       
       {% elsif contentPermissionSetIds contains '1ed6366c34c2443fb7d9a99917bc596e' %}
       
           <font color="#FFFFFF">
               <i class="material-icons md-16 icon-account-group"></i>
           </font>
       
       {% elsif contentPermissionSetIds contains 'a628678f5e134f21a9f6b4e454113c23' %}
           <font color="#FFFFFF">
               <i class="material-icons md-16 icon-key-variant"></i>
           </font>
       
       {% elsif contentPermissionSetIds contains 'f0c6382971bf4710b9ca57c85c3fc76a' %}
       
           <font color="#FFFFFF">
               <i class="material-icons md-16 icon-key-variant"></i>
           </font>
       
       {% else %}
           <font color="#FFFFFF">
               <i class="material-icons md-16 icon-key-variant"></i>
           </font>
       {% endif %} 
       
       {% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %} - <font color="#706f6e"> (!) 
       </font>{% endif %}
    
    </cp-overlay-box-bottom-left>

Examples for all File Types

Video:
----------------------------
<cp-overlay-box-bottom-right style="background-color: transparent; fill: green">
   <cp-icon name="video-image" sizeClass="ic-24"></cp-icon>
</cp-overlay-box-bottom-right>
<cp-overlay-box-top-left style="background-color: green">
   {% if data.videoMetadata.fileExtension %}{{data.videoMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds contains '44a2e6a0c6e74f9fbc427507cda1dbac' %}Restricted 
{% elsif contentPermissionSetIds contains '5246b11b811d48c19e61c697d3819803' %}Restricted  
{% elsif contentPermissionSetIds contains '22fa6a3d55194b50a9dda3432767d1c8' %}Restricted   
{% elsif contentPermissionSetIds contains '15cf7c71fc5346a2951bbde4a13556df' %}Restricted
{% elsif contentPermissionSetIds contains 'fab4d49e526c4f99b50422e5aef2488c' %}Press     
{% elsif contentPermissionSetIds contains 'd914d272a90c4c119c34e68adf0e343d' %}Dealers
{% elsif contentPermissionSetIds contains '8f4ea4900f0c44fc8605bf0d5b81fc2d' %}Internal Reader 
{% elsif contentPermissionSetIds contains 'b999758e71294d53bdb5e585e5acb135' %}Editor PM 
{% elsif contentPermissionSetIds contains '738a3f16a31541028b520331639422db' %}Editor Corporate 
{% elsif contentPermissionSetIds contains '157f3241b79344e0935f87d4a40a73a3' %}Admin  
{% elsif contentPermissionSetIds contains '00b15b669c174160a32254052ed06872' %}Owner  
{% else %}Private{% endif %} 
{% if contentPermissionSetIds contains 'b007551e236d4aeda64798043572216c' %} - Original{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %}  - <font color="#ff5576"> (!) 
</font>{% endif %}
</cp-overlay-box-bottom-left>

----------------------------------------
----------------------------------------


File:
--------------------------

{% if data.fileMetadata.fileExtension and data.fileMetadata.fileExtension != "" %}
       <cp-overlay-box-top-left>
       {{data.fileMetadata.fileExtension | removefirst: "." | upcase}}
       </cp-overlay-box-top-left>
{% endif %}
<cp-overlay-box-bottom-left>
       <h2><b>Title - <font color="#ff5576"> (!) </font></b></h2>
       <p> Try out the <b>dimension</b> of the box</p>
       <p> What happens if I keep increasing the lenght of the text?</p>
</cp-overlay-box-bottom-left>
<cp-overlay-box-bottom-right style="opacity: 0.7; background-color: black; color: red; fill: red">
       <cp-icon name="check" sizeClass="ic-14"></cp-icon>
</cp-overlay-box-bottom-right>
----------------------------------------
----------------------------------------


Audio:
--------------------

<cp-overlay-box-top-left style="background-color: red; opacity: 0.5">
   {% if data.audioMetadata.fileExtension %}{{data.audioMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
   <cp-icon name="music" sizeClass="ic-18"></cp-icon>
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds contains '44a2e6a0c6e74f9fbc427507cda1dbac' %}Restricted 
{% elsif contentPermissionSetIds contains '5246b11b811d48c19e61c697d3819803' %}Restricted  
{% elsif contentPermissionSetIds contains '22fa6a3d55194b50a9dda3432767d1c8' %}Restricted   
{% elsif contentPermissionSetIds contains '15cf7c71fc5346a2951bbde4a13556df' %}Restricted
{% elsif contentPermissionSetIds contains 'fab4d49e526c4f99b50422e5aef2488c' %}Press     
{% elsif contentPermissionSetIds contains 'd914d272a90c4c119c34e68adf0e343d' %}Dealers
{% elsif contentPermissionSetIds contains '8f4ea4900f0c44fc8605bf0d5b81fc2d' %}Internal Reader 
{% elsif contentPermissionSetIds contains 'b999758e71294d53bdb5e585e5acb135' %}Editor PM 
{% elsif contentPermissionSetIds contains '738a3f16a31541028b520331639422db' %}Editor Corporate 
{% elsif contentPermissionSetIds contains '157f3241b79344e0935f87d4a40a73a3' %}Admin  
{% elsif contentPermissionSetIds contains 'b007551e236d4aeda64798043572216c' %}Owner  
{% else %}Private{% endif %} 
{% if contentPermissionSetIds contains '00b15b669c174160a32254052ed06872' %} - Original{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %}  - <font color="#ff5576"> (!) 
</font>{% endif %}
</cp-overlay-box-bottom-left>


----------------------------------------
----------------------------------------
Document:
--------------------------
<cp-overlay-box-top-left>
   {% if data.documentMetadata.fileExtension %}{{data.documentMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds contains '44a2e6a0c6e74f9fbc427507cda1dbac' %}Restricted 
{% elsif contentPermissionSetIds contains '5246b11b811d48c19e61c697d3819803' %}Restricted  
{% elsif contentPermissionSetIds contains '22fa6a3d55194b50a9dda3432767d1c8' %}Restricted   
{% elsif contentPermissionSetIds contains '15cf7c71fc5346a2951bbde4a13556df' %}Restricted
{% elsif contentPermissionSetIds contains 'fab4d49e526c4f99b50422e5aef2488c' %}Press     
{% elsif contentPermissionSetIds contains 'd914d272a90c4c119c34e68adf0e343d' %}Dealers
{% elsif contentPermissionSetIds contains '8f4ea4900f0c44fc8605bf0d5b81fc2d' %}Internal Reader 
{% elsif contentPermissionSetIds contains 'b999758e71294d53bdb5e585e5acb135' %}Editor PM 
{% elsif contentPermissionSetIds contains '738a3f16a31541028b520331639422db' %}Editor Corporate 
{% elsif contentPermissionSetIds contains '157f3241b79344e0935f87d4a40a73a3' %}Admin  
{% elsif contentPermissionSetIds contains 'b007551e236d4aeda64798043572216c' %}Owner  
{% else %}Private{% endif %} 
{% if contentPermissionSetIds contains '00b15b669c174160a32254052ed06872' %} - Original{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %}  - <font color="#ff5576"> (!) 
</font>{% endif %}
</cp-overlay-box-bottom-left>

----------------------------------------
----------------------------------------

Image:
--------------------

<cp-overlay-box-top-left style="background-color: blue">
   {% if data.imageMetadata.fileExtension %}{{data.imageMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-right style="background-color: white; fill: blue">
   <cp-icon name="image"></cp-icon>
</cp-overlay-box-bottom-right>
<cp-overlay-box-bottom-left style="opacity: 0.7">
{% if contentPermissionSetIds contains '44a2e6a0c6e74f9fbc427507cda1dbac' %}Restricted 
{% elsif contentPermissionSetIds contains '5246b11b811d48c19e61c697d3819803' %}Restricted  
{% elsif contentPermissionSetIds contains '22fa6a3d55194b50a9dda3432767d1c8' %}Restricted   
{% elsif contentPermissionSetIds contains '15cf7c71fc5346a2951bbde4a13556df' %}Restricted
{% elsif contentPermissionSetIds contains 'fab4d49e526c4f99b50422e5aef2488c' %}Press     
{% elsif contentPermissionSetIds contains 'd914d272a90c4c119c34e68adf0e343d' %}Dealers
{% elsif contentPermissionSetIds contains '8f4ea4900f0c44fc8605bf0d5b81fc2d' %}Internal Reader 
{% elsif contentPermissionSetIds contains 'b999758e71294d53bdb5e585e5acb135' %}Editor PM 
{% elsif contentPermissionSetIds contains '738a3f16a31541028b520331639422db' %}Editor Corporate 
{% elsif contentPermissionSetIds contains '157f3241b79344e0935f87d4a40a73a3' %}Admin  
{% elsif contentPermissionSetIds contains 'b007551e236d4aeda64798043572216c' %}Owner  
{% else %}Private{% endif %} 
{% if contentPermissionSetIds contains '00b15b669c174160a32254052ed06872' %} - Original{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %}  - <font color="#ff5576"> (!) 
</font>{% endif %}
</cp-overlay-box-bottom-left>

----------------------------------------
----------------------------------------
Vector:
---------------------

<cp-overlay-box-top-left>
   {% if data.vectorMetadata.fileExtension %}{{data.vectorMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds.size == 0 %}Private{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %} - <font color="#ff5576"> (!) 
</font>{% endif %}
</cp-overlay-box-bottom-left>


----------------------------------------
----------------------------------------

Video:
----------------

<cp-overlay-box-bottom-right style="background-color: transparent; fill: green">
   <cp-icon name="video-image" sizeClass="ic-24"></cp-icon>
</cp-overlay-box-bottom-right>
<cp-overlay-box-top-left style="background-color: green">
   {% if data.videoMetadata.fileExtension %}{{data.videoMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds contains '44a2e6a0c6e74f9fbc427507cda1dbac' %}Restricted 
{% elsif contentPermissionSetIds contains '5246b11b811d48c19e61c697d3819803' %}Restricted  
{% elsif contentPermissionSetIds contains '22fa6a3d55194b50a9dda3432767d1c8' %}Restricted   
{% elsif contentPermissionSetIds contains '15cf7c71fc5346a2951bbde4a13556df' %}Restricted
{% elsif contentPermissionSetIds contains 'fab4d49e526c4f99b50422e5aef2488c' %}Press     
{% elsif contentPermissionSetIds contains 'd914d272a90c4c119c34e68adf0e343d' %}Dealers
{% elsif contentPermissionSetIds contains '8f4ea4900f0c44fc8605bf0d5b81fc2d' %}Internal Reader 
{% elsif contentPermissionSetIds contains 'b999758e71294d53bdb5e585e5acb135' %}Editor PM 
{% elsif contentPermissionSetIds contains '738a3f16a31541028b520331639422db' %}Editor Corporate 
{% elsif contentPermissionSetIds contains '157f3241b79344e0935f87d4a40a73a3' %}Admin  
{% elsif contentPermissionSetIds contains '00b15b669c174160a32254052ed06872' %}Owner  
{% else %}Private{% endif %} 
{% if contentPermissionSetIds contains 'b007551e236d4aeda64798043572216c' %} - Original{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %}  - <font color="#ff5576"> (!) 
</font>{% endif %}
</cp-overlay-box-bottom-left>


----------------------------------------
----------------------------------------

Virtual Type WAFT:
-----------------------------

<cp-thumbnail-content>
{% if data.otherContentAndUsageInformation.mediaType %}
   <h2>{{data.otherContentAndUsageInformation.mediaType | tagbox_list | join: ", "}}</h2>{% else %}<h2>Virtual Type WAFT</h2>
{% endif %}
<h3>{% if data.virtualTypeWaft.textSingleLineNoTranslations %}{{data.virtualTypeWaft.textSingleLineNoTranslations}}<br>{% endif %} </h3>
<h5>{% if data.virtualTypeWaft.trigger.triggeredOn %} Last Triggered: {{data.virtualTypeWaft.trigger.triggeredOn | local_date: "%d.%m.%Y %H:%M:%S"}}{% endif %}</h5>
</cp-thumbnail-content>
<cp-overlay-box-top-left style="opacity: 1">
   VIRTUAL
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-right style="display: none">
</cp-overlay-box-bottom-right>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds contains '2762d63b8f774790b8add8e23fa2ea4b' %}Archived
{% elsif contentPermissionSetIds contains '54953fc4a3134c85b06ef48460f8551d' %}Restricted Admin
{% elsif contentPermissionSetIds contains '9c23b9b8570c4b8c981ae2fd6c858a35' %}Restricted PM
{% elsif contentPermissionSetIds contains '39f9e25dde09424ab3734cef399a080e' %}Restricted Corporate
{% elsif contentPermissionSetIds contains '83c7e5e5dee04eab840d223720e1dac4' %}Press  
{% elsif contentPermissionSetIds contains 'dc4748544b104e8483fdcaf69c0ef8b0' %}Dealer  
{% elsif contentPermissionSetIds contains '353afbfba904445eb5eca4b102a8d48e' %}Internal 
{% elsif contentPermissionSetIds contains '4df189f0729d41d3a5dc7d6366e95985' %}Editor Corporate 
{% elsif contentPermissionSetIds contains '2ca6cf910fe149259b538b254607f1d7' %}Editor PM 
{% elsif contentPermissionSetIds contains 'c647a09de9324419b9aa64118159ab1c' %}Admin  
{% elsif contentPermissionSetIds contains '0fff59fe263443649accbf932a01d6e1' %}Owner  
{% else %}Private{% endif %}
</cp-overlay-box-bottom-left>