Skip to main content
Skip table of contents

Display Pattern Help

More general details about Display Pattern Display Pattern

File Type Pattern

File Type Pattern

The following code fragments can be used:

HTML 
<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

Virtual Item Pattern

HTML 
<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

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

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

Example Image

HTML 
    <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

Examples for all File Types

HTML 
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>
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close