boletines oops
An error occurred while processing the template. 
Unable to parse Velocity template
1<style> 
2@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); 
3@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); 
4 
5@font-face { 
6font-family: 'Nexa'; 
7src: url('/o/umsa-theme/fonts/Nexa-Bold.otf') format('opentype'); 
8font-weight: normal; 
9font-style: normal; 
10} 
11 
12.lib-struct-section { 
13width: 100%; 
14margin: 20px 0; 
15box-sizing: border-box; 
16} 
17 
18.lib-struct-card { 
19background-color: #ffffff; 
20border-radius: 18px; 
21border: 1px solid #dbeafe; 
22box-shadow: 0 6px 25px rgba(2, 73, 102, 0.06); 
23overflow: hidden; 
24display: flex; 
25flex-direction: row; 
26padding: 24px; 
27gap: 24px; 
28transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
29box-sizing: border-box; 
30} 
31 
32.lib-struct-card:hover { 
33box-shadow: 0 16px 35px rgba(2, 73, 102, 0.15); 
34border-color: #024966; 
35} 
36 
37.lib-struct-img-container { 
38width: 390px; 
39min-width: 390px; 
40height: 540px; 
41background-color: #f0f4f8; 
42display: flex; 
43align-items: center; 
44justify-content: center; 
45overflow: hidden; 
46position: relative; 
47padding: 10px; 
48box-sizing: border-box; 
49border-radius: 12px; 
50border: 1px solid #e2e8f0; 
51cursor: pointer; 
52} 
53 
54.lib-struct-img-container img.lib-struct-img { 
55max-width: 100% !important; 
56max-height: 100% !important; 
57width: auto !important; 
58height: auto !important; 
59object-fit: cover !important; 
60display: block !important; 
61border-radius: 8px !important; 
62transition: transform 0.5s ease !important; 
63} 
64 
65.lib-struct-img-container:hover .lib-struct-img { 
66transform: scale(1.05); 
67} 
68 
69.lib-struct-content { 
70display: flex; 
71flex-direction: column; 
72flex-grow: 1; 
73background: transparent; 
74} 
75 
76.lib-struct-title { 
77font-family: 'Nexa', 'Inter', sans-serif; 
78font-size: 2.15rem; 
79font-weight: 700; 
80line-height: 1.45; 
81margin-bottom: 14px; 
82} 
83 
84.lib-struct-title a { 
85color: #024966; 
86text-decoration: none; 
87transition: color 0.2s ease; 
88display: block; 
89background-image: linear-gradient(currentColor, currentColor); 
90background-position: 0% 100%; 
91background-repeat: no-repeat; 
92background-size: 0% 2px; 
93transition: background-size 0.3s, color 0.3s; 
94cursor: pointer; 
95} 
96 
97.lib-struct-title a:hover { 
98color: #be1f24; 
99background-size: 100% 2px; 
100text-decoration: none; 
101} 
102 
103.lib-struct-details-wrapper { 
104font-family: 'Inter', sans-serif; 
105font-size: 1.58rem; 
106color: #024966; 
107line-height: 1.65; 
108display: flex; 
109flex-direction: column; 
110gap: 14px; 
111margin-top: 10px; 
112} 
113 
114.lib-struct-desc { 
115text-align: justify; 
116color: #024966; 
117font-size: 1.58rem; 
118} 
119 
120.lib-struct-desc .img-umsa-wrapper { 
121position: relative; 
122display: block; 
123margin: 20px auto; 
124max-width: 100%; 
125width: fit-content; 
126overflow: hidden; 
127border-radius: 12px; 
128background-color: #ffffff; 
129border: 1px solid #dbeafe; 
130box-shadow: 0 4px 15px rgba(2, 73, 102, 0.1); 
131padding: 12px; 
132transition: all 0.3s ease; 
133cursor: pointer; 
134} 
135 
136.lib-struct-desc .img-umsa-wrapper:hover { 
137box-shadow: 0 8px 25px rgba(2, 73, 102, 0.2); 
138border-color: #024966; 
139transform: translateY(-2px); 
140} 
141 
142.lib-struct-desc img { 
143display: block; 
144max-width: 100% !important; 
145height: auto !important; 
146border-radius: 10px !important; 
147margin: 0 auto !important; 
148object-fit: contain !important; 
149transition: transform 0.5s ease !important; 
150} 
151 
152.lib-struct-desc .img-umsa-wrapper:hover img { 
153transform: scale(1.02); 
154} 
155 
156.lib-struct-meta-group { 
157display: flex; 
158flex-direction: column; 
159gap: 4px; 
160margin-top: 4px; 
161} 
162 
163.lib-struct-label { 
164font-family: 'Nexa', 'Inter', sans-serif; 
165color: #024966; 
166font-weight: 700; 
167font-size: 1.58rem; 
168} 
169 
170.lib-struct-value { 
171color: #024966; 
172font-size: 1.58rem; 
173} 
174 
175.lib-struct-footer { 
176display: flex; 
177align-items: center; 
178gap: 15px; 
179margin-top: 20px; 
180padding-top: 16px; 
181border-top: 2px solid #edf2f7; 
182flex-wrap: wrap; 
183} 
184 
185.lib-struct-btn { 
186text-decoration: none; 
187color: #ffffff; 
188background-color: #024966; 
189padding: 14px 28px; 
190border-radius: 30px; 
191font-weight: 700; 
192font-size: 1.42rem; 
193transition: all 0.3s ease; 
194box-shadow: 0 4px 12px rgba(2, 73, 102, 0.25); 
195display: inline-flex; 
196align-items: center; 
197gap: 10px; 
198font-family: 'Inter', sans-serif; 
199} 
200 
201.lib-struct-btn:hover { 
202background-color: #01364d; 
203transform: translateY(-2px); 
204box-shadow: 0 6px 18px rgba(2, 73, 102, 0.35); 
205color: #ffffff; 
206text-decoration: none; 
207} 
208 
209.lib-modal-umsa { 
210display: none; 
211position: fixed; 
212z-index: 9999; 
213left: 0; 
214top: 0; 
215width: 100%; 
216height: 100%; 
217background-color: rgba(0, 0, 0, 0.9); 
218align-items: center; 
219justify-content: center; 
220} 
221 
222.lib-modal-umsa img { 
223max-width: 90%; 
224max-height: 90%; 
225border-radius: 10px; 
226object-fit: contain; 
227box-shadow: 0 5px 30px rgba(0,0,0,0.5); 
228} 
229 
230@media screen and (max-width: 768px) { 
231.lib-struct-card { 
232flex-direction: column; 
233align-items: center; 
234padding: 20px; 
235text-align: center; 
236} 
237.lib-struct-img-container { 
238width: 240px; 
239min-width: 240px; 
240height: 330px; 
241margin-bottom: 10px; 
242} 
243.lib-struct-content { 
244width: 100%; 
245} 
246.lib-struct-details-wrapper { 
247text-align: center !important; 
248} 
249.lib-struct-desc { 
250text-align: center !important; 
251} 
252.lib-struct-footer { 
253justify-content: center; 
254} 
255} 
256</style> 
257 
258<section class="lib-struct-section"> 
259<div class="lib-struct-card"> 
260#if ($img_portada && $img_portada.getData() != "") 
261    #set($imgPortadaVal = $img_portada.getData()) 
262#else 
263    #set($imgPortadaVal = "https://placehold.co/600x400/024966/FFFFFF?text=Sin+Imagen") 
264#end 
265 
266<div class="lib-struct-img-container" onclick="openLibModal('$imgPortadaVal')"> 
267    <img class="lib-struct-img" src="$imgPortadaVal" alt="$reserved-article-title.getData()" onerror="this.onerror=null;this.src='https://placehold.co/600x400/024966/FFFFFF?text=Imagen+No+Disponible';" /> 
268</div> 
269 
270<div class="lib-struct-content"> 
271    #set ($articleTitle = "") 
272    #if ($validator.isNotNull($reserved-article-title.getData())) 
273        #set ($articleTitle = $reserved-article-title.getData()) 
274    #end 
275 
276    #set ($articleId = "") 
277    #if ($validator.isNotNull($reserved-article-id.getData())) 
278        #set ($articleId = $reserved-article-id.getData()) 
279    #end 
280 
281    <h3 class="lib-struct-title"> 
282        <a href="javascript:;" class="enl_$articleId">$articleTitle</a> 
283    </h3> 
284     
285    <div class="lib-struct-details-wrapper" id="$articleId"> 
286        #if ($descripcion_lib && $descripcion_lib.getData() != "") 
287        <div class="lib-struct-desc"> 
288            #set($htmlRaw = $descripcion_lib.getData()) 
289            #set($htmlWrapped = $htmlRaw.replaceAll('<img([^>]+)src="([^"]+)"([^>]*)>', '<div class="img-umsa-wrapper" onclick="openLibModal(\'$2\')"><img$1src="$2"$3></div>')) 
290            $htmlWrapped 
291        </div> 
292        #end 
293         
294        #if ($autor_lib && $autor_lib.getData() != "") 
295        <div class="lib-struct-meta-group"> 
296            <div class="lib-struct-label">Autor(es)</div> 
297            <div class="lib-struct-value">$autor_lib.getData()</div> 
298        </div> 
299        #end 
300         
301        #if ($FechaDePublicacion && $FechaDePublicacion.getData() != "") 
302            #set ($FechaDePublicacion_Data = $getterUtil.getString($FechaDePublicacion.getData())) 
303            #if ($validator.isNotNull($FechaDePublicacion_Data)) 
304                #set ($FechaDePublicacion_DateObj = $dateUtil.parseDate("yyyy-MM-dd", $FechaDePublicacion_Data, $locale)) 
305                <div class="lib-struct-meta-group"> 
306                    <div class="lib-struct-label">Fecha de publicación:</div> 
307                    <div class="lib-struct-value">$dateUtil.getDate($FechaDePublicacion_DateObj, "yyyy", $locale)</div> 
308                </div> 
309            #end 
310        #end 
311         
312        <div class="lib-struct-footer"> 
313            #if ($enlace_lib && $enlace_lib.getData() != "") 
314            <a class="lib-struct-btn" href="$enlace_lib.getData()" target="_blank"> 
315                <i class="fa-solid fa-external-link-alt"></i> Ver Enlace 
316            </a> 
317            #end 
318 
319            #if ($documento_lib && $documento_lib.getData() != "") 
320            <a class="lib-struct-btn" href="$documento_lib.getData()" target="_blank"> 
321                <i class="fa-solid fa-download"></i> $languageUtil.format($locale, "download-x","") 
322            </a> 
323            #end 
324        </div> 
325    </div> 
326</div> 
327</div> 
328</section> 
329 
330<div id="libModalGlobal" class="lib-modal-umsa" onclick="closeLibModal()"> 
331    <img id="libModalImg" src="" alt="Imagen Ampliada"> 
332</div> 
333 
334<script> 
335function openLibModal(imgSrc) { 
336    var modal = document.getElementById('libModalGlobal'); 
337    var modalImg = document.getElementById('libModalImg'); 
338    modalImg.src = imgSrc; 
339    modal.style.display = 'flex'; 
340} 
341 
342function closeLibModal() { 
343    var modal = document.getElementById('libModalGlobal'); 
344    modal.style.display = 'none'; 
345} 
346 
347$(document).ready(function(){ 
348    $(".enl_$articleId").click(function () { 
349        $("#$articleId").toggle("slow"); 
350    }); 
351}); 
352</script> 
share-alt