social_media_custom_htmlstaticsocial-medianone1social-mediaOriginal WidthThis is the intended width of the template and is used to scale the Widget within its region when the template is applied.Original HeightThis is the intended height of the template and is used to scale the Widget within its region when the template is applied.Original PaddingThis is the intended padding of the template and is used to position the Widget within its region when the template is applied.Main TemplateOptional Stylesheet TemplateOptional JavaScriptAdd JavaScript to be included immediately before the closing body tag. Do not use [] array notation as this is reserved for library references. Do not include script tags.1Content TypeThis is the intended tweet content type.Date FormatThe format to apply to all dates returned by the Widget.#DATE_FORMAT#Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01EffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle{{javaScript|raw}}{% endif %}
{{template|raw}}
]]>
.social-media-item'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_1staticsocial-mediaTemplate 1 - text, profile imagefulltime-np4005001Date FormatThe format to apply to all dates returned by the Widget.#DATE_FORMAT#Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Background ColourThe colour of the post background#ecf0f1Post Text ColourThe colour of the post text#333Post Header Text ColourThe colour of the post header text#95a5a6Profile Border ColourThe colour of the profile border#ecf0f1EffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle100020024
{{user}}
{{date}}
{{text}}
]]>
span').each((_idx, el)=> {
$(el).html(moment($(el).html()).format(properties.dateFormat));
});
}
$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_2staticsocial-mediaTemplate 2 - text, profile image, photofulltime12003002Date FormatThe format to apply to all dates returned by the Widget.#DATE_FORMAT#Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Background ColourThe colour of the post background#ecf0f1Post Text ColourThe colour of the post text#333Post Header Text ColourThe colour of the post header text#95a5a6Profile Border ColourThe colour of the profile border#ecf0f1EffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle100090024
{{user}}
{{date}}
{{text}}
]]>
span').each((_idx, el)=> {
$(el).html(moment($(el).html()).format(properties.dateFormat));
});
}
$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_3staticsocial-mediaTemplate 3 - texttextonly4005001Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Text ColourThe colour of the post text#333EffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle60015012
{{text}}
]]> .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_4staticsocial-mediaTemplate 4 - text, profile imageprofileleft4005001Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Text ColourThe colour of the post text#333EffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle80010012
{{text}}
]]> .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_5staticsocial-mediaTemplate 5 - text, profile imageprofileright4005001Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Text ColourThe colour of the post text#333EffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle80010012
{{text}}
]]> .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_6staticsocial-mediaTemplate 6 - text, profile imagetwitter13005501Date FormatThe format to apply to all dates returned by the Widget.#DATE_FORMAT#Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Background ColourThe colour of the post backgroundrgba(255, 255, 255, 0.6)Post Text ColourThe colour of the post text#434343Date Text ColourThe colour of the date text#6e6e6eEffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle96035024
{{text}}
{{date}}
{{location}}
]]> {
$(el).html(moment($(el).html()).format(properties.dateFormat));
});
}
$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_7staticsocial-mediaTemplate 7 - text, profile imagetwitter22007001Date FormatThe format to apply to all dates returned by the Widget.#DATE_FORMAT#Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Background ColourThe colour of the post backgroundrgba(255, 255, 255, 0.6)Post Text ColourThe colour of the post text#434343User Name Text ColourThe colour of the username text#434343Date Text ColourThe colour of the date text#434343EffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle60046016
{{user}}
{{screenName}}
{{text}}
{{date}}
{{location}}
]]> {
$(el).html(moment($(el).html()).format(properties.dateFormat));
});
}
$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_8staticsocial-mediaTemplate 8 - text, profile imagetwitter42507501Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Background ColourThe colour of the post backgroundrgba(255, 255, 255, 0.6)Inner Post Background ColourThe colour of the inner post background#fffInner Post Border ColourThe colour of the inner post border#eeePost Text ColourThe colour of the post text#434343User Name Text ColourThe colour of the username text#434343EffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle3402000
{{user}}
{{screenName}}
{{text}}
]]> .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_9staticsocial-mediaTemplate 9 - text, logotwitter6np4008001Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Text ColourThe colour of the post text#434343Post Background ColourThe colour of the post background#fffFooter Text ColourThe colour of the footer text#fffFooter Background ColourThe colour of the footer background#1da1f2Border ColourThe colour of the border#dddEffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle4001608
{{text}}
]]> .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_10staticsocial-mediaTemplate 10 - text, photo, logotwitter6pl11002502Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Text ColourThe colour of the post text#434343Post Background ColourThe colour of the post background#fffFooter Text ColourThe colour of the footer text#fffFooter Background ColourThe colour of the footer background#1da1f2EffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle4004508
{{text}}
]]> .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_11staticsocial-mediaTemplate 11 - text, logotwitter74008001Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Text ColourThe colour of the post text#434343Post Background ColourThe colour of the post background#fffHeader Text ColourThe colour of the header text#fffHeader Background ColourThe colour of the header background#1da1f2EffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle4001608
{{user}}
{{text}}
]]> .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>social_media_static_12staticsocial-mediaTemplate 12 - text, profile image, logotwitter810004001Date FormatThe format to apply to all dates returned by the Widget.#DATE_FORMAT#Items Per PageThe number of items to show per page (default = 5).5Items directionThe display order if there's more than one item.01FontSelect a custom font - leave empty to use the default font.Post Text ColourThe colour of the post text#4d4d4dDate Text ColourThe colour of the date text#4d4d4dPost Background ColourThe colour of the post background#fffHeader Text ColourThe colour of the header text#fffHeader Background ColourThe colour of the header background#1da1f2Profile Border ColourThe colour of the profile border#fffEffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle350650
{{user}}
{{text}}
{{date}}
]]> {
$(el).html(moment($(el).html()).format(properties.dateFormat));
});
}
$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
$(target).find('img').xiboImageRender(properties);
]]>metro_socialstaticsocial-mediaMetro Socialcolors11150650ColorsSelect colors to be randomly applied to the metro cellsDate FormatThe format to apply to all dates returned by the Widget.#DATE_FORMAT#FontSelect a custom font - leave empty to use the default font.Colours TemplateSelect the template colours you would like to apply values to the colours below.customColour 1colorTemplateId[0]Colour 2colorTemplateId[1]Colour 3colorTemplateId[2]Colour 4colorTemplateId[3]Colour 5colorTemplateId[4]Colour 6colorTemplateId[5]Colour 7colorTemplateId[6]Colour 8colorTemplateId[7]EffectPlease select the effect that will be used to transition between items.noTransitionSpeedThe transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).noneHorizontal AlignHow should this widget be aligned?centerVertical AlignHow should this widget be vertically aligned?middle
{{text}}
{{user}}
{{date}}
]]>
]]>= $(window).height()) {
properties.widgetDesignWidth = 1920;
properties.widgetDesignHeight = 1080;
} else {
properties.widgetDesignWidth = 1080;
properties.widgetDesignHeight = 1920;
orientation = 'portrait';
}
// Scale the layout
$(target).xiboLayoutScaler(properties);
// Get an array of items from the templates generated
var itemsHTML = $(target).find('.metro-cell-template').map(function(_k, el) {
if (properties.dateFormat) {
var date = $(el).find('.post-userData > small').html();
$(el).find('.post-userData > small').html(moment(date).format(properties.dateFormat));
}
return $(el).html();
});
// Get metro render container
var $metroRenderContainer = $(target).find('.metro-render-container');
// Mark container as landscape or portrait
$metroRenderContainer.removeClass('orientation-landscape orientation-portrait').
addClass('orientation-' + orientation);
// Get colours array
var colors = [];
for (var i = 1; i <= 8; i++) {
if (properties['color' + i] !== '') {
colors.push(properties['color' + i]);
}
}
// Render the items with metro render
$metroRenderContainer.xiboMetroRender(properties, itemsHTML, colors);
// Render the images
$metroRenderContainer.find('img').xiboImageRender(properties);
]]>
