Blog Klap | Klap
Emite Boleta Electrónica en tu misma máquina POS
Contrata el servicio de forma fácil, rápida y segura.
Por sólo 0,39 UF + IVA al mes
Se ha producido un error al procesar la plantilla.
Negative range start index (-3) isn't allowed for a range used for slicing.
The blamed expression:
==> startIndex..endIndex [in template "20101#20128#575131" at line 391, column 24]
----
FTL stack trace ("~" means nesting-related):
- Failed at: #list entries[startIndex..endIndex] a... [in template "20101#20128#575131" at line 391, column 9]
----
1<style>
2.bg-blog{
3 position: absolute;
4 width: 100%;
5 top: 0;
6 object-fit: cover;
7 object-position: bottom;
8 height: 100%;
9}
10.blog-col-tit{
11 height: auto;
12}
13.blog-tit{
14 font-weight: 800;
15 font-size: 36px;
16 line-height: 100%;
17 text-align: center;
18 color: var(--klap_azul);
19 padding: 0 24px 0 0;
20}
21.blog-tit-logo{
22 width: 81px;
23 height: auto;
24}
25.blog-content-principal {
26 position: relative;
27}
28.blog-img-cc{
29 object-fit: cover;
30 object-position: center;
31}
32.blog-content-principal img {
33 width: 100%;
34 height: auto;
35}
36.blog-content-principal-tit{
37 font-weight: 800;
38 font-size: 24px;
39 line-height: 100%;
40 color: var(--klap_azul);
41 padding: 16px 8px 8px;
42}
43.blog-content-principal-fecha{
44 font-weight: 600;
45 font-size: 16px;
46 line-height: 100%;
47 color: var(--klap_azul);
48 padding: 0 8px;
49}
50.blog-content-principal-autor{
51 font-weight: 700;
52 color: #007bff;
53}
54
55
56/* Estilos para el contenedor */
57.blog-flex-container {
58 display: flex;
59 flex-wrap: wrap;
60 justify-content: space-between;
61}
62.blog-flex-container-2 {
63 display: flex;
64 flex-wrap: wrap;
65 justify-content: center;
66}
67
68/* Estilos para los elementos dentro del contenedor */
69.blog-flex-item {
70 flex: 0 0 calc(33% - 3px);
71 box-sizing: border-box;
72}
73/* Estilos adicionales para pantallas pequeñas */
74@media (max-width: 992px) {
75 .blog-flex-container {
76 display: flex;
77 justify-content: center;
78 }
79 .blog-flex-item {
80 flex: 0 0 calc(34% + 5px);
81 margin: 0 80px;
82 }
83}
84/* Estilos adicionales para pantallas muy pequeñas */
85@media (max-width: 576px) {
86 .blog-flex-item {
87 flex: 0 0 calc(100%);
88 margin: 0 auto;
89 }
90}
91.blog-cards-content{
92 border-top: 2px solid #D9D9D9;
93 padding: 0 0 16px;
94 margin: 0 8px;
95}
96.blog-cards-box {
97 display: flex;
98 flex-direction: column;
99 box-shadow: 0px 4px 4px 0px #00000040;
100 border-radius: 8px;
101 background-color: #FFFFFF;
102 height: 297px;
103 margin: 8px 0;
104}
105.blog-cards-box-tit{
106 font-size: 20px;
107 color: var(--klap_azul);
108 text-align: left;
109 font-weight: 800;
110 line-height: 24px;
111}
112.blog-cards-box-tit:hover{
113 color: var(--klap_azul_secundario);
114}
115.blog-card-img{
116 width: 100%;
117 height: 132px;
118 border-radius: 8px 8px 0 0;
119}
120.blog-card-date{
121 flex: 1;
122 align-content: end;
123 padding: 0 16px 0;
124}
125.blog-subtit-content{
126 border-top: 2px solid #D9D9D9;
127 border-bottom: 2px solid #D9D9D9;
128 padding: 16px 4px 0px;
129 margin: 24px -4px 8px;
130}
131.blog-subtit{
132 font-weight: 700;
133 font-size: 24px;
134 line-height: 100%;
135 color: var(--klap_azul_secundario);
136}
137.blog-subtit-bajada{
138 font-weight: 600;
139 font-size: 16px;
140 line-height: 20px;
141 color: var(--klap_azul);
142}
143.blog-timeline-content{
144 border: 1px solid #B7B7B7;
145 box-shadow: 0px 4px 4px 0px #00000040;
146 border-radius: 8px;
147 background-color: #FFFFFF;
148 padding: 8px 0;
149 margin: 16px -4px;
150 height: 165px;
151}
152.blog-timeline-img{
153 width: 369px;
154 height: 224px;
155 border-radius: 8px;
156}
157.blog-timeline-tit{
158 font-size: 18px;
159 color: var(--klap_azul);
160 text-align: left;
161 font-weight: 800;
162 line-height: 24px;
163}
164.blog-timeline-tit:hover{
165 color: var(--klap_azul_secundario);
166}
167.blog-cover-image{
168 background-position: center;
169 background-repeat: no-repeat;
170 background-size: cover;
171 margin-bottom: 24px;
172 padding-bottom: 37.5%;
173}
174.blog-autor{
175 font-weight: 700;
176 color: #007bff;
177}
178.blog-date{
179 font-size: 16px;
180 font-weight: 600;
181 line-height: 100%;
182 color: #002B49;
183}
184.pagination a {
185 margin: 0 5px;
186 padding: 5px 10px;
187 text-decoration: none;
188 border: 1px solid #ccc;
189 border-radius: 5px;
190 color: #333;
191}
192.pagination a.active {
193 font-weight: bold;
194 background: #007bff;
195 color: white;
196}
197.blog-pagination{
198 padding: 5px 10px;
199}
200.blog-btn-pagination{
201 background-color: #D5D5D5;
202 color: #53575A;
203 display: block;
204 width: 344px;
205 height: 48px;
206 font-size: 16px;
207 font-weight: 700;
208 line-height: 16px;
209 align-content: center;
210 text-align: center;
211 border-radius: 8px;
212 pointer-events: none;
213 cursor: default;
214 text-decoration: none;
215}
216.active-pagination {
217 background-color: var(--klap_azul);
218 color: #FFFFFF !important;
219 pointer-events: auto;
220 cursor: pointer;
221}
222
223.active-pagination:hover{
224 background-color: var(--klap_azul_secundario);
225 color: #FFFFFF;
226}
227
228@media screen and (min-width: 768px) {
229 .pago-qr-btn {
230 width: 248px;
231 }
232}
233
234@media screen and (min-width: 992px){
235 .blog-col-tit{
236 height: 78px;
237 }
238 .blog-tit{
239 font-size: 64px;
240 padding: 0 32px 0 0;
241 }
242 .blog-tit-logo{
243 width: 121px;
244 height: auto;
245 }
246 .blog-content-principal img {
247 width: 100%;
248 height: 438px;
249 border-radius: 8px;
250 }
251 .blog-content-principal-tit{
252 font-weight: 800;
253 font-size: 36px;
254 line-height: 100%;
255 color: #FFFFFF;
256 position: absolute;
257 bottom: 50px; /* Distancia desde la parte inferior */
258 left: 35px; /* Distancia desde la izquierda */
259 padding: 8px 224px 8px 0;
260 border-radius: 5px;
261 }
262 .blog-content-principal-fecha{
263 font-weight: 600;
264 font-size: 16px;
265 line-height: 100%;
266 color: #FFFFFF;
267 position: absolute;
268 bottom: 20px;
269 left: 35px;
270 }
271 .blog-content-principal-autor{
272 font-weight: 600;
273 color: #FFFFFF;
274 }
275 .blog-cards-content {
276 border-top: none;
277 padding: 0;
278 margin: 0;
279 }
280 .blog-cards-box {
281 margin: 32px 0;
282 height: 484px;
283 }
284 .blog-cards-box-tit{
285 font-size: 28px;
286 line-height: 34px;
287 }
288 .blog-card-img{
289 height: 230px;
290 }
291 .blog-card-date{
292 padding: 0 16px 8px;
293 }
294 .blog-subtit-content{
295 padding: 24px 0 16px;
296 margin: 0 -12px 24px;
297 }
298 .blog-timeline-content{
299 border: none;
300 margin: 16px -15px;
301 height: 240px;
302 }
303 .blog-timeline-tit{
304 font-size: 28px;
305 line-height: 34px;
306 }
307 .blog-btn-pagination{
308 width: 209px;
309 margin: 0 16px;
310 }
311}
312</style>
313
314<#setting locale="es_ES">
315
316<#-- Verifica si hay entradas de blog disponibles -->
317<#if entries?has_content>
318 <div class="container">
319
320 <div class="row pt-4 pt-lg-5 pb-4 pb-lg-5">
321 <div class="col-12 d-flex justify-content-center blog-col-tit">
322 <span class="blog-tit">Blog KLap</span>
323 <!--<img src="https://verticaldesa.mcdesaqa.cl:8100/documents/33904/601802/logo_klap.svg/13367608-70ba-ad74-2660-aadbd769d0b5?t=1742932547316" alt="Logo Klap" class="blog-tit-logo" fetchpriority="high" width="121" heigth="61" />-->
324 </div>
325 </div>
326
327 <div class="row pb-lg-2">
328 <div class="col-12">
329 <#list entries as entry>
330 <#if entry?index == 0>
331 <#assign coverImageURL = entry.getCoverImageURL(themeDisplay) />
332 <#assign smallImageURL = entry.getSmallImageURL(themeDisplay) />
333 <div class="blog-content-principal">
334 <img src="${coverImageURL}" alt="${entry.getTitle()}" class="d-none d-lg-block blog-img-cc">
335 <img src="${smallImageURL}" alt="${entry.getTitle()}" class="d-block d-lg-none blog-img-cc">
336 <div class="">
337 <!--<p class="blog-content-principal-tit"></p>-->
338
339 <a href="/blog-klap/-/blogs/${entry.getTitle()}" title="${entry.getTitle()}" class="blog-content-principal-tit">
340 ${entry.getTitle()}
341 </a>
342
343 <p class="blog-content-principal-fecha">${entry.getStatusDate()?string("d 'de' MMMM 'de' yyyy")} • por <span class="blog-content-principal-autor">Klap</p></span>
344 </div>
345 </div>
346 <#break>
347 </#if>
348 </#list>
349 </div>
350
351 <div class="col-12">
352 <div class="blog-cards-content"></div>
353 <div class="blog-flex-container px-2 px-md-0">
354 <#list entries as entry2>
355 <#if entry2?index gt 0 && entry2?index lt 4>
356 <#assign smallImageURL = entry2.getSmallImageURL(themeDisplay) />
357 <div class="blog-cards-box blog-flex-item">
358 <img src="${smallImageURL}" alt="${entry2.getTitle()}" class="blog-card-img blog-img-cc">
359 <a href="/blog-klap/-/blogs/${entry2.getUrlTitle()}" title="${entry2.getTitle()}" class="blog-cards-box-tit p-3">
360 ${entry2.getTitle()}
361 </a>
362 <p class="blog-date blog-card-date">${entry.getStatusDate()?string("d 'de' MMMM 'de' yyyy")} • por <span class="blog-autor">Klap</span></p>
363 </div>
364 </#if>
365 </#list>
366 </div>
367 </div>
368 </div>
369
370 <div id="all-blogs" class="row blog-subtit-content">
371 <div class="col-12">
372 <p class="blog-subtit">Todas las Publicaciones</p>
373 <p class="blog-subtit-bajada">Entérate de las novedades, noticias de Klap y la industria, puedes seleccionar el tipo de publicación que te interese.</p>
374 </div>
375 </div>
376
377 <#assign itemsPerPage = 3 />
378 <#assign totalPages = (entries?size / itemsPerPage)?ceiling />
379
380 <#-- Obtener la página actual desde la URL -->
381 <#assign currentPage = request.getParameter("page")?default("1")?number />
382
383 <#-- Calcular los índices para la paginación -->
384 <#assign startIndex = (currentPage - 1) * itemsPerPage />
385 <#assign endIndex = (startIndex + itemsPerPage - 1) />
386
387 <#if endIndex gt entries?size>
388 <#assign endIndex = entries?size - 1 />
389 </#if>
390
391 <#list entries[startIndex..endIndex] as entry3>
392
393 <#assign blogsEntryLocalService = serviceLocator.findService("com.liferay.blogs.service.BlogsEntryLocalService") />
394 <#assign blogsEntry = blogsEntryLocalService.getEntry(groupId, entry3.getUrlTitle()) />
395 <#assign coverImageURL = entry3.getCoverImageURL(themeDisplay) />
396 <#assign smallImageURL = entry3.getSmallImageURL(themeDisplay) />
397
398 <!--
399
400 ${blogsEntry}
401
402 -->
403 <div class="row blog-timeline-content">
404
405 <div class="col-4 d-none d-lg-block pl-2">
406 <img src="${smallImageURL}" class="img-fluid blog-timeline-img blog-img-cc" width="369" heigth="224" />
407 </div>
408
409 <div class="col-12 col-lg-8 pl-2 pr-3 pt-3 pt-lg-4 d-flex flex-column">
410 <a href="/blog-klap/-/blogs/${entry3.getUrlTitle()}" title="${entry3.getTitle()}" class="blog-timeline-tit">
411 ${entry3.getTitle()}
412 </a>
413
414 <p class="blog-date mt-auto mb-1 mb-lg-3">${entry3.getStatusDate()?string("d 'de' MMMM 'de' yyyy")} • por <span class="blog-autor">Klap</span></p><#-- ${entry3.getUserName()} -->
415
416 </div>
417 </div>
418 </#list>
419 <#--
420 <div class="pagination">
421 <h2>${currentPage}</h2>
422 <#if currentPage gt 1>
423 <a href="?page=${currentPage - 1}">« Anterior</a>
424 </#if>
425
426 <#list 1..totalPages as page>
427 <a href="?page=${page}" <#if page == currentPage>class="active"</#if>>${page}</a>
428 </#list>
429
430 <#if currentPage lt totalPages>
431 <a href="?page=${currentPage + 1}">Siguiente »</a>
432 </#if>
433 </div>
434 -->
435 <div class="row">
436 <#assign activeBtnVolver = "" />
437 <#assign activeBtnSiguiente = "" />
438 <#if currentPage gt 1>
439 <#assign activeBtnVolver = " active-pagination" />
440 <#elseif currentPage lt totalPages>
441 <#assign activeBtnSiguiente = " active-pagination" />
442 </#if>
443
444 <div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end mt-3">
445 <a href="?page=${currentPage - 1}" class="blog-btn-pagination${activeBtnVolver}">Volver</a>
446 </div>
447 <div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-start mt-3">
448 <a href="?page=${currentPage + 1}" class="blog-btn-pagination${activeBtnSiguiente}">Siguiente</a>
449 </div>
450 </div>
451 </div>
452
453</#if>
454
455<script>
456$(document).ready(function () {
457
458});
459</script>