Dashboard Picturepark Demo
The Picturepark Online Demo (http://demo.picturepark.com ) features several concepts, like a media library and a product library, events, campaigns, press portal and a document library. The dashboard shall guide the users to the individual areas and also show the links to public portals.
Instructions
You need to be able to edit templates in Picturepark.
Open Settings > Templates
Create New
Select Type “Dashboard page”
Select the default language
Add HTML
Save & Reload
Code
You can copy the following code into the HTML area of the template.
<!-- In the style area you can change colors and spaces. -->
<style>
.cp-dashboard-page {
background-color: #f8f8f8;
position:absolute;
width: 100%;
height: 100%;
}
.banner-section {
padding-bottom: 32px;
}
.teaser-section {
display: flex;
flex-direction: column;
justify-content: center;
color: #444444;
align-items: center;
padding-right: 16px;
padding-left: 16px;
padding-bottom: 32px;
text-align: center;
}
.teaser-title {
font-size: 18px;
font-weight: 500;
}
.teaser-subtitle {
color: #727272;
}
.cards-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
padding-right: 16px;
padding-left: 16px;
padding-bottom: 32px;
}
@media screen and (min-width: 600px) {
.cards-section {
padding-right: 10%;
padding-left: 10%;
}
.teaser-section {
padding-right: 20%;
padding-left: 20%;
}
}
</style>
<!-- Below the style area you find the predefined widgets from Picturepark. -->
<div class="cp-dashboard-page">
<section class="banner-section">
<cp-dashboard-banner
backgroundImageUrl="https://picturepark.com/data/Releases/11.3-Rigi/CP-Dashboard-Resources/belinda-fewings-6wAGwpsXHE0-unsplash.jpg"
teaserTitle="Welcome to Picturepark"
teaserText="Search or click one of the boxes below."
>
</cp-dashboard-banner>
</section>
<section class="teaser-section">
<p class="teaser-title">
Platform for all product and marketing content.
</p>
<p class="teaser-subtitle">
In this Picturepark you find a general overview of various concepts, including a media libary, a product library for product content. A press portal and a document library, as well as some event information and campaigns.
</p>
</section>
<section class="cards-section">
<cp-dashboard-card
imageWidth="300"
imageHeight="200"
title="Media library"
channelId="portal"
url="/contents/portal"
imageUrl="https://images.unsplash.com/photo-1523461811963-7f1023caeddd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1165&q=80"
>
</cp-dashboard-card>
<cp-dashboard-card
imageWidth="300"
imageHeight="200"
title="Product library"
channelId="product"
url="/contents/product"
imageUrl="https://images.unsplash.com/photo-1578916171728-46686eac8d58?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80"
>
</cp-dashboard-card>
<cp-dashboard-card
openInNewTab="true"
imageWidth="300"
imageHeight="200"
title="Press Portal"
channelId="pressPortal"
url="/contents/pressPortal"
imageUrl="https://images.unsplash.com/photo-1504711434969-e33886168f5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
>
</cp-dashboard-card>
<cp-dashboard-card
openInNewTab="true"
imageWidth="300"
imageHeight="200"
title="Document library"
channelId="documentLibrary"
url="/contents/documentLibrary"
imageUrl="https://images.unsplash.com/flagged/photo-1558963675-94dc9c4a66a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80"
>
</cp-dashboard-card>
<cp-dashboard-card
openInNewTab="true"
imageWidth="300"
imageHeight="200"
title="Content Portal"
channelId="portal"
url="https://demo-contentportal.picturepark.com/dashboard"
imageUrl="https://images.unsplash.com/photo-1600431521340-491eca880813?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80"
>
</cp-dashboard-card>
<cp-dashboard-card
openInNewTab="true"
imageWidth="300"
imageHeight="200"
title="Press Portal"
channelId="portal"
url="https://demo-pressportal.picturepark.com/"
imageUrl="https://images.unsplash.com/photo-1503428593586-e225b39bddfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
>
</cp-dashboard-card>
</section>
</div>Related articles
FotoWare Switzerland AG - CH-5033 Buchs - Switzerland
https://picturepark.com - support@picturepark.com
© 2023 FotoWare Switzerland AG