1<#if !entries?has_content>
2 <#if !themeDisplay.isSignedIn()>
3 ${renderRequest.setAttribute("PORTLET_CONFIGURATOR_VISIBILITY", true)}
4 </#if>
5
6 <div class="alert alert-info">
7 <@liferay_ui["message"] key="there-are-no-results" />
8 </div>
9</#if>
10
11<#assign nameInstancePublisher = randomNamespace />
12
13<section class="cards-cont${nameInstancePublisher}" id="cards-cont">
14
15<!---------------------- VARIABLES ------------------------>
16
17 <#list entries as entry>
18 <#assign docXml = saxReaderUtil.read(entry.getAssetRenderer().getArticle().getContentByLocale(locale)) />
19 <#assign viewURL = renderResponse.createRenderURL() />
20 <#assign applyImage = docXml.valueOf("//dynamic-element[@name='APLICAIMAGEN']") />
21 <#assign video = docXml.valueOf("//dynamic-element[@name='VIDEO']/dynamic-content/text()") />
22 <#assign link = docXml.valueOf("//dynamic-element[@name='URLALTER']/dynamic-content/text()") />
23
24 <#assign titulo = docXml.valueOf("//dynamic-element[@name='TITULO']/dynamic-content/text()") />
25
26 <#assign contenido = docXml.valueOf("//dynamic-element[@name='RESUMEN']/dynamic-content/text()") />
27
28 <#assign valores = entry.getAssetRenderer().getArticle()/>
29
30 <#assign groupId = valores["groupId"]/>
31
32 <#assign name = valores["urlTitle"]/>
33
34 <#assign applyUrlAlter = docXml.valueOf("//dynamic-element[@name='APLIENLACEALTER']/dynamic-content/text()")/>
35
36 <#assign assetRenderer = entry.getAssetRenderer() />
37
38 <#assign viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, assetRenderer, entry, !stringUtil.equals(assetLinkBehavior, "showFullContent"))
39 />
40
41 <#assign urlimagenNode = docXml.valueOf("//dynamic-element[@name='IMAGEN']/dynamic-content")/>
42 <#if urlimagenNode?has_content>
43 <#assign urlimagenString = urlimagenNode?string />
44 <#assign urlimagen = urlimagenString?eval />
45 </#if>
46
47 <div class="card-info${nameInstancePublisher}" id="card-info">
48 <div class="card-img${nameInstancePublisher}" id="card-img">
49 <#if getterUtil.getBoolean(applyImage)>
50 <#if urlimagen.url?has_content>
51 <img alt="${urlimagen.alt}" src='${urlimagen.url}' title="${titulo}">
52 <#else>
53 <img alt='${urlimagen["alt"]}' src='/documents/${urlimagen["groupId"]}/${urlimagen["classPK"]}/${urlimagen["name"]}/${urlimagen["uuid"]}' title="${titulo}">
54 </#if>
55 </#if>
56 <#if assetRenderer.hasEditPermission(themeDisplay.getPermissionChecker())>
57 <#assign editPortletURL = assetRenderer.getURLEdit(renderRequest, renderResponse, windowStateFactory.getWindowState("NORMAL"), themeDisplay.getURLCurrent())!"" />
58 <#if validator.isNotNull(editPortletURL)>
59 <a class="editOptionmas" href="${editPortletURL.toString()}">Editar ✐</a>
60 </#if>
61 </#if>
62 </div>
63 <div class="card-txt${nameInstancePublisher}" id="card-txt">
64 <div class="card-title${nameInstancePublisher}" id="card-title">${titulo}</div>
65 <div class="card-lead${nameInstancePublisher}" id="card-lead">${contenido}</div>
66 <div class="card-btn${nameInstancePublisher}" id="card-btn">
67 <#if getterUtil.getBoolean(applyUrlAlter)>
68 <a class="link${nameInstancePublisher}" href="${link}" target="${video}" id="GA4-btn">
69 Ver más
70 </a>
71 <#else>
72 <a class="link${nameInstancePublisher}" href="${viewURL}" target="_self" id="GA4-btn">
73 Ver más
74 </a>
75 </#if>
76 </div>
77 </div>
78
79 </div>
80 </#list>
81
82</section>
83
84<script>
85$(function(){
86
87 $('a[href*=#]').click(function() {
88
89 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
90 && location.hostname == this.hostname) {
91
92 var $target = $(this.hash);
93
94 $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
95
96 if ($target.length) {
97
98 var targetOffset = $target.offset().top;
99
100 $('html,body').animate({scrollTop: targetOffset}, 800);
101
102 return false;
103
104 }
105
106 }
107
108 });
109
110});
111</script>
112
113
114
115<!---------------------- ESTLOS BASICOS ------------------------>
116
117 <style>
118
119 .cards-cont${nameInstancePublisher} {
120 width: 100%;
121 display: flex;
122 justify-content: center;
123 flex-wrap: wrap;
124
125 }
126
127
128 .card-info${nameInstancePublisher} {
129
130 width: 250px;
131 height: 350px;
132 margin: 15px;
133 display:flex;
134 align-content:center;
135 align-items:center;
136 flex-wrap:wrap;
137 }
138
139 .card-img${nameInstancePublisher} {
140 width: 250px;
141 height: 350px;
142 border-radius: 10px;
143 -webkit-box-shadow: 0px 1px 12px 2px rgb(0 0 0 / 47%);
144 box-shadow: 0px 1px 12px 2px rgb(0 0 0 / 47%);
145 box-sizing: border-box;
146 background-position: center;
147 background-size: cover;
148 -webkit-transition: all 500ms ease-in-out; // IE 9
149 -moz-transition: all 500ms ease-in-out; // Firefox
150 -ms-transition: all 500ms ease-in-out; // Safari and Chrome
151 -o-transition: all 500ms ease-in-out; // Opera
152 transition: all 500ms ease-in-out;
153 position:relative;
154 display:flex;
155 }
156
157 .card-info${nameInstancePublisher}:hover .card-img${nameInstancePublisher} {
158 width: 250px;
159 height: 350px;
160 border-radius: 10px;
161 box-sizing: border-box;
162 background-position: center;
163 background-size: cover;
164 -moz-transform: scale(1.02);
165 -webkit-transform: scale(1.02);
166 -o-transform: scale(1.02);
167 -ms-transform: scale(1.02);
168 transform: scale(1.02);
169 }
170
171 .card-img${nameInstancePublisher} img{
172 vertical-align: middle;
173 border-style: none;
174 width: 100%;
175 height: 350px;
176 object-fit: cover;
177 object-position: center;
178 border-radius: 10px;
179 }
180
181 .card-txt${nameInstancePublisher} {
182 position: absolute;
183 display:flex;
184 padding: 20px;
185 color: #FFF;
186 opacity: 1;
187 transition: all 500ms ease-in-out;
188 width: 90%;
189 flex-wrap:wrap;
190 max-width: 250px;
191 }
192
193 .card-title${nameInstancePublisher} {
194 font-family: HelveticaBold;
195 font-size: 1rem;
196 transition: all 500ms ease-in-out;
197 width:100%;
198 }
199
200 .card-lead${nameInstancePublisher} {
201 font-family: HelveticaLight;
202 font-size: 0.9rem;
203 transition: all 500ms ease-in-out;
204 }
205
206 .card-btn${nameInstancePublisher} {
207 padding: 5px;
208 font-family: HelveticaLight;
209 border: 1px solid #fff;
210 width: 30%;
211 font-size: 0.8rem;
212 margin-top: 10px;
213 display: flex;
214 border-radius: 10px;
215 text-align: center;
216 /* margin: 0 auto; */
217 /* align-content: center; */
218 justify-content: center;
219 cursor: pointer;
220 opacity: 1;
221 }
222
223 .card-info${nameInstancePublisher}:hover .card-btn${nameInstancePublisher}{
224 background-color:#FFF;
225 color:#494949;
226 }
227
228 .card-btn${nameInstancePublisher} a{
229 color:#FFF;
230 text-decoration:none;
231 }
232
233 .card-info${nameInstancePublisher}:hover .card-btn${nameInstancePublisher} a{
234 color:#494949;
235
236 }
237
238
239 .editOptionmas{
240 position: absolute;
241 background-color: #173268;
242 padding: 2px 5px;
243 color: #FFF;
244 font-family:HelveticaLight;
245 display:flex;
246 flex-wrap:nowrap;
247 width: 85px;
248 top:0px;
249 justify-content: center;
250 border-radius:10px 0px 10px 0px;
251 }
252
253 .editOptionmas:hover{
254 text-decoration:none;
255 color:#FFF;
256 font-family:HelveticaBold;
257 }
258
259 </style>
