UI elements

Pages of the type start page, header, sharing, authentication and terms of use can be managed in this area.

Please note

Making changes through these consoles might render your system inoperable, pose security risks for your data and users, and result in loss of compliance with data protection regulations as well as Picturepark terms and conditions. Access is dependent on your permissions, license and certification status. If you are unsure of whether you should make changes here please contact support.

Important

If you are using the Picturepark Cloud service then some personal data stored for archiving purposes but visible for other users as described in this section of the manual is deleted periodically (every 90 to 120 days) in order to comply with the General Data Protection Regulation (GDPR) and other applicable privacy regulations.

Licence Tip

The number of sites of the type start page, header, help and authentication are limited to the number of licensed channels. Sites of the "sharing" type are unlimited.

Core Configuration

The selection of the core configuration checkbox defines whether or not the complete Picturepark Javascript is loaded. In the case of the start pages for example you can then place the Picturepark login form. If you do not load the core configuration then the loading of the page is faster, so only choose this if you need to make use of Picturepark components. You cannot load core configurations for sites of the type header and terms of use and the checkbox is therefore not available for these site types.

If this option is activated, the following code is automatically added in the "Code" tab. This code is required for further editing of the page using the editor.

window.publisher = new PP.publisher.StandardPublisher({ controller: controller });

Depending on manual creation or expansion of the code you will have to make sure that this code is present and correctly positioned.

Starts Pages

Start pages can be created for Picturepark as well as for individual ports. A skin and code are necessary for a start page.

Code

When creating a new start page standard code is added, which is required for editing in the editor, when you activate the checkbox "Load core configuration"

Skin

The following can be defined in the skin depending on the desired configuration:

Login form (entire)
Individual functions inside the login form
System messages
Version

By defining 'target="picturepark"' you ensure that the area can be later selected in the configuration. For example:

Configuration

The following configurations can be made per start page:

start-config

You can select the are of the skin in which single elements should be shown using "Target area" (login form as a block, individual functions of the login form, system messages, version number). Only areas that have the option 'target="picturepark"' in the skin can be selected. If a login function is activated, but no target area is selected, then the function will automatically be entered in the target area that is selected under "Layout"
Compilation of the single options that are available in the login form. If none of these options is selected then only the standard fields "Email", "Password", "Language" (if more than one Picturepark UI language is available) and the login button are shown. The individual functions can be separately placed by the selection of a target area. If access via ADFS is configured for a Picturepark then the normal login form and/or the ADFS login form can be activated. These options have no effect if no ADFS access is configured.
For each start page you can define to which page a user is redirected after a successful login. Possible options are:

Picturepark: The user is forwarded to the Picturepark (URL: customer.picturepark.com/Website)
Port: Selection of site of type port
Channel: Selection of a special Picturepark channel
Custom URL: Definition of a special URL which you would like the user to be forwarded to

The system messages contain information regarding upcoming releases or other restrictions to the usage of Picturepark.
You can select either an external URl or a page of type "Terms of use". The terms of use can be individually configured via further options and all the texts can be defined per available UI language.

Content source: Selection of either an external URL or a page of the type "Terms of use" (per language). Only pages of the type terms of use are available to which the logged in user has rights.
Target: Terms of use can either be opened in a pop up directly on the start page or in a new window
Height/Width: Selection of the height and widht of the pop up in pixels
Link name: Text, which is shown after the checkbox and is verlinkt with the terms of use (per language) e.g. " I accept..."
UI Element/URL: Selection of the url for externally linked terms of use (per language)

The Picturepark version number can be shown and is helpful during support queries.
The options "Remember login" and "Next time log in automatically" cannot be placed separately and are automatically placed in the target area that is defined under "Layout" as soon as these options are activated. An auto-login is only possible when the option "Remember login" is activated first.
If one or more identity providers are configured for a Picturepark, then an additional connect panel will be shown next to the standerd login form. If desired this can also be removed from the start page.

Multiple Languages

Texts for multiple languages can be added to the skin. For example for German you can define language specific content by using 'pplanguageid="1"' The contents must then also be hidden via CSS. As soon as the language is read on loading the page the corresponding contents are shown. For example:

<div style="display:none;" pplanguageid="1">German Text</div>

<div style="display:none;" pplanguageid="2">English Text</div>

<div style="display:none;" pplanguageid="3">French Text</div>

<div style="display:none;" pplanguageid="78">Spanish Text</div>

<div style="display:none;" pplanguageid="198">Portuguese Text</div>

Standard Start Page

The page with the name "Start" is used as the default start page which is shown when the Picturepark URL is called (customer.picturepark.com).

Links in the body text

The calling of the registration and forgotten password forms can also be implemented directly in the HTML:

<a onclick="javascript:window.publisher.loginPanel.showRegistrationWindow()" href="javascript:void(0);">Register as a new user</a>

<a onclick="javascript:window.publisher.loginPanel.showLostPasswordWindow()" href="javascript:void(0);">Lost Password?</a>

Logout URL

To make sure that the user goes back to the correct start (page) on logout you can set the logout url. This can be defined for the entire Picturepark, for individual channels and also for single ports. This configuration can be made in the management console or directly in the port management.

User Settings

If a user registers via a special start page, then this is saved in his user profile. The url to this page will then be used as a reference in future emails e.g. during renewal processes.

Header

The are above the channels can be changed with site of the type "header".

ui-header

It is possible to create multiple header sites. You can define which header is shown in which channel using the Picturepark Management Console.

Sites of the "Login" type, which are shown above the Picturepark login form can be changed. In order for the UI element to be shown above the login, the name "Login" needs to be given to this site.

ui-login

The measurements for this area are 416 x 73 pixels. If the ADFS login is activated, then the login form is automatically widened to 696px.

The use of a UI element for this area needs to be activated in the Picturepark Management console.

Sharing Templates

Sharing templates can be selected during the creation of sharings by authorized users. The selected assets are then available in the corresponding design. In order to simplify the creation of sharing templates, there are pre-defined templates available, via which a new sharing template can be created with just a few clicks.

Minimum code requirements / configuration

When creating a new sharing template the standard code, which is required for the editing in the editor, can be activated by selecting the option "Load Core Configuration". The code always needs to be placed in front of the view port.

The following areas need to be defined in the code:

PictureparkMailing
An area with an id in which the asset browser can be loaded. This area needs the definition 'target="picturepark"' (HTML) or 'target: 'picturepark'' (script).

The corresponding are can be selected in the "Edit" tab in the "Render to" option.

ui-sharingcreate

Standard template

A default template is used if there are no customer specific sharing templates in the system. The "Sharing" skin is included in the system per default and is used for the default template of the sharings. For a new sharing template you can either use no skin or create a new skin.

Example Code

A simple code:

var viewPort = new Ext.Viewport({

layout: 'border',

items: [

{region:'center', layout:'border', items: [

{region: 'north', autoHeight: true, bodyCfg: {id: 'PictureparkMailing'}},

{region: 'center', bodyCfg: { id: 'AssetBrowser', target: 'picturepark'}}

]}

]

});

window.publisher = new PP.publisher.StandardPublisher({

controller: controller

});

viewPort.doLayout();

You can take a look at the code in the templates for further examples.

Rights

All user groups which have "Use" rights on a sharing template, can select this template during the creation of a Sharings.

If more than one sharing template is defined per user group then the sort order is taken from the management of the UI elements in which the entries are sorted alphabetically.

Make message required for shares and orders

Add the following code to the tab "Code" to make the measse required for shares and orders:

controller.mailingMessageRequired = true;

Open Graph Support

Sharings contain OpenGraph (OG) Metatags, which play a role in sharing on social networks. The standard description is used as "OG Title" and the message from the sender as "OG Description". The preview image of the first asset in the sharing is used as "OG Key Visual" . The asset sort order can be changed via drag and drop in the sharing management. The usage of Open Graph within Picturepark is officially supported for Facebook, Twitter and LinkedIn. Please note: For Facebook the preview image will not be visible while sharing but will be displayed on Facebook anyway once the link has been shared.

Important: Social networks save the values of these metatags as soon as a link is first shared. Therefore any subsequent changes to the subject, title and sort order will most likely not be updated if a link is shared again. Please double check these entries before sharing.

World Port Sharing Template for Use in Picturepark

You are able to use the new World Port Sharing template for sending mails from Picturepark as well. Simply add a UI Element of the type "Share" add a Name and Browser Title and select your World Port in the "Facet Configuration" field, select the usergroups that should use this template and save. The entries in the "Skin Script" and "Code" sections of the UI Element need to remain empty and no other settings are considered. You will then be able to select the World Port Sharing Template for mails out of Picturepark. Please note the World Port sharing template is not available for links.

Help Pages

The Picturepark-own help pages are shown per default when clicking on the help in the Picturepark

ui-help_en

As soon as at least one page of the type help is created as a UI element, then this page is automatically shown for the corresponding user groups. It is possible to use the "Use" right to make different help pages available to different user groups.