Dashboard Picturepark Demo
- Olivia SchĆ¼tt (Unlicensed)
Owned by Olivia SchĆ¼tt (Unlicensed), created
Jun 14, 2022
2 min read
Loading data...
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