1<style> 

2   .container-noticia { 

3    display: inline-flex; 

4    width: 100%; 

5} 

6 

7.contnot { 

8    display: block; 

9    width: 31%; 

10    float: left; 

11    margin: 1%; 

12    height: auto; 

13    overflow: hidden; 

14} 

15 

16.image-container { 

17    width: 100%; 

18    height: 300px; 

19    background: #ffffff; /* Fondo sólido */ 

20    display: flex; 

21    justify-content: center; 

22    align-items: center; 

23    overflow: hidden; 

24} 

25 

26.image-container img { 

27    height: 100%; 

28    width: auto; 

29    object-fit: cover; 

30    transition: transform 0.3s ease; 

31} 

32 

33.image-container img:hover { 

34    transform: scale(1.05); 

35    z-index: 2; /* Asegura que la imagen se muestre completa */ 

36} 

37 

38.containerf { 

39    width: 100%; 

40    padding: 5px 0px; 

41    display: flex; 

42    justify-content: space-between; 

43    align-items: center; 

44    background: #ffffff; /* Fondo sólido */ 

45    opacity: 1; /* Opacidad completa */ 

46    font-size: 0.8em; 

47    font-weight: bold; 

48} 

49 

50.left { 

51    color: #333; 

52} 

53 

54.right { 

55    color: #a52a2a; 

56    text-decoration: none; 

57    transition: color 0.3s ease, transform 0.3s ease; 

58} 

59 

60.right:hover { 

61    color: #024966; 

62    transform: scale(1.05); 

63} 

64 

65#text-resumen { 

66    display: flex; 

67    justify-content: center; 

68    align-items: center; 

69    min-height: 80px; 

70    width: 100%; 

71    text-align: justify; 

72    border-radius: 10px; 

73} 

74 

75.text-titulo { 

76    display: flex; 

77    justify-content: center; 

78    align-items: center; 

79    height: 85px; 

80    width: 100%; 

81    min-height: 85px; 

82    text-align: center; 

83    border-radius: 10px; 

84} 

85 

86.text-titulo a { 

87    text-decoration: none; 

88    color: #A52A2A; 

89    text-transform: uppercase; 

90    display: block; 

91    font-weight: bold; 

92    font-size: calc(0.2em + 0.6vw); 

93    overflow-wrap: break-word; 

94    word-wrap: break-word; 

95    word-break: break-word; 

96    margin: 0; 

97    line-height: 1.0; 

98} 

99 

100.div-imgx { 

101    width: 100%; 

102    height: 300px; 

103    background-color: #ddd; 

104    display: flex; 

105    justify-content: center; 

106    align-items: center; 

107    overflow: hidden; 

108} 

109 

110.square { 

111    width: 100%; 

112    height: 100%; 

113    display: flex; 

114    justify-content: center; 

115    align-items: center; 

116    background: linear-gradient(135deg, #bb2026, #32639e); 

117    border-radius: 10px; 

118    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1); 

119    position: relative; 

120    overflow: hidden; 

121    transition: transform 0.5s, box-shadow 0.5s; 

122} 

123 

124.square:hover { 

125    transform: scale(1.05); 

126    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2); 

127} 

128 

129.text { 

130    color: white; 

131    font-size: 20px; 

132    font-weight: bold; 

133    text-align: center; 

134    z-index: 1; 

135    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Mejor contraste */ 

136} 

137 

138.square::before { 

139    content: ''; 

140    position: absolute; 

141    top: -50%; 

142    left: -50%; 

143    width: 200%; 

144    height: 200%; 

145    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%); 

146    transform: rotate(45deg); 

147    opacity: 0; 

148    transition: opacity 0.5s; 

149} 

150 

151.square:hover::before { 

152    opacity: 1; 

153} 

154 

155.fechader { 

156    font-weight: bold; 

157    text-align: right; 

158} 

159 

160.fechaizq { 

161    text-align: left; 

162} 

163 

164.link { 

165    display: inline-block; 

166    padding: 10px 20px; 

167    font-size: 18px; 

168    font-weight: bold; 

169    color: #ffffff; 

170    text-decoration: none; 

171    position: relative; 

172    transition: color 0.3s ease; 

173} 

174 

175.link::before, .link::after { 

176    content: ''; 

177    position: absolute; 

178    width: 0; 

179    height: 2px; 

180    background-color: #ddd; 

181    transition: width 0.3s ease; 

182} 

183 

184.link::before { 

185    bottom: 0; 

186    left: 0; 

187} 

188 

189.link::after { 

190    top: 0; 

191    right: 0; 

192} 

193 

194.link:hover { 

195    color: #ddd; 

196    text-decoration: none; 

197} 

198 

199.link:hover::before, .link:hover::after { 

200    width: 100%; 

201} 

202 

203.link:active { 

204    color: #fff; 

205} 

206 

207@media screen and (max-width: 990px) { 

208    .container-noticia { 

209        display: inline-block; 

210        width: 100%; 

211    } 

212    .div-text { 

213        display: inline-block; 

214        width: 100%; 

215    } 

216    .contnot { 

217        width: 100%; 

218        margin-bottom: 4%; 

219    } 

220    .image-container { 

221        width: 100%; /* Ancho completo en móviles */ 

222    } 

223    .text-titulo { 

224        min-height: 30px; 

225        height: auto; 

226        padding: 3% 0; 

227    } 

228    #text-resumen { 

229        font-size: calc(0.6em + 0.9vw); 

230        line-height: 1.3; 

231        min-height: auto; 

232    } 

233    .text-titulo a { 

234        font-size: calc(0.7em + 0.9vw); 

235        line-height: 1.2; 

236    } 

237    .news-summary { 

238        margin: 0; 

239        line-height: 1.4; 

240    } 

241    .containerf { 

242        font-size: calc(0.6em + 0.8vw); 

243    } 

244} 

245 

246@media screen and (max-width: 480px) { 

247    .container-noticia { 

248        display: inline-block; 

249        width: 100%; 

250    } 

251    .div-text { 

252        display: inline-block; 

253    } 

254    .contnot { 

255        width: 100%; 

256    } 

257    .div-img { 

258        display: none; 

259    } 

260    #text-fecha { 

261        color: #024966; 

262        background: #c9daef; 

263        text-align: right; 

264        font-weight: normal; 

265        opacity: 0.6; 

266        font-size: 14px; 

267        padding-right: 10px; 

268    } 

269    #text-resumen a { 

270        font-size: 14px; 

271    } 

272    #text-titulo { 

273        font-size: 16px; 

274        min-height: 25px; 

275    } 

276} 

277 

278.contnot { 

279    width: 100%; 

280    height: auto; 

281} 

282 

283@keyframes show { 

284    from { 

285        opacity: 0; 

286        scale: 25%; 

287    } 

288    to { 

289        opacity: 1; 

290        scale: 100%; 

291    } 

292} 

293 

294.contnot { 

295    view-timeline-name: --image; 

296    view-timeline-axis: block; 

297    animation-timeline: --image; 

298    animation-name: show; 

299    animation-range: entry 25% cover 30%; 

300    animation-fill-mode: both; 

301} 

302</style> 

303 

304<div class="container-noticia"> 

305#if (!$entries.isEmpty()) 

306    #foreach ($curEntry in $entries) 

307    #set($news-title =$curEntry.getTitle($locale)) 

308    #set($news-summary =$curEntry.getSummary($locale)) 

309    #set($renderer = $curEntry.getAssetRenderer()) 

310    #set($Article = $renderer.getArticle()) 

311    #set($document = $saxReaderUtil.read($Article.getContent())) 

312    #set($rootElement = $document.getRootElement()) 

313     

314    #set($xPathSelectorx = $saxReaderUtil.createXPath("dynamic-element[@name='imgAfiche']")) 

315    #set($imagen-noticia = $xPathSelectorx.selectSingleNode($rootElement).getStringValue())     

316    #set($EnlaceNot = $imagen-noticia.trim()) 

317     

318    #if($Article.getSmallImage()) 

319        #set($smallImageID = $Article.getSmallImageId()) 

320        #set($DIRsmallImageURL = "/image/image_gallery?img_id=") 

321        #set($smallImageURL = $DIRsmallImageURL+ "$smallImageID") 

322    #elseif($EnlaceNot != "") 

323        #set($smallImageURL = $EnlaceNot) 

324    #else 

325        #set($smallImageURL = "vacio") 

326    #end 

327     

328    #set($xPathSelectorx = $saxReaderUtil.createXPath("dynamic-element[@name='htmlContenido']")) 

329    #set($completa-noticia = $xPathSelectorx.selectSingleNode($rootElement).getStringValue()) 

330     

331    #set($ResumenNot = $news-summary.trim()) 

332     

333    #if($ResumenNot != "") 

334        #if($ResumenNot.length()>=150)  

335            #foreach( $fnt in [140 .. 150 ] )  

336                #if($ResumenNot.charAt($fnt)== ' '||$ResumenNot.charAt($fnt)==','||$ResumenNot.charAt($fnt)=='.') 

337                    #set($resumen = $ResumenNot.substring(0, $fnt) + "...") 

338                    #break  

339                #end  

340            #end  

341        #else 

342            #set($resumen = $ResumenNot) 

343        #end 

344    #else 

345        #set($htmlContent = $completa-noticia.trim()) 

346        #set($textoSinFormato = $htmlContent.replaceAll("<[^>]*>", "") 

347     

348        #if($textoSinFormato.length()>=150)  

349            #foreach( $fnt in [140 .. 150] )  

350                #if($textoSinFormato.charAt($fnt)== ' '||$textoSinFormato.charAt($fnt)==','||$textoSinFormato.charAt($fnt)=='.') 

351                    #set($resumen = $textoSinFormato.substring(0, $fnt) + "...") 

352                    #break  

353                #end  

354            #end  

355        #else 

356            #set($resumen = $textoSinFormato) 

357        #end 

358    #end 

359     

360    #set($xPathSelector = $saxReaderUtil.createXPath("dynamic-element[@name='EnlaceNot']")) 

361    #set($enlace-noticia = $xPathSelector.selectSingleNode($rootElement).getStringValue()) 

362     

363    #set($xPathSelector = $saxReaderUtil.createXPath("dynamic-element[@name='Fecha2369']")) 

364    #set($fecha-noticia = $xPathSelector.selectSingleNode($rootElement).getStringValue()) 

365    #set($fechiniclass_Data = $getterUtil.getString($fecha-noticia)) 

366    #set($fechiniclass_DateObj = $dateUtil.parseDate("yyyy-MM-dd",$fechiniclass_Data, $locale))     

367     

368    #set($aaa = $renderer.getGroupId()) 

369    #set($urlnoticia = $Article.getUrlTitle()) 

370    #set($page_url = "/web/guest/")  

371    #set($instance_id = "")  

372    #set($page_url=$page_url+ 57)  

373    #set($instance_id = "sIpuYXdbB9M8") 

374    #set($path-page-noticia="${page_url}/-/asset_publisher/${instance_id}/content/$urlnoticia/$aaa") 

375 

376    <div class="contnot" align="center"> 

377        #if($smallImageURL == "vacio") 

378            <div class="div-imgx"> 

379                <div class="square"> 

380                    <p class="text" style="text-transform: uppercase"><a class="link" href="$path-page-noticia">$news-title</a></p> 

381                </div> 

382            </div>     

383        #else 

384            <a href="$path-page-noticia"> 

385                <div class="image-container"> 

386                    <img alt="$news-title" src="$smallImageURL" /> 

387                </div> 

388            </a> 

389        #end 

390         

391        <div class="div-text"> 

392            <div class="text-titulo"> 

393                <a href="$path-page-noticia">$news-title</a> 

394            </div> 

395             

396            <div id="text-resumen"> 

397                <p class="news-summary">$resumen</p> 

398            </div> 

399             

400            <div class="containerf"> 

401                <span class="left">$dateUtil.getDate($fechiniclass_DateObj, "dd", $locale) de <span style="text-transform: capitalize">$dateUtil.getDate($fechiniclass_DateObj, "MMMM", $locale)</span></span> 

402                <a class="right" href="$path-page-noticia">Leer más</a> 

403            </div> 

404        </div> 

405    </div> 

406    #end 

407#else 

408    <h2>No se encontraron noticias.</h2> 

409#end 

410</div>