Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

 File Type 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

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

Icons

Embed icons with 

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

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

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>
  • No labels

FotoWare Switzerland AG - CH-5033 Buchs - Switzerland
https://picturepark.com - support@picturepark.com
© 2024 Fotoware Switzerland AG