1<style>
2video.imgCarrousel {
3 width: 100%;
4}
5.carousel-item{
6 height: 300px;
7}
8</style>
9
10
11
12#set($titulo = $reserved-article-title.data)
13#set($tituloBanner = $infoBanner.getChild('tituloBanner'))
14#set($subtituloBanner = $infoBanner.getChild('subtituloBanner'))
15#set($enlaceTextoBanner = $infoBanner.getChild('enlaceTextoBanner'))
16#set ($qout = '"')
17
18## Obtenemos los datos del enlace
19#set($lnkText = $enlaceTextoBanner.getData())
20#set($lnkExt = $enlaceTextoBanner.getChild('enlaceExtBanner').getData())
21#set($lnkInt = $enlaceTextoBanner.getChild('enlaceIntBanner').getFriendlyUrl())
22#set($lnkTarget = $enlaceTextoBanner.getChild('targetBanner').getData())
23#set($lnkExists = $validator.isNotNull($lnkInt) || $validator.isNotNull($lnkExt))
24#set($lnkURL = '')
25#set($openHtmlLink = '')
26#set($closeHtmlLink = '')
27#set($htmlButtonLink = '')
28
29
30#if($lnkExists)
31 #if($validator.isNotNull($enlaceTextoBanner.getChild('accesibilidadBanner').getData()))
32 #set($tituloAcc = $enlaceTextoBanner.getChild('accesibilidadBanner').getData())
33 #else
34 #set($tituloAcc = $enlaceTextoBanner.getData())
35 #end
36
37 ## Obtenemos la URL del enlace
38 #if($validator.isNotNull($lnkExt))
39 #set($lnkURL = $lnkExt)
40 #elseif ($validator.isNotNull($lnkInt))
41 #set($lnkURL = $lnkInt)
42 #end
43
44 ## Si no hay texto de enlace enlazamos las img/videos
45 #if($validator.isNull($lnkText))
46 #set($openHtmlLink = "<a href='$lnkURL' title='$tituloAcc' target='$lnkTarget' onClick=${qout}ga('send','event','Banner_Slider_$titulo','Link','$lnkURL')${qout}>")
47 #set($closeHtmlLink = "</a>")
48 #end
49#end
50
51## VERSION DESKTOP ##
52#set($formatoDesktop = $desktopItems.getChild('formatoDesktop'))
53#set($imagenVideoDesktop = $desktopItems.getChild('imagenVideoDesktop'))
54#set($avanzadoDesktop = $desktopItems.getChild('avanzadoDesktop'))
55
56#set($altDesktop = $imagenVideoDesktop.getChild('accesibilityDesktop').getData())
57#if($validator.isNull($altDesktop).getData())
58 #set($altDesktop = "")
59#end
60
61#set($formatoTablet = $tabletItems.getChild('formatoTablet'))
62#set($imagenVideoTablet = $tabletItems.getChild('imagenVideoTablet'))
63#set($imagenMobileTablet = $mobileItems.getChild('imagenVideoMobile'))
64#if($stringUtil.matches($formatoDesktop.getData(),"imagen"))
65 $openHtmlLink
66 $closeHtmlLink
67#elseif($stringUtil.matches($formatoDesktop.getData(),"video"))
68 #if($stringUtil.matches($formatoTablet.getData(),"imagen"))
69 $openHtmlLink
70 <video autoplay muted loop poster="$imagenVideoTablet.getData()" class="imgCarrousel d-none d-lg-block">
71 <source src="$imagenVideoDesktop.getData()" type="video/mp4">
72 </video>
73 $closeHtmlLink
74 #else
75 $openHtmlLink
76 <video autoplay muted loop class="imgCarrousel d-none d-lg-block">
77 <source src="$imagenVideoDesktop.getData()" type="video/mp4">
78 </video>
79 $closeHtmlLink
80 #end
81
82#elseif($stringUtil.matches($formatoDesktop.getData(),"avanzado"))
83 #set( $g = "a onClick=${qout}ga('send','event','Banner_Slider_${titulo}','Link','$lnkURL')${qout} href")
84 #set( $avanzado = $avanzadoDesktop.getData().replace("a href", ${g}) )
85 <div class="imgCarrousel d-none d-lg-block">
86 $avanzado
87 </div>
88#end
89
90
91## Establecemos la forma de pintar la cabecera
92#if($validator.isNotNull($tituloBanner.getData()) && !$validator.isEmpty($tituloBanner.getData()))
93 <ul class="carousel-caption">
94
95 <li class="titleSlide">
96 $tituloBanner.getData()
97 </li>
98
99 <li class="captionSlide">
100 $subtituloBanner.getData()
101 </li>
102
103 ## Enlace
104 #if($validator.isNotNull($lnkText))
105 <li class="btn"
106 onmouseover="javascript:this.style.textDecoration= 'underline'"
107 onmouseout="javascript:this.style.textDecoration= 'none'">
108
109 <a href="$lnkURL" title="$tituloAcc" target="$lnkTarget">$lnkText</a>
110 </li>
111 #end
112 </ul>
113
114#elseif($validator.isNotNull($lnkText))
115 <ul class="carousel-caption only-button">
116 <li class="btn"
117 onmouseover="javascript:this.style.textDecoration= 'underline'"
118 onmouseout="javascript:this.style.textDecoration= 'none'">
119
120 <a href="$lnkURL" title="$tituloAcc" target="$lnkTarget">$lnkText</a>
121 </li>
122 </ul>
123#end
124
125
126<script>
127
128var elements = document.getElementsByClassName("imagenBanner");
129var names = '';
130for(var i = 0; i < elements.length; i++) {
131 if(elements[i].id=="$reserved-article-title.data"){
132 if (window.screen.availWidth<400){
133 elements[i].src = "$imagenMobileTablet.getData()";
134 } else if(window.screen.availWidth>400 && window.screen.availWidth<480){
135 elements[i].src = "$imagenVideoTablet.getData()";
136 } else{
137 elements[i].src = "$imagenVideoDesktop.getData()";
138 }}
139}
140
141
142</script>
