Rich Media Titles are a channel type (represented in the Taxonomy as “Pages” and “Posts”) within the dotstudioPRO CMS that will allow users to build rich media content for their websites and applications. These channel types can include text, photos, videos and attached PDFs.The main difference between blocks in a rich media title and videos in a channel is that the block definitions are in the form of a predefined template (somewhat similar to post type definitions in WordPress).
Posts and Blocks have a very similar relationship to that of channels and videos – a Post contains some top-level metadata and multiple blocks. Each block contains some metadata of its own. Pages represent a predefined front-end template, based on theme settings. Pages provide an easy opportunity to create static pages on websites and applications.
The Media Library section serves as an asset management tool – primarily used in conjunction with Rich Media Titles. From the Media Manager page, users are able to view all their assets here, and upload new ones. The following file types are currently accepted for upload or import: pdf, jpg and png. Media assets can be combined into a gallery, which can be placed into a block. In order for galleries to be selectable from the block creator, they must be created from the Media Manager or Galleries page. Galleries can have set aspect ratios, which are set both within the gallery rail (when a user selects Manage) or from within the Edit modal.
Pages & Posts
A rich media title created within the dotstudioPRO Dashboard is represented in an application/website as a Page or a Post. The contents of a rich media title are called Blocks.
Posts and Blocks have a very similar relationship to that of channels and videos – a Post contains some top-level metadata and multiple blocks. Each block contains some metadata of its own.
The main difference between blocks in a rich media title and videos in a channel is that the block definitions are in the form of a predefined template (somewhat similar to post type definitions in WordPress). For example, there could be a block that just has a <h1> element for example. Another block could have an image and some text – Another block could be an <img> element. Whenever you add a block to a title you are creating a new instance from that template. To display posts on your website or application, assign the post to a category.
Pages
Pages represent a predefined front-end template, based on theme settings. Pages provide an easy opportunity to create static pages on websites and applications. These channel types contain no block creation functionality, but offer less rigidity to how content is laid out. Regardless of the information entered into pages, it is primarily dependent on the theme that will be displaying the provided page content.
To create a page, the following steps must be followed in order to it to appear on your website or application:
Navigate to Publish > Pages
Select Create Page
Enter desired Navigation Title, Page Name and Slug
For websites, add html-structured content into the HTML section For Applications, add content into the BODY section
Select an image by selecting Share Image
Enter in a description for the Page
Enter SEO keywords
Enable desired Direct To Consumer apps via their respective toggles
Enable the Published toggle
Once a user has entered in content, set the SEO settings and enabled the desired Direct to Consumer apps, the page is then able to be published (or made “active”), unpublished (or made “inactive”). To publish a page, enable the Published toggle and select Save. If the post is to remain unpublished, simply select Save.
Page Setup
Page Setup Section
Navigation Title The content entered here will be the copy used within a website or application’s navigation bar to reference the page.
Page Title The content set here, by default, will be set as the html page title on websites (typically displayed on browsers as the title of a tab). Depending on the theme settings, the page title may also be displayed on the web page or application page.
Slug The “slug” is the URL-friendly version of the page title. It is usually all lowercase and contains only letters, numbers, and hyphens. The post slug will dictate the url of the page on the website/application.
HTML Content placed here is primarily used for websites. The set theme will parse the html automatically when rendered on a website.
BODY Content placed here is primarily used for applications. The set theme will parse the content automatically when rendered in an application.
SEO Page SEO Section
Share Image Setting an image asset here will allow for an image to be displayed when the link is embedded in apps that parse SEO metadata.
Description Content that is entered here will be displayed as an excerpt when the link is embedded somewhere that parses SEO metadata. This content will also be shown when it appears in a search engine query.
Keywords Setting relevant words and phrases to describe what the content is about allows for search engines to determine which content is relevant to a particular search query. Ensure that the keywords are specified and strategic, as search engines will use this area to define the search ranking of the page within search queries.
Advanced Settings
Developers can utilize the Code textbox to add any additional html to be implemented into the page.
Page Advanced Settings Section
Direct To Consumer
Enabling toggles in this section will allow for the page to be visible on applications for the respective platforms.
Page Direct to Consumer Section
Posts
Posts are a channel type that utilize Blocks, which contain user generated content and assets, to create a page on a website or application. The resulting output is dependent on the website/application theme.
To create a post, the following steps must be followed in order for it to appear on your website or application:
Create a new post
Select the Properties tab near the top of the page and fill out top-level metadata.
Within the Properties tab, select the appropriate categories for the new post.
Return to the Block Creator tab and create at least one block. New posts will not save unless one block has been created.
For each block, fill in the required metadata for that block. Metadata and options can be edited by clicking Edit Block at the bottom of the block element (see screenshot).
Every block type (eg. Text, Image and Video) will have its own configuration options which will affect the UI when published to a website or application. These configurations can be managed within the Edit Block section.
Example configuration options for Text blocks
Add copy and image assets to their appropriate blocks.
Example content areas for Image blocks
Image block when an image has been selected
Once a user has entered in content, set the top-level and block-level metadata and assigned the post to a category, the post is then able to be published (or made “active”), unpublished (or made “inactive”). To publish a post, navigate back to the Properties tab, enable the Published toggle and select Save or Save & Exit. If the post is to remain unpublished, simply select Save or Save & Exit.
Quick Workflow Guide for Posts
Step 1: Create Post in dotstudioPRO dashboard
Step 2: Fill out top-level metadata
Step 3: Specify category for post
Step 4: Create blocks and add content
Step 5: For each block, fill in the required metadata
Step 6: Set each block’s options to fit design specifications
Step 7: Return to Properties tab and enable the Publish toggle
Step 8: Click Save & Exit
Block Creator
Each Post will contain a collection of Blocks, which contain the granular content that is displayed on websites and applications. While some block-level metadata elements are optional, it is recommended that at least one area is filled out to best utilize the block element.
General Settings
The following settings are shared across all blocks:
Block Name This name will be a reference point for users on the block creator to differentiate between blocks when managing post content.
Block Layout While the element will appear for all block types, the options will vary depending on the block type. Setting this dropdown element will define how the block will be displayed on the website/application.
Headline The headline is an optional element that will be displayed as a header-style element on the website or application. If there is no headline entered, the block will still function as normal, unless it is a text-type.
Body The headline is an optional element that will be displayed as a paragraph-style element on the website or application. If there is no body copy entered, the block will still function as normal, unless it is a text-type.
Text Blocks
Call to Action Button The headline is an optional element that will be displayed as a paragraph-style element on the website or application. Setting the Button Text will generate a button within the block element on a website or application. If no Link url or path is entered, the button will display, but not function as intended.
Image Blocks
Select Image Select an image to be displayed within this block element. This is required for all image blocks.
Call to Action Button The headline is an optional element that will be displayed as a paragraph-style element on the website or application. Setting the Button Text will generate a button within the block element on a website or application. If no Link url or path is entered, the button will display, but not function as intended.
Video Blocks
Select Image Select a video to be displayed within this block element. This is required for all video blocks.
Advanced Options
Divider Above Enabling this toggle will place a horizontal line divider above the block element.
Remove Top Padding Enabling this toggle will set the top padding of this block to 0, removing all spacing above the block element.
Open Link in New Window Enabling this toggle will set all links to open in a new tab or window (depending on the browser).
Mobile: Text Below Media Enabling this toggle will force the media above the copy when displayed on mobile devices, regardless of layout settings.
Properties
The properties tab dictates the top-level metadata for each Post. In order for a post to function correctly within the dotstudioPRO dashboard and applicable websites/applications, users must make sure the settings are correct prior to publishing.
Post Title The post title will be reflected on the dotstudioPRO dashboard within the Channel Title column, and will be displayed as the page title on applicable websites/applications.
Post Slug The “slug” is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens. The post slug will dictate the url of the page on the website/application.
Post Description Acts as an excerpt for the post, which can be displayed on other pages to provide summarized copy of the post, depending on the website/application theme. Also dependent on the theme, the post description may appear within the post itself.
Category Select a single or multiple categories in this section to connect the post to a dotstudioPRO category. This is the primary avenue for users to display posts on a website or application in an intentional, organized and strategic manner.
Searchable Enabling this toggle will allow users of the website or application to search for this post from within the respective website/application.
Release Date Set this area to the desired publication date to be displayed within the post when displayed on a website or application. The set date will not affect the publication of the post, as the set date will be displayed verbatim. It is recommended that the date be set to the intended publication date of the post.
Featured Image The image selected here will appear at the top of the page, as the post hero header (depending on the theme of the website or application). This image will also be used when the post appears on a rail, alongside the post description.
SEO Setting tags in this area will allow the user to easily search for the post within the dotstudioPRO dashboard.
Advanced Settings Developers can utilize the Code textbox to add any additional html to be implemented into the individual post.
Media Library
Media Manager
The Media Library section is a new addition to the dotstudioPRO dashboard that serves as an asset management tool – primarily used in conjunction with Rich Media Titles (ie. Pages and Posts). From the Media Manager page, users are able to view all their assets here, and upload new ones. The following file types are currently accepted for upload or import: pdf, jpg and png.
Upload File(s) Users can upload files to the media manager directly from their computer using the Upload File(s) functionality. Users can drag and drop files directly into the Upload File(s) modal or select Add File and navigate to the file location through the browser’s file explorer.
Importing from Dropbox Users can also import media assets from Dropbox from the Media Manager page. Selecting the Import From Dropbox button will open a small window. To import media files from dropbox, login and navigate to the folder that contains the desired assets. Once the folder is in view, select the desired files and click Choose to begin the import process.
Create Gallery In order for galleries to be selectable from the block creator, they must be created from the Media Manager or Galleries page.
Creating a gallery from scratch
Selecting the Create Gallery button without any image assets selected will open up an empty rail. Clicking and dragging the media asset’s thumbnail to the rail will add it to the gallery. Once all assets have been added, provide a unique and identifiable name and select Save Gallery.
Creating a gallery from selection
Selecting multiple image assets and clicking Create Gallery will open up a rail containing the selected elements. If all intended assets have been added, provide a unique and identifiable name and click Save Gallery.
Set Aspect Ratio
Setting the aspect ratio will force a uniform sizing convention for the gallery when displayed on a website or application. Aspect ratios can be set from the gallery creation rail or within the created gallery’s metadata.
Metadata
Selecting the Edit button from the Media Manager page will open up a modal that will provide the user with the following configurable options – Image Name and Image Description. Users are also provided with an image preview, as well as the following details of the selected image asset – ID, URL, Upload Date, Author, Source and File Type.
Image Name and Description
This area will automatically use the filename provided upon upload/import of the asset. For the best organization of the media library, workflow efficiency in the block creator and accessibility on the website/application front-end – provide an easily identifiable name and description.
Galleries
Media assets can be combined into a gallery, which can be placed into a block. In order for galleries to be selectable from the block creator, they must be created from the Media Manager or Galleries page. Galleries can have set aspect ratios, which are set both within the gallery rail (when a user selects Manage) or from within the Edit modal. Galleries have additional settings that can be set from within the Edit modal.
Create Gallery Selecting Create Gallery from the Galleries page will redirect to the Media Manager page with an open empty gallery rail. Clicking and dragging the media asset’s thumbnail to the rail will add it to the gallery. Once all assets have been added, provide a unique and identifiable name and select Save Gallery.
Metadata Selecting the Edit button from the Galleries page will open up a modal that will provide the user with the following configurable options – Caption, Set Aspect Ratio and Open in New Window.
Caption Depending on the theme, the caption may be displayed under the gallery when displayed within a block element on a website or application.
Set Aspect Ratio Setting the aspect ratio will force a uniform sizing convention for the gallery when displayed on a website or application. Aspect ratios can be set from the gallery creation rail or within the created gallery’s metadata.
Open in New Window Enabling the Open in New Window toggle will open all embedded media asset links in a new tab or window (based on browser specification).
