La Regalina. Valdés

1<#include "${templatesPath}/NAVIGATION-MACRO-FTL" /> 

2 

3<#assign portletId = portletTool.getPortletId(request)/> 

4 

5<#assign colsValue = "col-12 col-sm-6 col-lg-3" /> 

6<#if cols?has_content && cols=="custom" && colsCssClass?has_content> 

7	<#assign colsValue = colsCssClass /> 

8<#else> 

9	<#if cols?has_content && cols!="0" && cols!="auto" && cols!="custom"> 

10		<#assign colsMap = { 

11			"0": "col", 

12			"auto": "col", 

13			"custom": colsCssClass, 

14			"1": "col-12",  

15			"2": "col-sm-6 col-12",  

16			"3": "col-lg-4 col-md-6 col-sm-6 col-12", 

17			"4": "col-lg-3 col-md-4 col-sm-6 col-12", 

18			"5": "col-lg-2dot4 col-md-6", 

19			"6": "col-sm-2 col-12", 

20			"7": "col-lg-1dot7 col-12" 

21		} /> 

22		<#assign colsValue = colsMap[cols]/>	 

23	</#if> 

24</#if> 

25 

26<#assign navItems = entries /> 

27<#if navItems?has_content> 

28 

29	<#assign uuidBannerDefault = themeDisplay.getLayoutSet().getSettingsProperty("banner")!""/> 

30	<#assign pathBannerDefault = ""/> 

31	<#if uuidBannerDefault!=""> 

32		<#assign pathBannerDefault= dlTool.getPathByUuid(uuidBannerDefault, groupId)/> 

33	</#if> 

34	<nav class="template template-image template-image-carousel"> 

35		 

36		 

37			<div id="${portletId}slick" class="slick"> 

38		 

39			<#list navItems as navItem>	 

40				<#if validator.isNotNull(navItem.getLayout())> 

41					<#assign layout = navItem.getLayout()! /> 

42					<#assign layoutName = layout.getName(locale) /> 

43					<#assign layoutTitle = layoutTool.getTitle(layout, locale)! /> 

44					<#assign layoutDescription = layoutTool.getDescription(layout, locale)! /> 

45					<#assign layoutImageUuid = layoutTool.getLayoutSetting(layout, "image")! /> 

46					<#assign layoutImage = dlTool.getThumbnailByUuid(layoutImageUuid, themeDisplay.getScopeGroupId(), "3", pathBannerDefault)! /> 

47					<div class="slide"> 

48						<a class="card" href="${navItem.getURL()}" title="${languageUtil.format(request, 'go-to-x', layoutName)}"> 

49							<span class="d-block image-wrapper aspect-ratio-bg-cover aspect-ratio-4-to-3" style="background-image: url('${layoutImage}');"> 

50								<img class="hide-accessible" src="${layoutImage}" alt="${languageUtil.get(request,'image')} ${layoutName}"/> 

51								<div class="card-hover"> 

52									<#if validator.isNotNull(layoutTitle)> 

53										<p class="card-text">${layoutTitle}</p> 

54									</#if> 

55								</div>								 

56							</span> 

57							<span class="card-body"> 

58								<span class="card-title text-center" >${layoutName}</span> 

59							</span> 

60						</a> 

61					</div> 

62				</#if> 

63			</#list> 

64			</div>			 

65		 

66	</nav> 

67</#if> 

68<script type="text/javascript"> 

69 

70AUI().ready(function(A){ 

71	 

72	// bootstrap 4 breakpoints 

73	var breakpoint = { 

74	  // small screen / phone 

75	  sm: 576, 

76	  // medium screen / tablet 

77	  md: 768, 

78	  // large screen / desktop 

79	  lg: 992, 

80	  // extra large screen / wide desktop 

81	  xl: 1200 

82	}; 

83 

84	// bootstrap 4 responsive multi column slick carousel 

85	$('#${portletId}slick').slick({ 

86	  autoplay: true, 

87	  autoplaySpeed: 3000, 

88	  draggable: true, 

89	  pauseOnHover: false, 

90	  infinite: true, 

91	  dots: false, 

92	  arrows: true, 

93	  speed: 1000, 

94	   

95	  mobileFirst: true, 

96	   

97	  slidesToShow: 1, 

98	  slidesToScroll: 1, 

99	   

100	  responsive: [{ 

101		  breakpoint: breakpoint.sm, 

102		  settings: { 

103			slidesToShow: 2, 

104			slidesToScroll: 2 

105		  } 

106		}, 

107		{ 

108		  breakpoint: breakpoint.md, 

109		  settings: { 

110			slidesToShow: 3, 

111			slidesToScroll: 3 

112		  } 

113		}, 

114		{ 

115		  breakpoint: breakpoint.lg, 

116		  settings: { 

117			slidesToShow: 4, 

118			slidesToScroll: 4 

119		  } 

120		}, 

121		{ 

122		  breakpoint: breakpoint.xl, 

123		  settings: { 

124			slidesToShow: 6, 

125			slidesToScroll: 6 

126		  } 

127		} 

128	  ] 

129	}); 

130 

131}); 

132</script>