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.

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

Solutions

Dashboard Picturepark Demo

Instructions

Code

Related articles