Destaque de Conteúdo
Se ha producido un error al procesar la plantilla.
The following has evaluated to null or missing: ==> getSingleNode( "starter", rootElement ) [in template "34847455847212#47755#560359" at line 187, column 36] ---- 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: #assign starter = getSingleNode("star... [in template "34847455847212#47755#560359" at line 187, column 13] ----
1<#--
2Name: Coleção de destaque
3File Path: assets/klabin-online/featured-collection/template.ftl
4-->
5
6
7<#assign themes = [
8 {"name": "gray__cream", "bg": "#F0D1B6", "color":"#3E3E3E", "path": "#009039", "circle":"#fff"},
9 {"name": "gray__cream2", "bg": "#D7C795", "color":"#3E3E3E", "path": "#009039", "circle":"#fff"},
10 {"name": "gray__orange", "bg": "#F6D698", "color":"#3E3E3E", "path": "#3E3E3E", "circle":"#E2E3BE"},
11 {"name": "white__orange", "bg": "#C86C2C", "color":"#fff", "path": "#009039", "circle":"#E2E3BE"},
12 {"name": "white__green2", "bg": "#8B9F37", "color":"#fff", "path": "#fff", "circle":"#009039"},
13 {"name": "green__white", "bg": "#fff", "color":"#009039", "path": "#009039", "circle":"#E2E3BE"},
14 {"name": "white__green", "bg": "#3D4B14", "color":"#fff", "path": "#fff", "circle":"#627331"},
15 {"name": "green__cream", "bg": "#E3DBCA", "color":"#009039", "path": "#009039", "circle":"#FFFFFF"}
16] />
17
18<style>
19 <#list themes as theme>
20 .collection__theme--${theme.name} .card__text{
21 background-color:${theme.bg};
22 }
23 .collection__theme--${theme.name} .card__text h1{
24 color:${theme.color};
25 }
26 .collection__theme--${theme.name} .card__text h3{
27 color:${theme.color};
28 }
29 .collection__theme--${theme.name} .card__text .card__content__path path{
30 fill:${theme.path};
31 }
32 .collection__theme--${theme.name} .card__text .card__content__circle{
33 fill:${theme.circle};
34 }
35 .collection__theme--${theme.name} .card__float__img{
36 display:block !important;
37 }
38 </#list>
39
40 .card__content__float__img{
41 margin-bottom: -77px;
42 margin-left: -69px;
43 }
44 .card__text__float__img{
45 position: absolute;
46 right: 0;
47 bottom: 0;
48 }
49 .card__content{
50 max-width: 370px;
51 margin: auto;
52 position: absolute;
53 z-index: 2;
54 left: 50%;
55 top: 50%;
56 transform: translate(-50%, -50%);
57 }
58 .card__content .card__content__path{
59 z-index: 1;
60 position: absolute;
61 right: 9px;
62 top: 9px;
63 }
64 .card__content .card__content__circle{
65 position: absolute;
66 right: 0;
67 }
68 a.card__content-link{
69 text-decoration: none;
70 }
71 .card__text{
72 width:100%;
73 min-height:320px;
74 }
75 .card__text h1{
76 font-style: normal;
77 font-weight: bold;
78 font-size: 30px;
79 }
80 .card__text h3{
81 font-style: normal;
82 font-weight: normal;
83 font-size: 16px;
84 }
85 .card__image{
86 width:100%;
87 height:80%
88 }
89
90
91 .water-mark, .water-mark--bottom{
92 top: 7%;
93 left: -12%;
94 width: 92%;
95 z-index: 1;
96 max-width: 674px;
97 opacity: .3;
98 }
99 .water-mark--bottom{
100 left: initial;
101 right: -12% ;
102 opacity: .7;
103 }
104
105 @media (min-width: 1371px) {
106 .water-mark, .water-mark--bottom{
107 top: 16%;
108 left: 20%;
109 width: 100%;
110 }
111 .water-mark--bottom{
112 top: 25%;
113 }
114
115 .card__text{
116 width:50%;
117 min-height:300px;
118 }
119
120 .card__image{
121 width:50%;
122 }
123 .water-mark, .water-mark--bottom{
124 top: 4%;
125 left: 19%;
126 width: 41%;
127 }
128 .water-mark--bottom{
129 right: initial;
130 }
131 }
132
133 @media (max-width: 1800px) {
134 .card__text h3{
135 font-style: normal;
136 font-weight: normal;
137 font-size: 14px;
138 }
139 }
140
141 @media (max-width: 1370px) {
142 .card__content {
143 position: relative;
144 left: unset!important;
145 top: unset!important;
146 transform: unset!important;
147 padding: 10px;
148 }
149 }
150</style>
151
152<#assign dlAppService = serviceLocator.findService("com.liferay.document.library.kernel.service.DLAppService")>
153
154<#function getRootElement curEntry>
155 <#assign assetRenderer = curEntry.getAssetRenderer() />
156 <#assign article = assetRenderer.getArticle() />
157 <#assign document = saxReaderUtil.read(article.getContent()) />
158 <#return document.getRootElement() />
159</#function>
160
161
162<#function getSingleNode name root>
163 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']/dynamic-content[@language-id='${locale}']") />
164 <#if !xPathSelector??>
165 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']") />
166 </#if>
167 <#return xPathSelector.selectSingleNode( root ) />
168</#function>
169
170<#function getNodes name root>
171 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']") />
172 <#return xPathSelector.selectNodes( root ) />
173</#function>
174
175<#function isExternal url>
176 <#return !url?contains(themeDisplay.getPortalURL()) && ( url?starts_with("http://") || url?starts_with("https://")) || url?contains(".pdf") />
177</#function>
178
179<#assign count = 0 />
180
181<#if entries?has_content>
182 <#list entries as entry>
183 <main class="position-relative overflow-hidden">
184 <svg class="position-absolute water-mark<#if count % 2 != 0>--bottom</#if>" style="<#if count % 2 != 0>transform: rotate(180deg);</#if>" fill="none" height="601" viewbox="0 0 674 601"> <path d="M673.059 520.17C673.059 520.17 607.281 102.893 417.062 23.2105C226.843 -56.4716 55.9711 91.3599 15.3674 206.217C-25.2362 321.074 19.6564 515.496 176.946 581.11C334.235 646.724 673.059 520.17 673.059 520.17Z" stroke="<#if count % 2 != 0>#fff<#else>#D88C52</#if>"></path> </svg>
185 <#assign count = count + 1 />
186 <#assign rootElement = getRootElement(entry) />
187 <#assign starter = getSingleNode( "starter", rootElement ).getStringValue()?trim />
188 <#assign nodes = getNodes("theme__container", rootElement) />
189
190 <#list nodes as nodeItem>
191 <#assign imageFile = nodeItem.selectSingleNode("dynamic-content[@language-id='${locale}']") />
192 <#if !imageFile??>
193 <#assign imageFile = nodeItem.selectSingleNode("dynamic-content") />
194 </#if>
195
196 <#attempt>
197 <#assign fileJson = jsonFactoryUtil.createJSONObject(imageFile.getStringValue()?trim) />
198 <#assign fileEntryId = getterUtil.getInteger(fileJson.get('fileEntryId')) />
199 <#assign fileEntry = dlAppService.getFileEntry(fileEntryId) />
200 <#assign adaptive = "/o/adaptive-media/image/${fileEntryId}/diretoria-423x422/${fileJson.get('title')}">
201 <#assign urlImage = themeDisplay.getPortalURL() + "/documents/" + fileEntry.groupId + "/" + fileEntry.uuid + "?t=" + .now?string["HHmmssSSS"]?string />
202 <#recover>
203 <#assign adaptive = "https://via.placeholder.com/500x500?text=404" />
204 <#assign urlImage = "https://via.placeholder.com/500x500?text=404" />
205 </#recover>
206
207 <#assign selector = getSingleNode( "theme__selector", nodeItem ).getStringValue()?trim />
208 <#assign floatImage = getSingleNode( "theme__floatImage", nodeItem ).getStringValue()?trim />
209 <#assign title = getSingleNode( "theme__title", nodeItem ).getStringValue()?trim />
210 <#assign subtitle = getSingleNode( "theme__subtitle", nodeItem ).getStringValue()?trim />
211 <#assign link = getSingleNode( "theme__link", nodeItem ).getStringValue()?trim />
212
213 <#if getSingleNode( "includeGTagEvent", nodeItem )??>
214 <#assign addGTagEvent = getSingleNode( "includeGTagEvent", nodeItem ) />
215 <#if addGTagEvent?has_content>
216 <#assign addGTagEventValue = addGTagEvent.getData()>
217 <#else>
218 <#assign addGTagEventValue = false>
219 </#if>
220 <#if addGTagEvent.getData() == "">
221 <#assign addGTagEventValue = false>
222 </#if>
223 <#else>
224 <#assign addGTagEventValue = false>
225 </#if>
226
227 <section class="collection__theme d-flex flex-wrap collection__theme--${selector}">
228
229 <div class="card__text d-flex align-items-center justify-content-center position-relative" style="order: <#if starter == 'text'>1<#else>2</#if>">
230
231 <#if floatImage == 'topRight'>
232 <svg width="45" height="42" viewBox="0 0 45 42" fill="none" class="card__float__img position-absolute d-none" style="opacity: .5;top:20px;right:20px;"> <path fill="#EEBF62" d="M0.134116 37.4527C0.134116 37.4527 3.15121 8.95447 15.7825 2.89927C28.4139 -3.15592 40.521 6.27006 43.6743 13.9117C46.8277 21.5532 44.4553 34.8806 34.0097 39.869C23.5641 44.8574 0.134116 37.4527 0.134116 37.4527Z"/> </svg>
233 </#if>
234
235 <#if link?has_content>
236 <a class="card__content-link" <#if isExternal(link)>target='_blank'</#if> href="${link}">
237 </#if>
238
239 <div class="card__content">
240 <h1>
241 <#if floatImage == 'center'>
242 <svg class="card__content__float__img card__float__img d-none" width="157" height="139" viewBox="0 0 157 139" fill="none"> <path d="M156.5 122.506C156.5 122.506 63.8053 156.19 26.0115 126.263C-11.7823 96.336 -0.903824 44.6626 17.9708 23.3754C36.8455 2.08828 81.646 -10.691 112.841 14.0863C144.036 38.8636 156.5 122.506 156.5 122.506Z" fill="#E2E3BE"/> </svg>
243 </#if>
244 ${title}
245 </h1>
246 <h3>${subtitle}</h3>
247 <#if link?has_content>
248 <a <#if isExternal(link)>target='_blank'</#if> <#if addGTagEventValue?string=='true'>onclick="gtag('event', 'conversion',{'send_to': 'AW-433294911/RahdCPTVrqgDEL-czs4B'});"</#if> href="${link}" class="float-right position-relative">
249 <svg width="49" height="13" viewBox="0 0 49 13" fill="none" class="card__content__path"><path d="M48.4091 10.1214C48.4708 7.95954 46.8422 7.86249 45.6765 7.28931C42.4136 5.68495 39.1378 4.10632 35.8958 2.461C35.1986 2.10373 34.5751 1.61798 34.0581 1.02929C33.4364 0.313808 32.8037 -0.0485495 32.0947 0.693315C31.3517 1.47088 31.8963 2.18106 32.5569 2.68289C34.0287 3.80079 35.5456 4.85907 37.2681 6.10342C34.7062 6.06541 32.2505 5.95759 29.7979 6.00634C23.111 6.13927 16.4261 6.38613 9.73887 6.48438C7.47764 6.47149 5.21874 6.33707 2.97195 6.08169C1.93715 5.98512 0.92612 5.74894 0.597203 7.08052C0.35127 8.07598 1.14575 8.73824 2.79767 8.7871C7.03595 8.91245 11.2771 9.05065 15.5159 9.02211C20.5428 8.98825 25.5687 8.79368 30.5945 8.65032C32.0597 8.55076 33.5303 8.56296 34.9936 8.68681C33.9838 9.70948 32.6328 9.72579 31.402 10.0514C30.9383 10.174 30.3575 10.1547 30.0384 10.4362C29.8865 10.6085 29.7716 10.8103 29.7011 11.029C29.6306 11.2477 29.6059 11.4786 29.6285 11.7072C29.7008 11.8784 29.815 12.0286 29.9607 12.144C30.1063 12.2594 30.2786 12.3363 30.4617 12.3676C31.0476 12.3653 31.6301 12.2779 32.1909 12.1081C36.8009 11.0007 41.3939 9.83289 46.2191 10.5787C46.9075 10.6851 47.674 10.287 48.4091 10.1214Z"/> </svg>
250 <svg width="35" height="35" viewBox="0 0 35 35" fill="none"><circle class="card__content__circle" cx="17.5" cy="17.5" r="17.5"/></svg>
251 </a>
252 </#if>
253 </div>
254 <#-- <#if floatImage == 'bottomRight'><svg class="card__float__img card__text__float__img d-none" width="204" height="152" viewBox="0 0 204 152" fill="none"> <path opacity="0.2" d="M0.0547725 9.87584C0.0547725 9.87584 169.733 -23.7287 227.242 38.2497C284.751 100.228 252.08 186.888 213.672 218.74C175.265 250.592 94.1932 260.765 46.7453 209.477C-0.70263 158.19 0.0547725 9.87584 0.0547725 9.87584Z" fill="#737E57"/> </svg></#if> -->
255 </div>
256 <#if link?has_content>
257 </a>
258 </#if>
259
260 <picture class="card__image" style="order: <#if starter == 'text'>2<#else>1</#if>">
261 <source media="(min-width:800px)" srcset="${urlImage}" />
262 <img src="${adaptive}" style="width:100%"/>
263 </picture>
264 </section>
265
266 <#if starter == 'text'>
267 <#assign starter = 'image' />
268 <#else>
269 <#assign starter = 'text' />
270 </#if>
271 </#list>
272 </main>
273 </#list>
274</#if>
275
276<script>
277 function handlePosition(currentWidth)
278 {
279 if(currentWidth.matches)
280 {
281 var reverse = false
282 document.querySelectorAll(".collection__theme").forEach(function(_){
283 if(reverse)
284 {
285 _.style.flexDirection = "column-reverse"
286 }
287 reverse = !reverse
288 })
289 }
290 else
291 {
292 document.querySelectorAll(".collection__theme").forEach(function(_){
293 _.style.flexDirection = "initial"
294 })
295 }
296 }
297 function Mounted()
298 {
299 window.matchMedia('(max-width: 992px)').addListener(handlePosition)
300 handlePosition({matches: window.innerWidth < 992})
301 }
302 document.addEventListener("DOMContentLoaded", Mounted)
303 Liferay.on('endNavigate', Mounted)
304 Mounted()
305</script>