Twitter layouts

This topic describes:

  • how customer support sets up alternative HTML layouts
  • how to select alternative layouts in the Twitter paragraph
  • how to edit alternative layouts using HTML, CSS, and Velocity

To receive up to two alternative layouts, contact customer support.

To create HTML layouts, set up alternative layouts for mobile and text versions also. If no alternative layouts are saved for those versions, the default layout is used.

In some cases, some text elements will not be in the order that you want.

Selecting a layout

To select a default layout or one of up to 2 alternative layouts, while editing a message in the Template Kit, do the following:

  1. On the left side of the preview, in the menu bar of the Twitter paragraph, click Twitter. The configuration window opens on the right.
  2. Click the Options tab.
  3. In the Layout area > Layout drop-down list, select the layout you want to use.

    Image: Layout settings

  4. Click Apply.

Editing a layout

You can edit alternative layouts, but not the default layout.

If you lack knowledge of HTML, CSS, and Velocity, contact customer support to edit the alternative layouts. If you edit them without in-depth knowledge, serious display errors may occur in your mailings.

  1. In the preview on the left, click Settings. The configuration window opens on the right.
  2. Open the Twitter tab. Each layout has source text fields for the desktop, mobile, and text versions.

    Image: Twitter tab

  3. Edit the source text of the corresponding layout as needed. Under Inserting content, read how to place the various contents.

    Set up alternative layouts for mobile and text versions also. If no alternative layouts are stored for these versions, the default layout is used.

  4. Click Apply.

Inserting content

Access the content of the Twitter paragraph using Velocity variables and format the transferred content using HTML style attributes.

The following Velocity variables are available:

  • Status. Information on current item paragraphs
  • Present. For using queries that check for the presence of an element
  • Value. For issuing the content

Notes for the creation of new layouts

  • Font definitions. If you are using an alternative layout variant, font definitions must exist in the HTML you entered. The texts are not formatted by the Template Kit to give you complete freedom in visual design.
  • Widths. Specify a fixed width or a width in percent. You should enter a percentage, because this prevents elements from sticking out of the layout.
  • Danger of display errors. If you edit the layouts without in-depth knowledge of HTML, serious display errors may occur in your mailings.

Status variables

Variable Type Description
$twitterItemFirst Boolean Is true if it is the first tweet in the Twitter paragraph, or is otherwise false.
$twitterItemIndex Integer Contains the position of the post within the Twitter paragraph as a number (1 for the first tweet, 2 for the second tweet and so on).
$twitterItemLast Boolean Is true if it is the last tweet in the Twitter paragraph, or is otherwise false.

Present variables

Variable Type Description
$twitterTextPresent Boolean Contains true if there is content for the Text box, or otherwise false.
$twitterAuthorPresent Boolean Contains true if there is content for the Author box, or otherwise false.
$twitterDatePresent Boolean Contains true if there is content for the Date box, or otherwise false.
$twitterLinkTextPresent Boolean Contains true if there is content for the Text box in the Link area, otherwise false.
$twitterLinkUrlPresent Boolean Contains true if there is content for the URL box in the Link area, otherwise false.
$twitterImageUrlPresent boolean Contains true if there is content for the Image box in the Image tab, otherwise false.
$twitterImageAltTextPresent Boolean Contains true if there is content for the Alternative text box in the Image tab, otherwise false.
$twitterImageLinkPresent Boolean Contains true if there is content for the Link box in the Image tab, otherwise false.

Value variables

Variable Type Description
$twitterTextValue String Contains the content of the Text box.
$twitterAuthorValue String Contains the content of the Author box.
$twitterDateValue String Contains the content of the Date box.
$twitterLinkTextValue String Contains the content of the Text box in the Link area.
$twitterLinkUrlValue String Contains the content of the URL box in the Link area.
$twitterImageUrlValue String Contains the image URL from the Image tab.
$twitterImageAltTextValue String Contains the content of the Alternative text box in the Image tab.
$twitterImageLinkValue String Contains the content of the Link box in the Image tab.
$editBar String Inserts the paragraph's button bar. This is required to integrate the button bar into the table, such as when implementing adjacent items. If this variable is not available, the button bar is placed above the item.