Alert Presentation Format

  • 2
  • Problem
  • Updated 3 years ago
  • Solved
What is the wildcard formatting used by an Alert Presentation.

I seem to recall that it was the CAP labels inside brackets/parenthesis/curly brackets, but I've deleted mine at some point and the new template store does not have it...

I didn't find it in the user documentation either...
 
Photo of Biologyben

Biologyben

  • 3,558 Points 3k badge 2x thumb

Posted 3 years ago

  • 2
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Hey there Ben!

You can see an example Alerts presentation if you go on over to the Classic Editor, click "Templates Shared with You" and select Alerts Presentation.

Here's the HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css" media="screen">
body {
height:100%;

}

#headline
{

color:#000000;
font-family: Impact, Charcoal, sans-serif;
font-weight:800;

}
#description
{
font-family: Impact, Charcoal, sans-serif;
font-weight:200;
color:#000000;

}
#instruction
{

color:#000000;
}

.fill_with_text {
width:100%;
font-size: 1px;
text-align: center;
margin: auto;
overflow: hidden;
display:inline-block;
vertical-align:middle;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){

(function($){

var unit_of_measurement = 'px';
var container_count = 3;
var total_height = $(document).height();

function find_max_font_size(container){

var text = container.text();

if (text == "" || typeof text === "undefined" )
return 1;

var available_height = container.height();
var available_width = container.width();

container.empty();

var sandbox = $('<span/>').text(text).appendTo(container)

function try_font_size(font_size){

sandbox.css({ fontSize: font_size + unit_of_measurement });
}

function find_max_font_size_starting_with(font_size){

font_size = font_size || 1;

try_font_size(font_size);

var current_height = container[0].scrollHeight;
var current_width = container[0].scrollWidth;

var height_proportion = current_height / available_height;
var width_proportion = current_width / available_width;

return (height_proportion > 1 || width_proportion > 1) ? font_size - 1 : find_max_font_size_starting_with(font_size + 1);
}

var font_size = find_max_font_size_starting_with(parseInt(container.css('fontSize')));
container.empty().text(text);
return font_size;
}

$.fn.fill_with_text = function(){

return $(this).each(function(){

var container = $(this);
container.css({ fontSize: find_max_font_size(container) + unit_of_measurement });
})
}

$.fn.remove_empty = function(){

return $(this).each(function(){

var container = $(this);

if($.trim(container.text())==='') {
container.remove();
container_count--;
}
})
}

$.fn.resize_rest = function(){

return $(this).each(function(){

$(this).height(total_height / container_count);
})
}
})(jQuery)

$(function(){

$(".fill_with_text").remove_empty();

$(".fill_with_text").resize_rest();

$(".fill_with_text").fill_with_text();

})
});//]]>

</script>
</head>

<body style="width:1920px;height:1080px; overflow: hidden;background:url('https://s3.amazonaws.com/riseclientcontent/mat/alert-bg2.svg');">
<div id="headline" class="fill_with_text" style="margin-left:5%; margin-right:5%; margin-top:2%;width:90%">%HEADLINE%</div>
<div id="description" class="fill_with_text" style="margin-left:5%; margin-right:5%; margin-top:-3%; width:90%">%DESCRIPTION%</div>
<div id="instruction" class="fill_with_text" style="margin-left:5%; margin-right:5%; width:90%">%INSTRUCTION%</div>
</body>
<script language='javascript'>
<!--
var presentationData = {
"presentationData": {
"id": "",
"hidePointer": true,
"donePlaceholder": null,
"placeholders": []
}
};
//-->
</script>
</html>
(Edited)