Dynamic Info Blocks

Media Layouts

The next evolution in slide shows and carosels, media layouts can organize multi blocks of content into groups that are dynamic, movable, and best of all accessible.

About Media Layouts

This page will run through the way media layouts are created, setup options, and data entry.  Below you will learn the various fields that are available as well as way to go beyond the default labels to craft something that is best suited to the needs of a particular use case.

Media Layout Styles & Formatting

To learn more about transforming an exisiting application into another format, layout, or modifiers check out our styles guide for media layouts.  It has the style classes and modifiers for use on the pages that use them.

[video text goes here]

[video file goes here]

Info Block Type: Dynamic Content

To start you'll need to set the info block type to dynamic.  If the info block wasn't set as dynamic it can be changed in the page properties.  

In the custom settings you can set the Used As drop-down to Dynamic Content.

Depending on your needs you can also choose to increase the amount of content blocks that you have available in the edit mode.

When you're ready save the settings and return to the edit screen.

 

Interface Setup

Once the content type is set to dynamic you can go ahead and set the dynamic type.  This will help change the editing screen so you get the best experience for your block type.

 

In the left menu will be two buttons next to the content layout editor.  The top button is used for the presentation and below that is the button for snapshots.

To edit your info block interface setup use the presentation button.  This will open the interface overlay panel where you can make further choices.

 

Dynamic Content Interface Options

The interface options will overlay the info block editing area, don't worry you can always press the presentation button to remove it. 

The interface is split up into three major areas: the copy, the content setup, and the preview panels.  When using media layout info blocks the preview panel will be used to give you a general idea of layout.

The Copy Panel and Editor Options

The first option in the copy panel is Content Layout.  As you work through your setup it will update the Content Layout textarea.  This code is auto generated and used to help structure the info block interface when put on content pages. 

Editable Section Layout Options

Below the content layout is are the controls for Editable Section Layout Options.  The first option would allow you to change the way each info block is set.  Leave it as rows with number of columns set to auto.

The always show options check box will allow you to have the css, categories, tags, and details editor boxes show up.  For directories you do not need to check this box, the interface will know to always show those editors.

Extra wide editing is the next check box and can help if your directory is being used for something like a faculty / staff directory.  If you need to write significant content inside the block's content editor then it may be helpful to have the maximum space to mange that data.

Display Type

Make sure that the option for Media Layouts & Image Blocks is marked.

There are two additional options for the dynamic content regardless of your data type.

Snapshot Grouping is used when you have multiple files that are going to be pulled into the page where you use it.  You can choose to use them or not by checking the box.

Automate Deep links provides an optional button that will allow users to deep link to the page where the content is used and preselect the info block content they want.  This is an easy way to cross link from any page directly into a specific item without needing the user to perform any other selection.  It also opens up the ability to reuse your info block content across more pages.

Interface Setup

Media layouts are less about filtering for end users and just creating a piece of content they can experience.  The interface provides a multitude of display options but remember this is about images AND words.  Media layouts was built to help solve the problem of using multiple links and large content inside the old slideshows.

---

The Collection Name is useful when combining multiple files into a single page section.  The check box for use name as header will post the collection name on the cards.  For a media layout it may not be considered all that useful to end users.  Collection name is optional.

---

Presentation Format has one option for Display Type.  It will set the overall layout style for the info block.  There are two basic style types, showing one block at a time or several.  Then do you want to have movement or not.

• 1 block at a time, with or without movement
• Multi blocks, with or without movement

---

 

Multiple Block Configuration allows you to choose several options.  Remember that depending on the end user's display some counts will adjust to fit better.  Multiple block configuration is only used when the Display Type is set to use multi blocks.

Display Count allows you to set the number of blocks that show at a time.  If there are not enough blocks to fill the full count it will degrade gracefully.  The values for display count go from 2 to 10 blocks.

Display Group allows you to choose the shape of the multi blocks.

• Single  or Double line of blocks
• Grouping (double line) with a large left or right item
• List of blocks
• Zigzag where the image and text will alternate per row
• Cards

Display Size is a general sizing option to help you decide how best to display content.  Options are small, medium, and large.

---

Movement Controls will help you add motion to the media layout.  Movement will always come with controls and end users can choose to pause the motion at any time.

There are two options here with both dealing with navigation controls.  The first is the Control Location.  This allows you to position the controls top or bottom, left, right and center.

The second control option is the Block Count Indicator.  It changes the display options for the number of items within the layout.  This is per "slide" on a motion so if you have a display group set to use multiple items, each block count indicator would be one indicator per group and not one per item.

---

The Block Order settings allow you to choose how the media layout is put together.  You can choose to do it based on the editor order, use the sort rank field (in the Details section), or based on the order.

The options for starting block based on a parameter are: Randominze Start, Title, Published Date, and Updated Date.

Randomize start will help keep your page feeling fresher longer as each time the page is refreshed it will bring up a different info block record.

---

Start Blocks Based on:

Field Mapping

The last option within the Dynamic Content Setup is the field mapping options.  If you'd like to learn more about it we have a field mapping guide that will explain the process in greater detail.  When it comes to media layouts, the use of field mapping is really a non-issue as the items have no direct influence on the layout interface or data within each block record.

Save the interface setup

As you make different choices during the setup process that the Content Layout code within this textarea has updated. 

• When you finish with the dynamic content setup, copy the C ontent Layout textarea code.  
• On the left side of the editing screen click the standard editing button for Content Layout. 
• Paste in the value you copied and save your work. 

The page will automatically reload with the updated settings.  If you need to update the interface settings just click on the presentation button.  The current layout options will be automatically updated and you can make any changes needed. 

Remember that after your changes you will need to copy/paste the updates to the Content Layout editing section on the left side.

Media layouts are the simpliest in editing.  They are set up for just needing the content block.  The order in which data is entered is going to show up on the info block as it was typed in except the first image item is used for the background or main image feature.

Remember to provide a title using the Content Main Title style.  It will help to generate a better looking info block item, but also creates the title for the accessiblity menu.

Default editor per info block record

Editor will update record title when using a Content Main Title within the content block

Making Accessible Content

To help users who may need additional controls over the content the media layout will automatically create a Media Menu based on the info block content.  This media menu will create a way for users who want to go directly to a record without requiring them to use the media layout controls.

This is another reason it is important that you provide a title for each record.  If you do not provide a title you will see z-no-title.