Fehler bei der Verarbeitung der Vorlage.
The following has evaluated to null or missing:
==> storyActual.botonSecundario [in template "10154#10192#95596099" at line 50, column 38]
----
Tip: It's the step after the last dot that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #if getterUtil.getBoolean(storyActual... [in template "10154#10192#95596099" at line 50, column 11]
----
1<div class="pnt-storytelling-v2 header alter1-header s1 section text-contrast">
2 <div class="shapes-container">
3 <#list 1..16 as i>
4 <div
5 class="shape shape-animated aos-init aos-animate"
6 data-aos="fade-down"
7 data-aos-duration="1000"
8 data-aos-delay="100"
9 ></div>
10 </#list>
11 </div>
12 <div id="pnt-carrusel-storytelling" class="carousel slide" data-ride="carousel" data-interval="${duracionSlide.getData()?number*1000}" ${analytics.atributosBanner.getData()}>
13 <#if story.getSiblings()?has_content>
14 <#list story.getSiblings() as storyActual>
15 <#assign posicion=(storyActual.contenido.posicion.getData()!="")?then(storyActual.contenido.posicion.getData(),"left")>
16 <#if storyActual.sectorImagenSecundaria.imagenSecundaria.getData()?? && storyActual.sectorImagenSecundaria.imagenSecundaria.getData() !="">
17 <img alt='${storyActual.sectorImagenSecundaria.imagenSecundaria.getAttribute("alt")}'
18 id="pnt-img-story${storyActual?index}"
19 class="pnt-img-story d-none d-md-block"
20 style="opacity: 0; ${(posicion=='left')?then('left: 50%','right: 50%')}"
21 data-fileentryid='${storyActual.sectorImagenSecundaria.imagenSecundaria.getAttribute("fileEntryId")}'
22 src="${storyActual.sectorImagenSecundaria.imagenSecundaria.getData()}" />
23 </#if>
24 </#list>
25 </#if>
26 <div class="pnt-scroll-animacion" onclick="scrollearAbajo()">
27 <div class="pnt-scroll-arrow pnt-scroll-arrow-first"></div>
28 <div class="pnt-scroll-arrow pnt-scroll-arrow-second"></div>
29 </div>
30 <ol class="carousel-indicators">
31 <#if story.getSiblings()?has_content>
32 <#list story.getSiblings() as storyActual>
33 <li data-target="#pnt-carrusel-storytelling" data-slide-to="${storyActual?index}"
34 ${(storyActual?index==0)?then('class="active"','')}>
35 </li>
36 </#list>
37 </#if>
38 </ol>
39 <div class="carousel-inner">
40
41 <!-- SLIDE -->
42
43 <#if story.getSiblings()?has_content>
44 <#list story.getSiblings() as storyActual>
45 <#assign target="">
46 <#assign targetSecundario="">
47 <#if getterUtil.getBoolean(storyActual.boton.esNuevaPestania.getData())>
48 <#assign target="target=' _blank'">
49 </#if>
50 <#if getterUtil.getBoolean(storyActual.botonSecundario.esNuevaPestaniaSec.getData())>
51 <#assign targetSecundario="target=' _blank'">
52 </#if>
53 <#assign posicion=(storyActual.contenido.posicion.getData()!="")?then(storyActual.contenido.posicion.getData(),"left")>
54 <#if storyActual.sectorImagenSecundaria.imagenSecundaria.getData()?? && storyActual.sectorImagenSecundaria.imagenSecundaria.getData() !="" && posicion !="center">
55 <#assign centrado = "justify-content-around">
56 <#else>
57 <#assign centrado = "">
58 </#if>
59 <div class="carousel-item ${(storyActual?index==0)?then('active','')}" ${storyActual.atributosAnalytics.getData()}>
60 <div class="container px-4 pt-0 pb-3">
61 <#if posicion=="right">
62 <div class="pnt-row-storytelling row align-items-center ${centrado} flex-row-reverse">
63 <#elseif posicion=="center">
64 <div class="pnt-row-storytelling row justify-content-center align-items-center">
65 <#else>
66 <div class="pnt-row-storytelling row d-flex ${centrado} align-items-center">
67 </#if>
68 <div class="col-12 col-md-8 col-xl-6 text-white text-center text-md-${posicion}">
69 <#if storyActual?index==0 >
70 <h1 class="text-contrast pnt-titulo-story display-md-3">
71 <span class="bold text-white">
72 ${storyActual.contenido.titulo.getData()}
73 </span>
74 </h1>
75 <#else>
76 <p class="h1 text-contrast pnt-titulo-story display-md-3">
77 <span class="bold text-white">
78 ${storyActual.contenido.titulo.getData()}
79 </span>
80 </p>
81 </#if>
82 <p class="lead bold">${storyActual.contenido.subtitulo.getData()}</p>
83 <p class="lead bold">${storyActual.contenido.descripcion.getData()}</p>
84 <#if (storyActual.boton.texto.getData() !="" && storyActual.boton.link.getData() !="" )>
85 <div class="row-btn d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-${(posicion=="left")?then('start',(posicion=="center" )?then('center','end'))}">
86 <a class="btn btn-lg pa-4 bg-white text-primary text-center" href="${storyActual.boton.link.getData()}" ${target}
87 onclick="${storyActual.boton.datalayer.getData()}">${storyActual.boton.texto.getData()}
88 </a>
89 <#if (storyActual.botonSecundario.textoBtnSecundario.getData() !="" && storyActual.botonSecundario.linkBtnSecundario.getData() !="" )>
90 <a class="btn btn-lg mt-3 mt-md-0 ml-md-2 pa-4 bg-none text-white border-white text-center" href="${storyActual.botonSecundario.linkBtnSecundario.getData()}" ${targetSecundario}
91 onclick="${storyActual.botonSecundario.datalayerBtnSecundario.getData()}">${storyActual.botonSecundario.textoBtnSecundario.getData()}
92 </a>
93 </#if>
94 </div>
95 </#if>
96 </div>
97 <#if storyActual.sectorImagenSecundaria.imagenSecundaria.getData()?? && storyActual.sectorImagenSecundaria.imagenSecundaria.getData() !="" && posicion !="center">
98 <div class="col-12 col-md-4 col-xl-6 text-center d-none d-md-block pnt-img-sec" data-aos="fade-left" data-aos-duration="1000">
99
100 </div>
101 </#if>
102 </div>
103 </div>
104 </div>
105 </#list>
106 </#if>
107
108 <!-- FIN DEL SLIDE -->
109
110 </div>
111 <a class="carousel-control-prev" href="#pnt-carrusel-storytelling" role="button" data-slide="prev">
112 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
113 <span class="sr-only">Anterior</span>
114 </a>
115 <a class="carousel-control-next" href="#pnt-carrusel-storytelling" role="button" data-slide="next">
116 <span class="carousel-control-next-icon" aria-hidden="true"></span>
117 <span class="sr-only">Siguiente</span>
118 </a>
119 </div>
120</div>
121<script>
122$(function() {
123
124 if (window.innerWidth < 768){
125 let altoVh = window.innerHeight * 0.01;
126 $("#pnt-carrusel-storytelling").height("calc(96.5 * "+altoVh+"px - 4.5625rem)");
127 }
128
129 $("#pnt-carrusel-storytelling").carousel();
130 let posInit = [[]];
131 for (let i = 1; i < 17; i++) {
132 posInit.push([
133 parseInt(
134 $(".pnt-storytelling-v2 .shape:nth-child(" + i + ")").css("top")
135 ),
136 parseInt(
137 $(".pnt-storytelling-v2 .shape:nth-child(" + i + ")").css("left")
138 ),
139 ]);
140 }
141 <#if story.getSiblings()?has_content>
142 <#list story.getSiblings() as storyActual>
143 $("#pnt-img-story${storyActual?index}").css("opacity", 0);
144 </#list>
145 </#if>
146 $("#pnt-img-story0").delay("fast").animate({opacity: 1}, "fast");
147 $("#pnt-carrusel-storytelling").on("slide.bs.carousel", function (e) {
148
149 <#if story.getSiblings()?has_content>
150 <#list story.getSiblings() as storyActual>
151 $(".pnt-storytelling-v2").removeClass("s${storyActual?index+1}");
152 $("#pnt-img-story${storyActual?index}").animate({opacity: 0}, "fast");
153 </#list>
154 $(".pnt-storytelling-v2").addClass("s" + (e.to + 1));
155 $("#pnt-img-story"+e.to).delay("fast").animate({opacity: 1}, "fast");
156 </#if>
157
158 for (let i = 1; i < 17; i++) {
159 $(".pnt-storytelling-v2 .shape:nth-child(" + i + ")").css(
160 "top",
161 posInit[i][0] +
162 (e.to + 1) * 10 +
163 Math.floor(Math.random() * (100 - 0 + 1) + 0)
164 );
165 $(".pnt-storytelling-v2 .shape:nth-child(" + i + ")").css(
166 "left",
167 posInit[i][1] -
168 (e.to + 1) * 10 +
169 Math.floor(Math.random() * (100 - 0 + 1) + 0)
170 );
171 }
172 });
173});
174
175function scrollearAbajo() {
176 let offset = $('.pnt-primer-componente-scroll').offset();
177 let y_pos = offset.top;
178 $('html, body').animate({
179 scrollTop: y_pos - 90
180 }, 500);
181}
182
183</script>
184<style>
185 .pnt-storytelling-v2 #pnt-carrusel-storytelling .carousel-indicators li{
186 width: 8px;
187 height: 8px;
188 margin-right: 0px;
189 margin-left: 0px;
190 padding: 12px;
191 background-clip: content-box;
192 border-radius: 50%;
193 }
194 .pnt-storytelling-v2 .pnt-img-story{
195 position: absolute;
196 width: 600px;
197 bottom: -55px;
198 }
199 .pnt-storytelling-v2 #pnt-carrusel-storytelling .carousel-indicators li.active{
200 width: 12px;
201 height: 12px;
202 }
203 .pnt-storytelling-v2 .shapes-container{
204 z-index: 0;
205 }
206
207 .pnt-storytelling-v2 .pnt-titulo-story{
208 font-size: 2.5rem;
209 }
210
211 .pnt-storytelling-v2 {
212 padding-bottom: 200px;
213
214 }
215 .pnt-storytelling-v2 .pnt-img-sec{
216 max-width: 500px;
217 max-height: 500px;
218 text-align: center;
219 }
220
221 .pnt-storytelling-v2 .alter1-header {
222 background-color: #E5005c;
223 }
224
225 .pnt-storytelling-v2 .pnt-row-storytelling {
226 height: 33rem;
227 }
228
229 // Animation
230
231@-webkit-keyframes pnt-arrow-movement {
232 0% {
233 opacity: 0;
234 top: 45%;
235 }
236 70% {
237 opacity: 1;
238 }
239 100% {
240 opacity: 0;
241 }
242}
243
244@keyframes pnt-arrow-movement {
245 0% {
246 opacity: 0;
247 top: 45%;
248 }
249 70% {
250 opacity: 1;
251 }
252 100% {
253 opacity: 0;
254 }
255}
256
257 @media only screen and (max-width: 768px) {
258 .pnt-storytelling-v2 .carousel-inner {
259 padding-top: 4vh;
260 }
261
262 .pnt-storytelling-v2 .carousel-control-prev, .pnt-storytelling-v2 .carousel-control-next {
263 display: none;
264 }
265
266 .pnt-storytelling-v2 #pnt-carrusel-storytelling .carousel-indicators {
267 bottom: 3rem;
268 }
269 .pnt-storytelling-v2 #pnt-carrusel-storytelling {
270 height: 96.5vh;
271 height: calc(96.5vh - 4.5625rem);
272 }
273 .pnt-storytelling-v2 .pnt-row-storytelling {
274 height: 25rem;
275 }
276 .pnt-storytelling-v2 .lead {
277 font-size: 1rem;
278 }
279
280 .pnt-storytelling-v2 #pnt-carrusel-storytelling .pnt-scroll-animacion {
281 position: absolute;
282 bottom: 1.5rem;
283 width: 100vw;
284 height: 3vh;
285 }
286
287 .pnt-storytelling-v2 #pnt-carrusel-storytelling .pnt-scroll-arrow {
288 opacity: 0;
289 position: absolute;
290 left: calc(50% - 14px);
291 transform-origin: 50% 50%;
292 transform: translate3d(-50%, -50%, 0);
293 }
294
295 .pnt-storytelling-v2 #pnt-carrusel-storytelling .pnt-scroll-arrow-first {
296 animation: pnt-arrow-movement 2s ease-in-out infinite;
297 -webkit-animation: pnt-arrow-movement 2s ease-in-out infinite;
298 top: 23.33px
299 }
300 .pnt-storytelling-v2 #pnt-carrusel-storytelling .pnt-scroll-arrow-second {
301 animation: pnt-arrow-movement 2s 1s ease-in-out infinite;
302 -webkit-animation: pnt-arrow-movement 2s 1s ease-in-out infinite;
303 top: 23.33px
304 }
305
306 .pnt-storytelling-v2 #pnt-carrusel-storytelling .pnt-scroll-arrow:before,
307 .pnt-storytelling-v2 #pnt-carrusel-storytelling .pnt-scroll-arrow:after {
308 background: #fff;
309 content: '';
310 display: block;
311 height: 3px;
312 position: absolute;
313 top: 0;
314 left: 0;
315 width: 30px;
316 }
317
318 .pnt-storytelling-v2 #pnt-carrusel-storytelling .pnt-scroll-arrow:before {
319 transform: rotate(45deg) translateX(-23%);
320 transform-origin: top left;
321 }
322
323 .pnt-storytelling-v2 #pnt-carrusel-storytelling .pnt-scroll-arrow:after {
324 transform: rotate(-45deg) translateX(23%);
325 transform-origin: top right;
326 }
327 }
328
329 .pnt-storytelling-v2 .carousel-control-prev,.pnt-storytelling-v2 .carousel-control-next{
330 width: 5%;
331 }
332 .pnt-storytelling-v2 .carousel .carousel-indicators{
333 bottom: -0.5rem;
334 align-items: center;
335 }
336 /* ANIMACION DE SHAPES */
337 .pnt-storytelling-v2 .shape {
338 transition: left 1s, top 1s;
339 }
340
341 @property --pntStorytellingColor1 {
342 syntax: '<color>';
343 initial-value: #e5005c;
344 inherits: false;
345 }
346
347 @property --pntStorytellingColor2 {
348 syntax: '<color>';
349 initial-value: #e5005c;
350 inherits: false;
351 }
352
353 .pnt-storytelling-v2.alter1-header:before {
354 background: linear-gradient(90deg,var(--pntStorytellingColor1), var(--pntStorytellingColor2));
355 transition: --pntStorytellingColor1 1s, --pntStorytellingColor2 0.6s;
356 }
357
358 <#if story.getSiblings()?has_content>
359 <#list story.getSiblings() as storyActual>
360 <#assign color1=storyActual.colorDeFondo.getData()>
361 <#assign color2=storyActual.colorDeFondo.getData()>
362 <#if storyActual.colorDeFondo.getData()?contains("-")>
363 <#assign color1=storyActual.colorDeFondo.getData()?split("-")[0]>
364 <#assign color2=storyActual.colorDeFondo.getData()?split("-")[1]>
365 </#if>
366 .pnt-storytelling-v2.alter1-header.s${storyActual?index+1}:before {
367 --pntStorytellingColor1: ${color1};
368 --pntStorytellingColor2: ${color2};
369 }
370 </#list>
371 </#if>
372</style>