1<#assign posicaoLegenda = (getterUtil.getString(themeDisplay.getThemeSetting(“posicao da legenda do carrossel”)) == “Dentro da imagem”)?then(‘inside-description’,’outside-description’) />
2<#assign tempoCarrossel = getterUtil.getString(themeDisplay.getThemeSetting(“velocidade de repoducao do carrossel”)) />
3<#assign id = randomNamespace />
4<#assign currentUrl=themeDisplay.getPortalURL() + “/-/” + .vars[‘reserved-article-url-title’].data/>
5
6<#macro renderCarouselItems itens thumbnails>
7 <#list itens as file>
8 <div class=”galery-image ${file.getAttribute(“alt”)?has_content?then(posicaoLegenda, ”)}”>
9 <div class=”multimidia-wrapper”>
10 <img alt=”${file.getAttribute(“alt”)???then(file.getAttribute(“alt”),””)}” src=”${file.getData()}${thumbnails?then(‘?imageThumbnail=1’,”)}” data-caption=”${file.getAttribute(“alt”)?has_content?then(file.getAttribute(“alt”), ”)}” />
11 </div>
12 <#if file.getAttribute(“alt”)?has_content && !thumbnails>
13 <p class=”d-none d-sm-block ${posicaoLegenda}”>${file.getAttribute(“alt”)}</p>
14 </#if>
15 </div>
16 </#list>
17</#macro>
18
19<div class=”noticia-wrapper”>
20 <p><em>${.vars[‘reserved-article-description’].data}</em></p>
21
22 <div class=”social-media-share mobile”>
23 <a class=”share-facebook” href=”https://www.facebook.com/sharer.php?u=${currentUrl}” target=”_blank” target=”_blank”></a>
24 <a class=”share-twitter” href=”http://twitter.com/intent/tweet?text=${.vars[‘reserved-article-title’].data}%0AVeja%20mais%20em:&url=${currentUrl}” target=”_blank”></a>
25 <a class=”share-linkedin” href=”https://www.linkedin.com/shareArticle?mini=true&url=${currentUrl}&title=${.vars[‘reserved-article-title’].data}” target=”_blank”></a>
26 <a class=”share-whatsapp” href=”https://web.whatsapp.com/send?text=${currentUrl}” target=”_blank”></a>
27 <a class=”share-googleplus” href=”https://plus.google.com/share?url=${currentUrl}” target=”_blank”></a>
28 </div>
29
30 <div class=”news-body”>
31
32 <#– Imagem Destaque –>
33
34 <#if imagem_destaque.getData()?? && imagem_destaque.getData() != “”>
35 <div class=”imagem-da-noticia”>
36 <img alt=”${imagem_destaque.getAttribute(‘alt’)}” src=”${imagem_destaque.getData()}” />
37 <p>${rodape_imagem.getData()}</p>
38 <div class=”social-media-share”>
39 <a class=”share-facebook” href=”https://www.facebook.com/sharer.php?u=${currentUrl}” target=”_blank” target=”_blank”></a>
40 <a class=”share-twitter” href=”http://twitter.com/intent/tweet?text=${.vars[‘reserved-article-title’].data}%0AVeja%20mais%20em:&url=${currentUrl}” target=”_blank”></a>
41 <a class=”share-linkedin” href=”https://www.linkedin.com/shareArticle?mini=true&url=${currentUrl}&title=${.vars[‘reserved-article-title’].data}” target=”_blank”></a>
42 <a class=”share-whatsapp” href=”https://web.whatsapp.com/send?text=${currentUrl}” target=”_blank”></a>
43 <a class=”share-googleplus” href=”https://plus.google.com/share?url=${currentUrl}” target=”_blank”></a>
44 </div>
45 </div>
46 </#if>
47
48 <div class=”materia”>${materia.getData()}</div>
49
50 <#– Carousel –>
51
52 <#if imagem_carrossel.getSiblings()?has_content && imagem_carrossel.getData()?has_content>
53 <h4>Mais imagens</h4>
54
55 <div class=”thumbnails-nav-wrapper”>
56 <div class= “thumbnails-nav” id=”slider-${id}”>
57 <@renderCarouselItems imagem_carrossel.getSiblings() true />
58 </div>
59 <#if (imagem_carrossel.getSiblings()?size > 5)>
60 <span class=”glyphicon glyphicon-pause” id=”slider-${id}-playpause” aria-hidden=”true”></span>
61 ${imagem_carrossel.getSiblings()?size}
62 </#if>
63 </div>
64
65 <div id=”lightbox-${id}” class=”lightbox-carousel”>
66 <i class=”glyphicon glyphicon-remove”></i>
67 <div class=”slider-gallery-wrapper”>
68 <div class= “slider-gallery” id=”slider-lightbox-${id}”>
69 <@renderCarouselItems imagem_carrossel.getSiblings() false />
70 </div>
71 </div>
72 <div class=”thumbnails-nav-wrapper”>
73 <div class=”thumbnails-nav” id=”thumbnails-${id}-controls”>
74 <@renderCarouselItems imagem_carrossel.getSiblings() true />
75 </div>
76 <#if (imagem_carrossel.getSiblings()?size > 5)>
77 <span class=”glyphicon glyphicon-pause” id=”slider-${id}-lightbox-playpause” aria-hidden=”true”></span>
78 </#if>
79 </div>
80 </div>
81 </#if>
82 </div>
83</div>
84
85<script>
86 $(‘#lightbox-${id} .slider-gallery-wrapper img’).hover(
87 function() {
88 const $text=$($($(this).parent()).next());
89 $text.hasClass(‘inside-description’) && $text.fadeTo( “slow” , 0);
90 }, function() {
91 const $text=$($($(this).parent()).next());
92 $text.hasClass(‘inside-description’) && $text.fadeTo( “slow” , 1);
93 }
94 );
95 $(document).ready(function() {
96 var ${id}autoplaying=${(imagem_carrossel.getSiblings()?size > 5)?c};
97 var ${id}showingLightbox=false;
98 const ${id}playPauseControllers=”#slider-${id}-playpause, #slider-${id}-lightbox-playpause”;
99 $(“#slider-${id}”).slick({
100 slidesToShow: ${(imagem_carrossel.getSiblings()?size > 5)?then(5,imagem_carrossel.getSiblings()?size)},
101 slidesToScroll: 1,
102 autoplay: ${id}autoplaying,
103 swipeToSlide: ${(imagem_carrossel.getSiblings()?size > 5)?c},
104 centerMode: ${(imagem_carrossel.getSiblings()?size > 5)?c},
105 autoplaySpeed: ${tempoCarrossel},
106 focusOnSelect: true,
107 prevArrow:
108 ‘<span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span>’,
109 nextArrow:
110 ‘<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>’,
111 centerPadding: “60px”,
112 responsive: [
113 {
114 breakpoint: 767.98,
115 settings: {
116 slidesToShow: 3,
117 adaptiveHeight: true
118 }
119 }
120 ]
121 });
122 $(“#slider-${id}”).slickLightbox({
123 src: ‘src’,
124 itemSelector: ‘.galery-image .multimidia-wrapper img’,
125 caption:’caption’
126 });
127 });
128</script>