1<#assign langIdm = themeDisplay.getLanguageId() />  

2<#assign url_public = themeDisplay.getPathFriendlyURLPublic()> 

3<#assign JournalArticleLocalServiceUtil = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")/> 

4    <#if themeDisplay?? > 

5        <#attempt> 

6            <#assign instanceIdBc7p = themeDisplay.getPortletDisplay().getInstanceId() > 

7        <#recover> 

8            <#assign instanceIdBc7p = "test" > 

9        </#recover> 

10    </#if> 

11 

12 

13<#assign articles = []/> 

14 

15<#if contenido1.getData()?has_content??> 

16    <#if contenido1.getData()?has_content && contenido1.getData()?matches("[0-9]+") > 

17        <#assign article = JournalArticleLocalServiceUtil.getLatestArticle(contenido1.getData()?number)> 

18        <#assign articles = articles + [article]/> 

19    </#if> 

20</#if> 

21<#if contenido2.getSiblings()?has_content>  

22    <#list contenido2.getSiblings() as cur_contenido2> 

23        <#if cur_contenido2.getData()?has_content> 

24            <#assign article2 = JournalArticleLocalServiceUtil.getLatestArticle(cur_contenido2.getData()?number)> 

25            <#assign articles = articles + [article2]/> 

26        </#if> 

27    </#list>  

28</#if> 

29 

30<#assign con = 0/> 

31<#assign urlItem = ""/> 

32<div class="container-fluid container-it bc7p"> 

33    <#--div class="container-xxxxl"--> 

34        <div class="row no-gutters justify-content-center"> 

35            <div class="col-12 text-center text-lg-left"> 

36            <#if getterUtil.getBoolean(showTitle.getData()) && showTitle.titulo.getData() != ""> 

37                <h1 class="bc7p-titulo  mt-5 mb-0" style="display: inline-flex;align-items: center;"> 

38                    <i class="fas fa-circle text-white circulo-bc7-p"></i> 

39                    ${showTitle.titulo.getData()} 

40                    </h1> 

41            </#if> 

42                <#if getterUtil.getBoolean(showSubtitle.getData()) && showSubtitle.subtitulo.getData() != ""> 

43                <p class="bc7p-subtitulo  mt-5 mb-5">${showSubtitle.subtitulo.getData()}</p> 

44            </#if> 

45            </div> 

46        </div> 

47        <div class="row no-gutters justify-content-center"> 

48            <div class="col-10"> 

49                <div class="row no-gutters align-items-start"> 

50                <div id="bc7p-${instanceIdBc7p}" class="carousel owl-carousel"> 

51        <#if articles?has_content>  

52            <#list articles as cur_art>  

53                <#assign con ++> 

54                 <#assign document = saxReaderUtil.read(cur_art.getContentByLocale(locale)) /> 

55                    

56                    <#assign root = document.getRootElement()> 

57                    <#assign titulo = root.selectSingleNode("dynamic-element[@name='titulo']/dynamic-content").getText()/> 

58                    <#assign abstract = root.selectSingleNode("dynamic-element[@name='abstract']/dynamic-content").getText()/> 

59 

60                    <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='img']")> 

61                    <#assign imgNews = xPathSelector.selectSingleNode(root).getStringValue()> 

62                     

63                    <#if imgNews?? > 

64                        <#attempt> 

65                            <#assign imgJson = jsonFactoryUtil.createJSONObject(imgNews)> 

66                            <#assign urlimg = "/documents/"+ imgJson.groupId +"/" +imgJson.fileEntryId +"/"+ imgJson.name +"/"+imgJson.uuid > 

67                        <#recover> 

68                            <#assign urlimg = "" > 

69                        </#recover> 

70                    </#if> 

71 

72                    <#assign Basica_Liga = themeDisplay.getSiteGroup().getExpandoBridge().getAttribute("Basica_Liga")> 

73                    <#if cur_art.getStructureId() == Basica_Liga > 

74                        <#assign link = root.selectSingleNode("dynamic-element[@name='link']/dynamic-content").getText()/> 

75                        <#assign linkjson = jsonFactoryUtil.createJSONObject(link)> 

76                        <#assign url  = root.selectSingleNode("dynamic-element[@name='url']/dynamic-content").getText()/> 

77                    </#if>           

78                     

79                        <#if (cur_art.getStructureId() == Basica_Liga && link?has_content) && url == ""> 

80                            <#assign linkid = link?split("@")> 

81                            <#assign groupUtil = serviceLocator.findService('com.liferay.portal.kernel.service.GroupLocalService')> 

82                            <#assign group = groupUtil.getGroup(cur_art.getGroupId())> 

83                            <#assign groupFriendly = group.getFriendlyURL()> 

84                            <#assign layoutService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService")> 

85                            <#assign layout = layoutService.getLayout(linkjson.getLong("groupId") , linkjson.getBoolean("privateLayout"),linkjson.getLong("layoutId"))> 

86                            <#assign layoutFriendly = layout.getFriendlyURL()> 

87                            <#assign link_page = "${url_public}${groupFriendly}${layoutFriendly}"> 

88                            <#assign urlItem = link_page/> 

89                        </#if> 

90                        <#if (cur_art.getStructureId() == Basica_Liga && url != "") && link == ""> 

91                            <#assign urlItem = url> 

92                        </#if> 

93 

94            <div class="cardItem-bc7p"> 

95                <a href="${urlItem}"> 

96                    <div class="img-bc7p" style="background-image: url('${urlimg}');"></div>  

97                    <!--img src=""--> 

98                <h1 class="text-center titulo-card mt-4 mb-3">${titulo}</h1> 

99                <p class="subtitulo-card text-center">${abstract}</p> 

100                </a> 

101            </div>                                             

102            </#list> 

103        </#if> 

104                  </div>      

105          </div> 

106         

107            </div> 

108        </div> 

109        <div class="row no-gutters vinculo d-none d-lg-flex"> 

110            <div class="col-lg-auto col-md-12 col-sm-12 text-center order-lg-12 mt-5 mb-lg-5 pt-3 pr-3 pb-3 pl-3"> 

111            <a href="${TextoEnlace.Vinculo.getData()}" class="link-bc7p-back btnmas"> 

112                <i class="fal fa-plus-circle"></i> 

113                <p>${TextoEnlace.getData()}</p> 

114            </a> 

115            </div> 

116        </div> 

117    <#--/div--> 

118</div> 

119<div class="row no-gutters align-items-center vinculo d-flex d-lg-none container-it" style="height: 80px;"> 

120            <div class="col-lg-auto col-md-12 col-sm-12 text-center order-lg-12"> 

121              <a href="${TextoEnlace.Vinculo.getData()}" class="link-bc7p-back btnmas"> 

122                <i class="fal fa-plus-circle"></i> 

123                <p>${TextoEnlace.getData()}</p> 

124            </a> 

125            </div> 

126        </div> 

127<style type="text/css"> 

128.bc7p{ 

129    background-color: #f3edea; 

130} 

131.bc7p-titulo{ 

132    font-family: 'Degular-Bold'; 

133    font-size: 2.3em; 

134    font-weight: bold; 

135    font-stretch: normal; 

136    font-style: normal; 

137    line-height: normal; 

138    letter-spacing: 1.11px; 

139    padding-bottom: 2em; 

140    color: #00447d; 

141    /*text-transform: uppercase;*/ 

142} 

143.cardItem-bc7p .img-bc7p { 

144  border-radius: 20px; 

145  margin-bottom: 0 auto !important; 

146} 

147@media (min-width: 300px){ 

148.cardItem-bc7p { 

149    padding: 20px 20px 43px; 

150    border-radius: 20px; 

151    background-color: #fff; 

152} 

153.cardItem-bc7p .img-bc7p { 

154    height: 227px; 

155    margin-bottom: 24px; 

156} 

157} 

158 

159@media (min-width: 768px){ 

160.cardItem-bc7p { 

161  margin: 0 15px 0 0; 

162  padding: 15px 12px 27px 18px; 

163  border-radius: 20px; 

164  background-color: #fff; 

165} 

166    .cardItem-bc7p .img-bc7p { 

167        height: 146px; 

168        margin-bottom: 17px; 

169    } 

170} 

171@media (min-width: 992px) { 

172.vinculo{ 

173justify-content: flex-end !important; 

174} 

175.cardItem-bc7p { 

176  background-color: #fff; 

177  height: auto; 

178  padding: 26px; 

179} 

180.cardItem-bc7p .img-bc7p{ 

181    height: 227px; 

182    margin-bottom: 28px; 

183} 

184.circulo-bc7-p{ 

185    font-size:32px; 

186    padding-right: 20px; 

187} 

188} 

189@media(min-width:1920px){ 

190    .cardItem-bc7p .img-bc7p { 

191        height: 304px; 

192        margin-bottom: 38px; 

193    } 

194} 

195.owl-prev { 

196    position: absolute; 

197    top: 50%; 

198    margin-left: -10%; 

199    display: block !important; 

200} 

201.owl-next { 

202    position: absolute; 

203    top: 50%; 

204    right: -10.2%; 

205    display: block !important; 

206} 

207button.owl-next:focus, button.owl-prev:focus { 

208    outline: unset !important; 

209} 

210 

211 

212.titulo-card{ 

213  font-family: 'Degular-Bold'; 

214  font-size: 1.5em; 

215  font-weight: bold; 

216  font-stretch: normal; 

217  font-style: normal; 

218  line-height: normal; 

219  letter-spacing: 0.44px; 

220  color: #2b333a; 

221} 

222.subtitulo-card { 

223  font-family: 'Degular-Light'; 

224  font-size: 1.5em; 

225  font-weight: 300; 

226  font-stretch: normal; 

227  font-style: normal; 

228  line-height: normal; 

229  letter-spacing: 0.25px; 

230  color: #666666; 

231} 

232.link-bc7p { 

233  width: 143px; 

234  height: 40px; 

235  padding: 10px 15.7px 10px 20px; 

236  background-color: #fff; 

237  font-family: 'Degular-Bold'; 

238  font-size: 1.1em; 

239  font-weight: bold; 

240  font-stretch: normal; 

241  font-style: normal; 

242  line-height: normal; 

243  letter-spacing: 0.35px; 

244  text-align: left; 

245  color: #004270; 

246  text-transform: uppercase; 

247} 

248 

249.link-bc7p:hover{ 

250    color: #004270;    

251} 

252 

253#bc7p-${instanceIdBc7p} button.owl-prev i , #bc7p-${instanceIdBc7p} button.owl-next i { 

254  font-size: 40px; 

255} 

256button.owl-prev, button.owl-next { 

257    color: #42b4e3 !important; 

258} 

259.bc7p-subtitulo { 

260  font-family: 'Degular-Regular'; 

261  font-size: 1.6em; 

262  font-weight: normal; 

263  font-stretch: normal; 

264  font-style: normal; 

265  line-height: 1.54; 

266  letter-spacing: 0px; 

267  text-align: center; 

268  color: #666666; 

269} 

270#bc7p-${instanceIdBc7p}.owl-dot{ 

271  height: 10px; 

272  width: 10px; 

273  margin: 0 5px; 

274  outline: none; 

275  border-radius: 50%; 

276  transition: all 0.3s ease; 

277} 

278#bc7p-${instanceIdBc7p} .owl-dot { 

279    height: 10px; 

280    width: 10px; 

281    margin: 0 5px; 

282    outline: 0; 

283    border-radius: 50%; 

284    transition: all .3s ease; 

285} 

286#bc7p-${instanceIdBc7p} .owl-dots { 

287    text-align: center !important; 

288    -webkit-tap-highlight-color: transparent; 

289    margin-top: 40px; 

290    margin-bottom: 40px; 

291} 

292#bc7p-${instanceIdBc7p}  button.owl-dot { 

293    background-color: gray !important; 

294} 

295 

296#bc7p-${instanceIdBc7p} .owl-dot.active, #bc7p-${instanceIdBc7p} .owl-dot:hover { 

297    background: #fff !important; 

298} 

299.vinculo{ 

300justify-content: center; 

301} 

302.cardItem-bc7p a { 

303  text-decoration: none; 

304} 

305@media(min-width:300px) and (max-width: 991.5px){ 

306    .bc7p-titulo { 

307        color:#666666; 

308        text-transform:capitalize; 

309        font-size: 2em; 

310    }   

311    .link-bc7p { 

312        height:  80px; 

313    }  

314    .circulo-bc7-p{ 

315        font-size:24px; 

316        padding-right: 20px; 

317    } 

318} 

319@media(min-width:767px) and (max-width:991.5px){ 

320.cardItem-bc7p { 

321    margin-bottom: 60px; 

322} 

323} 

324.cardItem-bc7p .img-bc7p { 

325    background-size:cover; 

326    background-position: center; 

327    background-repeat: no-repeat; 

328} 

329#bc7p-${instanceIdBc7p} .subtitulo-card { 

330    display: -webkit-box; 

331    -webkit-line-clamp: 5; 

332    -webkit-box-orient: vertical; 

333    overflow: hidden; 

334    text-overflow: ellipsis;   

335} 

336#bc7p-${instanceIdBc7p} .cardItem-bc7p { 

337    height: 565px; 

338} 

339#bc7p-${instanceIdBc7p} .titulo-card{ 

340    display: -webkit-box; 

341    -webkit-line-clamp: 2; 

342    -webkit-box-orient: vertical; 

343    overflow: hidden; 

344    text-overflow: ellipsis; 

345} 

346</style> 

347<script> 

348$( document ).ready(function() { 

349  $("#bc7p-${instanceIdBc7p}").owlCarousel({ 

350    margin: 28, 

351    loop: true, 

352    autoplay: true, 

353    autoplayTimeout: 5000, 

354    autoplayHoverPause: true, 

355    dots: false, 

356    nav: true, 

357    startPosition  : 0, 

358    navText: ['<i class="fal fa-chevron-circle-left"></i>','<i class="fal fa-chevron-circle-right"></i>'], 

359    responsive: { 

360      0:{ 

361        items:1, 

362        nav: false, 

363        dots: true 

364      }, 

365      767:{ 

366        items:2, 

367        dots:true 

368      }, 

369      1281:{ 

370        items:3 

371      } 

372    } 

373  }); 

374  }); 

375 

376</script>