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>