Be Opera - OPEN035
Er trad een fout op tijdens de verwerking van de sjabloon.
The following has evaluated to null or missing:
==> ExtraLinknaam [in template "20097#20123#1034641" at line 276, column 42]
----
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 ExtraLinknaam.getSiblings()?has_c... [in template "20097#20123#1034641" at line 276, column 37]
----
1<#setting locale="nl_NL">
2<#setting date_format= "yyyy-MM-dd"/>
3
4<#assign assetEntryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetEntryLocalService") />
5
6<#assign JournalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")>
7
8<#assign article = JournalArticleLocalService.getArticle(getterUtil.getLong(scopeGroupId), .vars['reserved-article-id'].data)>
9
10<#assign asset = assetEntryLocalService.getEntry('com.liferay.journal.model.JournalArticle', article.resourcePrimKey) >
11
12<#assign currentURL = "${themeDisplay.getURLPortal()}${themeDisplay.getURLCurrent()}" />
13
14<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
15<script src="https://js.arcgis.com/4.18/"></script>
16
17
18<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/brands.min.css" integrity="sha512-W/zrbCncQnky/EzL+/AYwTtosvrM+YG/V6piQLSe2HuKS6cmbw89kjYkp3tWFn1dkWV7L1ruvJyKbLz73Vlgfg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
19<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/fontawesome.min.css" integrity="sha512-siarrzI1u3pCqFG2LEzi87McrBmq6Tp7juVsdmGY1Dr8Saw+ZBAzDzrGwX3vgxX1NkioYNCFOVC0GpDPss10zQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
20
21<style>
22.header-back-to {
23 display: none;
24}
25
26#circkaart{
27 height: 100%;
28 width: 100%;
29 object-fit: cover;
30 background: white;
31}
32
33.articleImage{
34 width: 100%;
35 max-height: 350px;
36 object-fit: contain;
37 background: #ffffff;
38 background-image: url(https://www.hilversummers.nl/documents/1037192/0/Vector+ssSmart+Object+%282%29.png/c53f2166-bbe1-ea1c-3812-eaa96cda06a4?t=1695885308284);
39 background-size: cover;
40}
41.clrsWrap{
42 flex-direction: row;
43 height: 100%;
44}
45.articleBody {
46 background: red;
47 color: white;
48 padding: 40px;
49 box-shadow: 0px 3px 6px #00000028;
50
51}
52.backToHome{
53 display: inline-block;
54 margin-bottom: 20px;
55}
56#bericht_inhoud{
57 white-space: pre-line;
58}
59.shareBtn{
60 font-size: 23px;
61 font-family: 'Lexend Deca';
62 font-weight: bold;
63 background: red;
64 color:white;
65 padding: 7px 15px;
66}
67.shareBtn:hover, .shareBtn:focus{
68 color:#FFE500;
69
70}
71.sharemodal{
72 display: none;
73}
74.sharemodal-dialog{
75 position: relative;
76 transition: -webkit-transform .3s ease-out;
77 transition: transform .3s ease-out;
78 transition: transform .3s ease-out,-webkit-transform .3s ease-out;
79}
80
81a.customer-share:hover, .customer-share:focus{
82 text-decoration: none;
83}
84.customer-share{
85 margin:5px;
86 display: inline-table;
87 margin: 5px;
88 height: 40px;
89 width: 40px;
90 border-radius: 50px;
91 border: solid red 3px;
92}
93.customer-share i{
94 background: white;
95 display: inline-block !important;
96 border-radius: 60px;
97 padding: 0.75em 0.8em;
98 width: 40px;
99 height: 40px;
100 text-align: center;
101}
102.articleTitle{
103 font-size: clamp(22px,2.292vw,38px);
104 margin: 0;
105}
106.tagsShare{
107 padding: 40px;
108 overflow: hidden;
109 position: relative;
110 display: flex;
111 flex-direction: column;
112}
113.eventSvg {
114 right: 0;
115 top: 0;
116 height: auto;
117 max-height: 100%;
118 margin-right: -40px;
119 margin-top: -40px;
120 position: absolute;
121 width: auto;
122 pointer-events: none;
123 }
124 .tagsNSvg {
125 color: red;
126 text-transform: uppercase;
127 font-family: 'Lexend Deca';
128 margin-bottom: 20px;
129}
130.tagsNSvg h2 {
131 margin: 0;
132 font-size: 15px;
133}
134.toFaqAndShare{
135 display: flex;
136 justify-content: space-between;
137 align-items: end;
138 flex-wrap: wrap;
139 position: relative;
140 margin-top: auto;
141}
142.vragen{
143 font-family: 'Lexend Deca';
144 font-weight: bold;
145 color:red;
146 text-decoration: underline;
147 font-size: clamp(22px,2.292vw,38px);
148}
149.tagsOrg{
150 z-index: 1;
151 position: relative;
152 font-size: 15px;
153}
154.datumtijd {
155 font-weight: bold;
156 font-family: 'Lexend Deca';
157 color: white;
158 font-size: 15px;
159}
160.organisatorLink{
161 text-decoration:underline;
162}
163@media (min-width: 576px){
164.sharemodal-dialog {
165 max-width: 370px;
166 margin: 1.75rem auto;
167}
168.sharemodal-dialog {
169 min-height: calc(100% - (1.75rem * 2));
170}
171}
172
173@media(max-width:767.9px){
174 #circkaart{
175 height: 187px;
176 width: 100%;
177 }
178}
179@media(max-width:575.9px){
180
181 .bericht_detail_container{
182 padding:0;
183 }
184 .articleBody,.tagsShare{
185 padding: 20px;
186 }
187 #bericht_inhoud, #bericht_inhoud p{
188 font-size: 12px;
189 }
190}
191</style>
192
193
194<div class="outerContainer">
195
196 <div class="bericht_detail_container">
197 <a class="backToHome" href="<#if !paramUtil.getString(request, "redirect")?has_content>
198 ${themeDisplay.getURLPortal()}/web${themeDisplay.getScopeGroup().friendlyURL}
199 <#else>
200 ${themeDisplay.getURLPortal()}${paramUtil.getString(request, "redirect")}
201 </#if>"><img src="https://www.hilversummers.nl/documents/1037192/0/arrow.png/b5814a56-ceec-a1b6-c147-4a01b04f1ff2?t=1657115711257"></a>
202
203
204
205 <div class="bericht_details">
206 <div class="row no-gutters">
207
208 <div class="col-md-6">
209 <#if (Afbeelding.getData())?? && Afbeelding.getData() != "">
210 <img class="articleImage" alt="${Afbeelding.getAttribute("alt")}" src="${Afbeelding.getData()}" />
211 </#if>
212 </div>
213
214 <div class="col-md-6">
215 <div class="d-flex clrsWrap">
216 <div id="circkaart">
217 <#assign latitude = 0>
218 <#assign longitude = 0>
219
220 <#if (Geolocation1mdn.getData() != "")>
221 <#assign geolocationJSONObject = jsonFactoryUtil.createJSONObject(Geolocation1mdn.getData())>
222 <#assign latitude = geolocationJSONObject.getDouble("latitude")>
223 <#assign longitude = geolocationJSONObject.getDouble("longitude")>
224 </#if>
225 </div>
226 </div>
227 </div>
228
229
230 <div class="col-md-6">
231
232 <div class="articleBody h-100">
233 <h1 class="articleTitle">${.vars['reserved-article-title'].data}</h1>
234 <div id="bericht_inhoud">
235 <p>${Beschrijving.getData()}</p>
236 </div>
237 <div class="datumtijd">
238 <#if Begintijd?has_content><div>Starttijd: ${Begintijd.getData()}</div></#if>
239 <#if Eindtijd?has_content><div>Eindtijd: ${Eindtijd.getData()}</div></#if>
240 <#if Begindatum?has_content><div>Datum: <#assign Begindatum_Data = getterUtil.getString(Begindatum.getData())>
241
242 <#if validator.isNotNull(Begindatum_Data)>
243 <#assign Begindatum_DateObj = dateUtil.parseDate("yyyy-MM-dd", Begindatum_Data, locale)>
244
245 ${dateUtil.getDate(Begindatum_DateObj, "dd MMM yyyy", locale)}
246 </#if></div></#if>
247 <div><#if Locatie?has_content>Locatie: <span id="locatiespan">${Locatie.getData()}</#if></span>
248 </div>
249 </div>
250 </div>
251 </div>
252
253 <div class="col-md-6">
254 <div class="bg-white h-100 tagsShare ">
255 <div class="tagsNSvg row">
256 <div class="tagsOrg col-lg-6">
257 <div class="tags_event">
258 <#if asset.getTags()?has_content>
259 <h2>TAGS:</h2>
260 <#list asset.getTags() as tag>
261 <span>#${tag.name}</span>
262 </#list>
263 </#if>
264 </div>
265 <br>
266 <div class="organisatie">
267 <h2>ORGANISATOR: </h2>
268 <#if OrganisatieLink?has_content && Organisatie?has_content>
269 <a class="organisatorLink" target="_blank" href="${OrganisatieLink.getData()}">${Organisatie.getData()} <i class="icon-external-link"></i></a><br>
270 <#else>
271 <#if Organisatie?has_content>
272 ${Organisatie.getData()}<br>
273 </#if>
274 </#if>
275
276 <#if ExtraLinknaam.getSiblings()?has_content>
277 <#list ExtraLinknaam.getSiblings() as cur_ExtraLinknaam>
278 <#if cur_ExtraLinknaam.getChildren()[0].getData()?has_content>
279 <a class="organisatorLink" target="_blank" href="${cur_ExtraLinknaam.getChildren()[0].getData()}">${cur_ExtraLinknaam.getData()} <i class="icon-external-link"></i></a><br>
280 </#if>
281 </#list>
282 </#if>
283 </div>
284 </div>
285 <div class="col-lg-6 d-none d-lg-block">
286 <svg class="eventSvg" xmlns="http://www.w3.org/2000/svg" width="409.25" height="506.519" viewBox="0 0 409.25 506.519">
287 <g id="Group_16" data-name="Group 16" transform="translate(-1184.024 -409)">
288 <path id="Path_102" data-name="Path 102" d="M5351.022,4118,5759.3,4624.519v-160.6L5587.55,4118H5351.022" transform="translate(-4166.998 -3709)" fill="red"/>
289 <path id="Path_103" data-name="Path 103" d="M5351.022,4118,5575,4619.519V4460.508L5480.781,4118H5351.022" transform="translate(-3981.726 -3709)" fill="#ffe500"/>
290 </g>
291 </svg>
292 </div>
293 </div>
294 <div class="toFaqAndShare">
295 <a class="vragen" href="${themeDisplay.getURLPortal()}/web${themeDisplay.getScopeGroup().friendlyURL}/faq">Vragen?</a>
296 <a aria-hidden="true" id="modal-buttton" data-toggle="modal" data-target="#sharemodal" href="#" class="shareBtn">Share</a>
297 </div>
298
299 <!-- Modal -->
300 <div class="modal fade sharemodal" id="sharemodal" tabindex="-1" role="dialog" aria-labelledby="sharemodalTitle" aria-hidden="true">
301 <div class="modal-dialog modal-dialog-centered sharemodal-dialog" role="document">
302 <div class="modal-content">
303 <div class="modal-header">
304 <h5 class="modal-title" id="exampleModalLongTitle">Social share</h5>
305 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
306 <span aria-hidden="true">×</span>
307 </button>
308 </div>
309 <div class="modal-body">
310 <a class="facebook customer-share" href="https://www.facebook.com/sharer.php?u=${currentURL}" title="Facebook share" target="_blank" data-toggle="tooltip" data-placement="top"><i class="icon-facebook"></i></a>
311 <a class="twitter customer-share" href="https://twitter.com/share?url=${currentURL}&text=Evenement &" title="Twitter share" target="_blank" data-toggle="tooltip" data-placement="top"><i class="fa-brands fa-x-twitter"></i></a>
312
313 <a class="linkedin customer-share" href="https://www.linkedin.com/shareArticle?mini=true&url=${currentURL}" title="linkedin Share" target="_blank" data-toggle="tooltip" data-placement="top"><i class="icon-linkedin"></i></a>
314
315 <a class="linkje customer-share" onclick="copyHulpLink()" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Link kopieren"><i class="icon-link"></i></a>
316
317 <input style="visibility:hidden; pointer-events: none;height: 0;" class="form-control copyInput" type="text" value="${currentURL}" id="hulpLink">
318 </div>
319 <div class="modal-footer">
320 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
321 </div>
322 </div>
323 </div>
324 </div><#--end modal -->
325 </div>
326 </div>
327
328
329 </div><#--/row-->
330 </div><#--/container-->
331
332 </div>
333
334</div>
335
336<script>
337 require([
338 "esri/config","esri/Map",
339 "esri/views/MapView",
340 "esri/layers/FeatureLayer",
341 "esri/Graphic",
342 "esri/layers/GraphicsLayer",
343 "esri/popup/content/TextContent"
344 ], function (esriConfig, Map, MapView, FeatureLayer, Graphic, GraphicsLayer, TextContent) {
345
346 esriConfig.apiKey = "AAPKe8255caa87c84654adcc4adbeda3e728VLQhw77TXB29lPOPaGO-IC-4Wq49M-DYOdDTTw-Dsc6MOB7OAPtsnz1sbsgvMuSw";
347
348 const map = new Map({
349 basemap: "arcgis-topographic" // Basemap layer service
350 });
351
352 const view = new MapView({
353 map: map,
354 center: [${longitude},${latitude}], // Longitude, latitude
355 zoom: 15, // Zoom level
356 container: "circkaart", // Div element
357 navigation: {
358 mouseWheelZoomEnabled: false,
359 browserTouchPanEnabled: false
360 }
361 });
362
363 const graphicsLayertje = new GraphicsLayer();
364 map.add(graphicsLayertje);
365
366
367 <#assign
368
369 kaartImage = "${themeDisplay.getPortalURL()}/documents/1037192/0/Kaart-pin-square.png/a2c77c79-bb99-b424-1002-102ffb9d04c0?t=1657100916495"
370
371 height = "45px"
372 width = "45px"
373
374
375 />
376
377
378
379 const point = {
380 type: "point",
381 longitude: ${longitude},
382 latitude: ${latitude}
383 };
384
385
386 const markerSymbol = {
387 type: "simple-marker",
388 color: [226, 15, 5],
389 outline: {
390 color: [255, 255, 255],
391 width: 2
392 }
393 };
394
395 let imageSymbol = {
396 type: "picture-marker", // autocasts as new PictureMarkerSymbol()
397 url: "${kaartImage}",
398 width: "${width}",
399 height: "${height}"
400 };
401
402 const template = {
403 // autocasts as new PopupTemplate()
404 // title: "${.vars['reserved-article-title'].data}",
405 content: `<div class='mapPopupContainer row'><div class="col-3 imgContainer"><img class="popupImg" src='<#if (Afbeelding.getData())?? && Afbeelding.getData() != "">${Afbeelding.getData()}</#if>'/></div><div class="titelContainer col-9"><h2>${.vars['reserved-article-title'].data?replace("`", "'")?json_string}</h2><#if beschrijving?has_content><p>${Beschrijving.getData()?replace("<[^>]*>", "", "r")}</p></#if></div><br></div>`
406 };
407
408 const pointGraphic = new Graphic({
409 geometry: point,
410 symbol: imageSymbol,
411 popupTemplate: template
412 });
413 graphicsLayertje.add(pointGraphic);
414
415 });
416
417
418
419
420function copyHulpLink() {
421 var copyText = document.getElementById("hulpLink");
422 copyText.select();
423 copyText.setSelectionRange(0, 99999);
424 navigator.clipboard.writeText(copyText.value);
425
426}
427
428 $(function () {
429 $('[data-toggle="tooltip"]').tooltip()
430})
431 </script>
432
433
434
435
436<@liferay_util["html-top"]>
437<#if (Afbeelding.getData())?? && Afbeelding.getData() != "">
438 <meta property="og:image" content="${Afbeelding.getData()}">
439 <#else>
440 <meta property="og:image" content="${themeDisplay.getCompanyLogo()}">
441</#if>
442
443
444
445
446 <meta property="og:title" content="${.vars['reserved-article-title'].data}">
447
448<#if Beschrijving?has_content>
449 <meta property="og:description" content="${htmlUtil.escape(Beschrijving.getData())}">
450<#else>
451 <meta property="og:description" content="Artikel">
452 </#if>
453 <meta property="og:type" content="article">
454 <meta property="og:url" content="${themeDisplay.getPortalURL()}/web${themeDisplay.getScopeGroup().friendlyURL}/-/${.vars['reserved-article-url-title'].data}" />
455
456 <meta name="twitter:card" content="${.vars['reserved-article-title'].data}"/>
457
458
459<meta name="twitter:site" content="${themeDisplay.getPortalURL()}/web${themeDisplay.getScopeGroup().friendlyURL}/-/${.vars['reserved-article-url-title'].data}" />
460
461 <#if (Afbeelding.getData())?? && Afbeelding.getData() != "">
462 <meta name="twitter:image" content="${Afbeelding.getData()}">
463 <#else>
464 <meta name="twitter:image" content="${themeDisplay.getCompanyLogo()}">
465</#if>
466
467 </@>