Fil d'Ariane
Our stories
Connecting experts and enthusiasts, dreamers and doers, innovators and influencers — explore and experience.
Explore our stories
Menu de Navigation
Agrégateur de contenus
Back to Previous Page Grow with Bosch
Une erreur s'est produite en traitant le modèle.
The following has evaluated to null or missing:
==> item.descImg [in template "20097#20123#15271672" at line 47, column 86]
----
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 item.descImg.getData()?has_content [in template "20097#20123#15271672" at line 47, column 81]
----
1<section aria-label="What we do" class="what-we-do">
2 <div class="accordion-grid-wrapper">
3 <div class="show-desktop">
4 <#if gridItemTitle.getSiblings()?has_content>
5 <#assign tabId=0 />
6 <#assign tabId1 = 0 />
7 <#list gridItemTitle.getSiblings()?chunk(4) as cur_gridItemTitle>
8 <div class="container">
9 <div class="row grid-row">
10 <#list cur_gridItemTitle as item>
11 <div class="col-md-3">
12 <div>
13 <a class="grid-item collapsed" href="#heading_${tabId}" data-toggle="collapse">
14 <h5 class="mb-0">
15 <button class="btn btn-link collapsed" type="button" data-target="#collapse_${tabId}" aria-expanded="false" aria-controls="collapse_${tabId}">
16 <div>
17 <#if item.gridItemImage.getData()?has_content>
18 <div class="grid-section-image">
19 <img alt="${item.getData()}" src="${item.gridItemImage.getData()}">
20 </div>
21 </#if>
22 <div class="grid-section-heading">
23 <span class="plus-icon">
24 <i class="bap-icon bap-plus"> </i>
25 </span>
26 <span class="grid-section-heading-text">
27 ${item.getData()}
28 </span>
29 </div>
30 <div class="triangle-up"></div>
31 </div>
32 </button>
33 </h5>
34 </a>
35 </div>
36 </div>
37 <#assign tabId = tabId + 1/>
38 </#list>
39 </div>
40 </div>
41
42 <div class="desc-wrapper">
43 <#list cur_gridItemTitle as item>
44 <div class="col-12 order-md-last collapse fade show" id="heading_${tabId1}">
45 <div class="container">
46 <div class="row">
47 <#if item.descImg.getData()?has_content>
48 <div class="col-md-5">
49 <img alt="${item.getData()}" src="${item.descImg.getData()}">
50 </div>
51 <div class="col-md-7">
52 <h4>${item.getData()}</h4>
53 ${item.gridItemDescription.getData()}
54 </div>
55 <#elseif item.gridItemImage.getData()?has_content>
56 <div class="col-md-5">
57 <img alt="${item.getData()}" src="${item.gridItemImage.getData()}">
58 </div>
59 <div class="col-md-7">
60 <h4>${item.getData()}</h4>
61
62 ${item.gridItemDescription.getData()}
63 </div>
64 <#else>
65 <div class="col-md-12">
66 <h4>${item.getData()}</h4>
67
68 ${item.gridItemDescription.getData()}
69 </div>
70 </#if>
71 </div>
72 </div>
73 </div>
74 <#if cur_gridItemTitle?counter <= 4>
75 <#assign tabId1 = tabId1 +1 />
76 <#elseif cur_gridItemTitle?counter == 4>
77 <#assign tabId1 = tabId +4 />
78 <#elseif cur_gridItemTitle?counter gte 8>
79 <#assign tabId1 = tabId1 +8 />
80 </#if>
81 </#list>
82 </div>
83 </#list>
84 </#if>
85 </div>
86
87
88
89 <div class="show-desktop-medium">
90 <div>
91 <#if gridItemTitle.getSiblings()?has_content>
92 <#assign tabId=0 />
93 <#assign tabId1 = 0 />
94 <#list gridItemTitle.getSiblings()?chunk(3) as cur_gridItemTitle>
95 <div>
96 <div class="row grid-row">
97 <#list cur_gridItemTitle as item>
98 <div class="col-md-4">
99 <div>
100 <a class="grid-item collapsed" href="#heading_${tabId}" data-toggle="collapse">
101 <h5 class="mb-0">
102 <button class="btn btn-link collapsed" type="button" data-target="#collapse_${tabId}" aria-expanded="false" aria-controls="collapse_${tabId}">
103 <div>
104 <#if item.gridItemImage.getData()?has_content>
105 <div class="grid-section-image">
106 <img alt="${item.getData()}" src="${item.gridItemImage.getData()}">
107 </div>
108 </#if>
109 <div class="grid-section-heading">
110 <span class="plus-icon">
111 <i class="bap-icon bap-plus"> </i>
112 </span>
113 <span class="grid-section-heading-text">
114 ${item.getData()}
115 </span>
116
117 </div>
118 <div class="triangle-up"></div>
119 </div>
120 </button>
121 </h5>
122 </a>
123 </div>
124 </div>
125 <#assign tabId = tabId + 1/>
126 </#list>
127 </div>
128 </div>
129
130 <div class="desc-wrapper">
131 <#list cur_gridItemTitle as item>
132
133 <div class="col-12 order-md-last collapse fade show" id="heading_${tabId1}">
134 <div class="row">
135 <#if item.descImg.getData()?has_content>
136 <div class="col-md-6">
137 <img alt="${item.getData()}" src="${item.descImg.getData()}">
138 </div>
139 <div class="col-md-6">
140 <h4>${item.getData()}</h4>
141
142 ${item.gridItemDescription.getData()}
143 </div>
144 <#elseif item.gridItemImage.getData()?has_content>
145 <div class="col-md-6">
146 <img alt="${item.getData()}" src="${item.gridItemImage.getData()}">
147 </div>
148 <div class="col-md-6">
149 <h4>${item.getData()}</h4>
150
151 ${item.gridItemDescription.getData()}
152 </div>
153 <#else>
154 <div class="col-md-12">
155 <h4>${item.getData()}</h4>
156 ${item.gridItemDescription.getData()}
157 </div>
158 </#if>
159 </div>
160 </div>
161
162 <#if cur_gridItemTitle?counter <= 3>
163 <#assign tabId1 = tabId1 +1 />
164 <#elseif cur_gridItemTitle?counter == 3>
165 <#assign tabId1 = tabId +3 />
166 <#elseif cur_gridItemTitle?counter gt 6>
167 <#assign tabId1 = tabId1 +6 />
168 <#else>
169 <#assign tabId1 = tabId1 +1 />
170 </#if>
171 </#list>
172 </div>
173 </#list>
174 </#if>
175 </div>
176 </div>
177 <div class="show-mobile">
178 <div>
179 <#if gridItemTitle.getSiblings()?has_content>
180 <#assign tabId=0 />
181 <#list gridItemTitle.getSiblings() as cur_gridItemTitle>
182 <#if tabId == 0 || tabId%4 == 0>
183 <div class="grid-row">
184 </#if>
185 <div class="grid-column">
186 <div>
187 <a class="grid-item collapsed" href="#heading_${tabId}" data-toggle="collapse">
188 <h5 class="mb-0">
189 <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse_${tabId}" aria-expanded="false" aria-controls="collapse_${tabId}">
190 <div>
191 <#if cur_gridItemTitle.gridItemImage.getData()?has_content>
192 <div class="grid-section-image">
193 <img alt="${cur_gridItemTitle.getData()}" src="${cur_gridItemTitle.gridItemImage.getData()}">
194 </div>
195 </#if>
196 <div class="grid-section-heading">
197 <span class="plus-icon">
198 <i class="bap-icon bap-plus"> </i>
199 </span>
200 <span class="grid-section-heading-text">
201 ${cur_gridItemTitle.getData()}
202 </span>
203
204 </div>
205 <div class="triangle-up"></div>
206 </div>
207 </button>
208 </h5>
209 </a>
210 </div>
211 </div>
212 <div class="desc-wrapper">
213 <div class="col-12 order-md-last collapse show" id="heading_${tabId}">
214 <div class="row">
215 <#if cur_gridItemTitle.descImg.getData()?has_content>
216 <div class="col-md-6">
217 <h4>${cur_gridItemTitle.getData()}</h4>
218 ${cur_gridItemTitle.gridItemDescription.getData()}
219 </div>
220 <div class="col-md-6">
221 <img alt="${cur_gridItemTitle.getData()}" src="${cur_gridItemTitle.descImg.getData()}">
222 </div>
223 <#elseif cur_gridItemTitle.gridItemImage.getData()?has_content>
224 <div class="col-md-6">
225 <h4>${cur_gridItemTitle.getData()}</h4>
226 ${cur_gridItemTitle.gridItemDescription.getData()}
227 </div>
228 <div class="col-md-6">
229 <img alt="${cur_gridItemTitle.getData()}" src="${cur_gridItemTitle.gridItemImage.getData()}">
230 </div>
231 <#else>
232 <div class="col-md-6">
233 <h4>${cur_gridItemTitle.getData()}</h4>
234 ${cur_gridItemTitle.gridItemDescription.getData()}
235 </div>
236 </#if>
237 </div>
238 </div>
239 </div>
240 <#assign tabId = tabId +1 />
241 <#if tabId == 0 || tabId%4 == 0>
242 </div>
243 </#if>
244 </#list>
245 </#if>
246 </div>
247 </div>
248 </div>
249
250
251</section>
252
253<script>
254//enable accordion behavior to show only 1 detail at a time
255$(".what-we-do .card-body a").addClass("collapsed");
256$(".what-we-do .col-12").removeClass("show");
257$(document).on("click", '.what-we-do [data-toggle="collapse"]', function() {
258 $(".what-we-do .plus-icon").removeClass("active");
259 $('.what-we-do .collapse.show').collapse('hide');
260 if(!$(this).hasClass("collapsed")){
261 $(this).find(".plus-icon").addClass("active");
262 } else{
263 $(this).find(".plus-icon").removeClass("active");
264 }
265});
266</script>
267
268<style>
269
270.what-we-do .grid-item .triangle-up {
271 width: 0;
272 height: 0;
273 border-left: 35px solid transparent;
274 border-right: 35px solid transparent;
275 border-bottom: 25px solid #eff1f2;
276 position: absolute;
277 bottom: -40px;
278 left: 5px;
279}
280
281.what-we-do .grid-item.collapsed .triangle-up {
282 display:none;
283}
284.what-we-do .grid-section-heading {
285 color: rgb(0, 0, 0);
286 cursor: pointer;
287 display: block;
288 font-size: 20px;
289 font-weight: 700;
290 margin-top: 15px;
291 display: flex;
292 text-align: left;
293 align-items: center;
294}
295
296.what-we-do .grid-section-heading .plus-icon.active .bap-plus {
297 transform: rotate(45deg);
298 transition: all 0.5s;
299}
300
301.what-we-do .grid-row {
302 padding: 20px 0 20px 0;
303 margin-bottom: 20px;
304 position: relative;
305}
306
307.what-we-do .grid-row button.btn.btn-link {
308 box-shadow: none;
309}
310
311.what-we-do .grid-row .btn-link:hover{
312 text-decoration: none;
313}
314
315.what-we-do .grid-row .btn {
316 padding: 0;
317}
318
319.what-we-do .plus-icon {
320 position: relative;
321 -webkit-flex: none;
322 -ms-flex: none;
323 width: 44px;
324 height: 44px;
325 margin-right: 15px;
326 border: 1px solid #e0e2e5;
327 border-radius: 50%;
328 background-color: #fff;
329 line-height: 40px;
330 font-size: 16px;
331 color: #007bc0;
332 text-align: center;
333 font-weight: 700;
334}
335
336.what-we-do .plus-icon .bap-icon {
337 font-weight: 700;
338 font-size: 16px;
339}
340
341.what-we-do .desc-wrapper {
342 background: #eff1f2;
343}
344
345.what-we-do .desc-wrapper .col-12 {
346 padding: 90px 60px 40px 90px;
347 padding-top: 40px;
348}
349
350.what-we-do .desc-wrapper img {
351 width: 100%;
352}
353
354.what-we-do .desc-wrapper h4 {
355 font-size: 36px;
356 color: #000;
357 margin-bottom: 25px;
358}
359
360.what-we-do .desc-wrapper p {
361 color: #000;
362}
363
364@media(min-width: 991px) {
365 .what-we-do .show-desktop-medium {
366 display: none;
367 }
368 .what-we-do .show-mobile {
369 display: none;
370 }
371}
372
373@media(min-width: 768px) and (max-width: 991px) {
374 .what-we-do .show-desktop {
375 display: none;
376 }
377
378 .what-we-do .show-mobile {
379 display: none;
380 }
381
382 .what-we-do .show-desktop-medium {
383 display: block;
384 }
385
386 .what-we-do .show-desktop-medium .grid-row {
387 padding: 20px;
388 }
389
390 .what-we-do .container {
391 padding-left: 0;
392 margin-left: 18px;
393 }
394
395 .what-we-do .show-desktop-medium .desc-wrapper .col-12 {
396 padding: 55px 30px 40px 30px;
397 }
398}
399
400@media(max-width: 767px) {
401 .what-we-do .show-desktop {
402 display: none;
403 }
404
405 .what-we-do .show-desktop-medium {
406 display: none;
407 }
408
409 .what-we-do .show-mobile {
410 display: block;
411 }
412
413 .what-we-do .show-mobile .grid-row {
414 padding: 0;
415 }
416
417 .what-we-do .show-mobile .grid-column {
418 padding: 20px;
419 position: relative;
420 margin-bottom: 20px;
421 }
422
423 .what-we-do .desc-wrapper .col-12 {
424 padding: 40px;
425 }
426
427 .what-we-do .grid-section-heading-text {
428 font-size: 16px;
429 }
430 .what-we-do .grid-item .triangle-up {
431 bottom: -20px;
432 }
433}
434
435@media(min-width: 768px) {
436 .what-we-do .show-mobile {
437 display: none;
438 }
439}
440</style>