Advanced Carousel Cloud Layout Editor Usage

Introduction

You can use Carousel Cloud without ever needing to touch the layout editor by using ready-made templates to create content. You can even venture into the layout editor and tweak things on a template, such as changing the font or text color. This article assumes you want to go past the easy stuff and dig into more advanced functionality of dynamic bulletin rendering.

There are two bulletin-level sections at the top of the accordion that allow you to select the background, select (either by using the Blocks menu or clicking where the block is on the preview), or create a block.  You can also reorder blocks using the grippy handle to affect the order in which they are drawn, as blocks towards the front may obscure blocks behind them. But to do anything useful, the next step is to select a block.

Blocks can be simple shapes (rectangle or ellipse), hold a picture, show a video, or display text. All blocks have a basic set of properties for configuring where they are drawn (Size and Position), their background color, outline, et c. (the sections that start with Block–). There's nothing weird about these basic properties, so feel free to set them to however you’d like. Picture blocks have two options. If you want the picture's source to be from Carousel Cloud's Media tab or downloaded from a URL (Web Picture) from the web (either by entering a URL or for dynamic bulletins, it could be a #field# that contains a dynamic URL). Either way, you get some picture-specific properties in the Picture section, including if you want the picture to stretch to the block's dimensions or just fit without being stretched (Maintain aspect ratio). The same applies to a video block, except it can only come from Carousel Cloud's Media.

Text blocks have seven whole sections of properties to control how their text is rendered. Four of them are pretty straightforward: Text Gradient, Text Outline, Text Shadow, and Text Glow. If you want the text to be filled with a gradient, an outline around it, a shadow under it, or a glow around it, simply open the appropriate section, enable that drawing technique and set it.

Tricky Text Properties

Text Section

• Default Value is the text to display. For dynamic bulletins, this can contain #fields# that will be filled in when Carousel Cloud updates the bulletin.

• One-line vs. Multi-line Field Size does nothing to affect how a block looks on a bulletin. It just changes the amount of space you are given in the text box that appears on the Content tab.

• Limit length will truncate longer text to a certain length, possibly in the middle of a word, so use it only when you know what you're doing. This is different than the RSS bulletin's Character limit, which will truncate item text, but will attempt to find sentence boundaries if possible.

Font Section

• Size Text to Fit will make the text the largest possible size it can while still fitting in the bounds of the block. It might not extend all the way to the bounds of the block because font sizes are not granular enough to size it perfectly to a given block. When disabled, Carousel Cloud trusts you to size the text properly. If you size text to be too large to fit in the block, it will not be cut off at the edge of a block and it will overflow the block bounds.

Text Alignment Section

• Automatically Wrap Text will break text onto another line if the text overflows the right edge of the block. Note that this will not break words, so if a single word is too big for a line, it will overflow the edge of the block. This is a sign your font is too big, the block is too small, or your words are too long.

• Horizontal and vertical alignment are straightforward if the text fits within the block bounds (see Size Text to Fit). However, if the text does not fit horizontally, the horizontal alignment will leave the text left-aligned and overflow the right edge of the block, no matter which horizontal alignment setting you choose. Also, if the text does not fit vertically, the text will still obey the alignment setting but will overflow the block and align to the top edge, center line, or bottom of the block. If the text is too tall and you set it to align top, it will overflow off the bottom, align center, and it will overflow off the top and bottom (but be centered vertically on the block's vertical center line), and align bottom will cause it to overflow off the top. If you're paying attention, you'll notice that a very snugly fitting block will appear the same, no matter what you select for alignment properties.

		Align Top
		Align Middle
		Align Bottom

Dynamic Content

For dynamic bulletins, things get more complicated. The Options section for a block gets two additional properties that are not available to standard bulletins, namely Repeat for each feed item and Resize block to fit text.

Item-Based

If you consider the idea that most text-based dynamic bulletins (Events or RSS; Weather is the exception and does not have items) are item-based, it will help you understand what these mean. Item-based means that your template defines a set of blocks that will be used to display each RSS story or Event in a schedule. You define one set of repeating blocks how you like, and Carousel Cloud will take care of making additional blocks that follow your design for each additional item that fits on the bulletin's page. Carousel Cloud will also use those repeating blocks again on all subsequent bulletin pages, until everything is displayed as you’ve configured it.

Pages

Pages is the term used for an image that makes up a bulletin. Standard bulletins can't have pages; only item-based dynamic bulletins. While displaying the bulletin, the player will show each page for the bulletin's dwell time in order before advancing to the next bulletin.

Headers and Footers

Blocks that are not marked Repeat for each feed item are considered header or footer blocks and will remain constant on multiple pages of a bulletin, and not repeat if there are multiple items on a page. All repeating (non-header and footer) blocks must fit between the bottom of the header blocks and the top of the footer blocks, otherwise you'll see a "no blocks could fit" message. Header blocks are all non-repeating blocks whose bottom is above the top repeating block (y-coordinate, not z-index). Footer blocks are the rest of the non-repeating blocks. You may notice that if you have a block in the middle of the bulletin that you forget to set repeat for each feed item, it will cause the "no blocks could fit" error because you just shrunk the available space for content.

For historical reasons, blocks with a name that contains the word "header" will be treated as if they have the repeat for each feed item off, regardless of how that property is set. (See Please Note below regarding Groups for an exception to this when a name with "header" is still required.)

Resizing Blocks

Resize block to fit text interacts with the text overflowing behavior described above. If the text is too large, it will make the block larger to accommodate it. Without enabling Resize block to fit text, large items will overflow but not reserve room for themselves, so the next item may appear too high and/or on top of the block that failed to resize. When creating a dynamic template, you will usually want either Resize block to fit text or Size Text to Fit enabled for each text block, but not necessarily both.

Repeating Blocks

Even if you don't have multiple items per page of a bulletin, or you ever plan to show more than one item, you must enable Repeat for each feed item for the blocks that show item content. If you view sample data under the Content tab while creating or editing a bulletin, fields under Feed Fields are only allowed in the header or footer blocks, and item fields (under First Item in Feed Fields) are only allowed in repeating blocks. The exception is Event bulletins often display a single item per page, or want to place item data in the header (i.e. #date#).

Groups (Event Bulletins)

Event display bulletins allow you to group events. If you enable Multiple Groups Per Page, the header blocks will be repeated for each group.

Generally, the z-index is only used for drawing the blocks properly from back to front within the header blocks, the item blocks for the first item, second item, and so on, then the footer blocks. The z-index cannot be used to put items below header blocks. However, when using event display bulletins with Multiple Groups Per Page, only header blocks with a z-index above (nearer the front) than that of the top-most repeating block will be repeated for each group.

Event bulletin, grouped by time, with Multiple Groups Per Page set to off:

Event bulletin, grouped by time, with Multiple Groups Per Page set to on:

Hints for Dynamic Content

If you put {braces} around a dynamic #field#, you can conditionally show additional text with the field only if the field has a value, i.e. {Likes: #ItemFavoriteCount#}, the Likes label will only appear if there are any likes.

When blocks resize, align the tops of columns at the same exact y-coordinate and the repeating blocks that are below the block that is being resized will be pushed up or down by the same amount the resizing block is expanding or shrinking. Even if you have a block that is 1 pixel lower than another, it will be pushed down if the higher block has to grow to accommodate larger text.

Select and double-check each block so that the "Repeat for each feed item" is set properly before publishing a new layout. If you miss one, it could make the renderer think your header blocks take up your whole bulletin and cause no blocks to fit.

Carousel Cloud doesn't allow you to preview dynamic templates with live data, only the #field# placeholders, so it is imperative that you save a bulletin to see how it looks with real data, and then go back to tweak anything you don't like. If you're not working in a staging environment, it can be useful to use the Save for later? option on the Extras tab to prevent a bulletin from being published to players, so you can still edit it before making it live. It is tricky to accommodate text of widely varying lengths in a template, so testing with live data will allow you to tailor it to your data. Pay close attention to Automatically Wrap Text, Resize block to fit text, Vertical Alignment, and Size Text to Fit for every single block.