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

https://youtu.be/y8lN5lHVZOc

Code

You can copy the following code into the HTML area of the template.

CODE

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

📘 Instructions

Code

📋 Related articles