Introduction to Customizing the Event Screens

Display Options

Without writing any code, you can easily change Event Screen’s look and feel by adjusting its display options.
The available options vary according to Event Screen type you selected.

Back to Top

On-the-fly Settings

Ideally, you should change any Event Screen settings via Admin Portal.
However, you might find it useful to preview your changes by modifying URL parameters (think of this as your settings “override”).
The following snapshot illustrates a Wall Screen which is configured to show 2 columns, but
using the ?columns=4 GET parameter to show 4 columns on-the-fly.
You can see the Configurable Options section for more information.

Back to Top

Configurable Options

Global

Name Default Description
appendRoot ‘#container’ CSS selector of tiles being appended to.
debug 0 Whether or not to enable showing the debugging logs.
enableImageCheck 0 Whether or not to enable minimal image size filter.
listUrl <$list_url> Data service URL.
filterId <$filter_id> Filter ID. You can switch to use a different filter to load different data set.
imageMinHeight null Minimum image height. It only takes effect when enableImageCheck is turned on.
imageMinWidth null Minimum image width. It only takes effect when enableImageCheck is turned on.
queueLength 30 Available items in queue, not including pinned tiles.
template ‘#template’ CSS selector of Tile Mustache template.

Waterfall

Name Default Description
columns 2 How many columns should be shown.
use_circular_avatar ‘false’ Set ‘true’ to make all avatar images to be circular.

Carousel

Name Default Description
autoplay_speed 7000 Autoplay speed in milliseconds.
background_image null Background image URL.
center_padding ‘9.5%’ Side padding (px or %).
event_name <$event_name> Event Screen name which is displayed at header.
header_color ‘#ffffff’ Header font color in RGBA or HEX format.
header_hashtag Event Screen hashtag which is displayed at header.
header_background_color ‘#c80000’ Header background color in RGBA or HEX format.
header_background_image Header background image URL.
header_visible ‘true’ Enable to show heaer which contains name and hashtag.
mode ‘text-over-image’ Text/image rendering mode which includes ‘text-over-image’, ‘image-only’, ‘side-by-side’ and ‘random’.
speed 500 Slide/Fade animation speed in milliseconds.
spotlight ‘true’ Enables to highlight the text.
stackla_icon Icon URL for custom tile.
use_circular_avatar ‘true’ Set ‘true’ to make all avatar images to be circular.
theme ‘blocks’ Specifying theme which includes ‘blocks’ and ‘less-is-more’.
transition ‘slide’ Available transition mode including ‘slide’ and ‘fade’.
tile_background_color ‘rgba(0, 0, 0, 0.75)’ Tile background color in RGBA or HEX format.

Mosaic

Name Default Description
transition_delay 10000 The delay between each transition in millionseconds
queue_length 100 Available items in queue, not including pinned tiles.
hide_tile_text true Set ‘false’ to hide the text in tile

Scrollwall

Name Default Description
background_image null Background image URL.
event_name <$event_name> Event Screen name which is displayed at header.
header_hashtag Event Screen hashtag which is displayed at header.
header_background_color ‘#c80000’ Header background color in RGBA or HEX format.
header_background_image Header background image URL.
header_visible ‘true’ Enable to show heaer which contains name and hashtag.
margin 20 The margin of each tile.
rows 3 The amount of the rows.
speed 90 Moving animation speed in seconds.
stackla_icon Icon URL for custom tile.
transition_delay 10000 The time duration between each transition happens in milliseconds
use_circular_avatar ‘true’ Set ‘true’ to make all avatar images to be circular.

Back to Top

Custom CSS

You can customize stylesheet by updating Custom CSS tab. This accepts live CSS and LESS (currently in beta).

The following diagrams illustrate the default tile HTML structure of current 2 Event Screen types.

Waterfall

Carousel

Mosaic

ScrollWall

Back to Top

Custom JavaScript

We’ve exposed our Event Screen JavaScript instance for you to hack.
You can customise it by providing window.StacklaEventscreens.options config object before the Event Screen instantiates.
You can also subscribe eventscreen:ready event which is triggered immediately after Event Screen has been instantiated.

Before Instantiation

// Before Event Screen starts initializing...
window.StacklaEventscreens.options = {
    debug: true, // Show debugging logs
    onInit: function () { // Bind initialized event
        console.log('inited');
    }
};

After Instantiation

// After Event Screen instance is able to be accessed...
$(document).on('eventscreen:ready', function (e, instance) {
    // Bind receiving new message event
    instance.on('message', function (e, addedData, removeIDList) {
        console.log(addedData);
    });
});

For more detail, please check the Event Screen JavaScript API documentation.

Back to Top

Custom Template

No matter which Event Screen type you are using, it is always composed by many tiles.
You can have your customised tile template by enabling the Custom Template.
To write your own template, you must learn to use Mustache, a very famous template engine.
Check the Tile Data section to see which fields you can use in your template.

Back to Top

Tile Data

You can use all fields from data service in Custom Template.
Besides, we also added several useful data fields that you might need as well.

Global

Field Data Type Description
caption String Tile message which escaped and decorated properly.
ecal_data Array Ecal data
emoji Function Mustache lambda to show emoji icons
has_avatar Boolean Indicate if the user has avatar
has_image Boolean Indicate if the tile has image
has_image_dimension Boolean Indicate if the image has size
has_title Boolean Indicate if the tile has title
has_video Boolean Indicate if the tile has video
image_alt_text String Alternative text for image
image_max Array Image maximum size in array
image_max_width Number Image maximum width
image_max_height Number Image maximum height
image_type String Image size type. It could be ‘small’ or ‘standard’.
is_ecal Boolean Indicates if it’s a ecal tile
is_firefox Boolean Indicates if user’s browser is firefox
is_ie8 Boolean Indicates if user’s browser is IE8
is_stackla_feed Boolean Indicates if it’s a custom tile
is_video Boolean Indicates if it’s a video tile
last_queued_comment Object Returns the last queued comment object
message String Tile message which its tags has been striped
original_link String The link to original post
show_html Boolean Indicates if the tile should show HTML for custom tile
show_image Boolean Indicates if the media type is ‘image’
show_video Boolean Indicates if the media type is ‘video’
status String Current status of this tile. It could be ‘published’, ‘disabled’, or ‘queued’.
tag_name_list String Tag names which is separated by comma
tag_id_list String Tag IDs which is separated by comma
terms String Terms which is separated by comma
timephrase String Formatted time string
user_link String URL to user’s profile page
via_source String Shows the name of origin social media. (e.g. Twitter)
video_url String Video playing URL

Wall

Field Data Type Description
avatar_style String Inline style of user avatar
class_names String CSS class names which are separated by spaces
enable_tag Boolean Indicate if the tag list should be shown
font_size String Font size in %
has_video Boolean Indicates if tile has video
hide_profile Boolean Indicates if user profile should be hidden
hide_detail Boolean Indicates if detail should be hidden
image_height Number Image height
image_width Number Image width
info_height Number User info height
margin Number The margin
margin_left String The left margin in pixel
margin_right String The right margin in pixel
official Boolean Indicate if this tile is an official tile
video_size Array Video dimension
width String Tile width in pixel

Carousel

Field Data Type Description
avatar_class String Avatar CSS class name. It could be ‘img-circle’ or ”.
background_image String Background image URL
background_color String Background color in RGBA or HEX format
class_names String Tile relevant CSS class names separated by spaces
is_blocks_theme Boolean Indicates if it is using ‘Blocks’ theme
is_less_theme Boolean Indicates if it is using the ‘Less is More’ theme
is_side_by_side_mode Boolean Indicates if it is using ‘Side-by-Side’ mode.
speed Integer Transition speed in miliseconds. Default is 500.

Mosaic

Field Data Type Description
class_names String Tile relevant CSS class names separated by spaces

Scrollwall

Field Data Type Description
avatar_class String Avatar CSS class name. It could be ‘img-circle’ or ”.
background_image String Background image URL
background_color String Background color in RGBA or HEX format
class_names String Tile relevant CSS class names separated by spaces
is_debug Boolean Indicate if it’s in debug mode.
serial_number Integer The tile serial number.

Back to Top

Debugging Mode

Our developers add debugging logs for every methods that event screen executes.
By adding ?debug=1 as an extra URL parameter, you will see these logs in Developer Console.
It’s sometimes easier for you, as a developer, to investigate your Custom JavaScript issues.

Back to Top

References

For more details on different Event Screens, please check the following link.

Back to Top