1<#if entries?has_content> 

2  <div class="container my-5"> 

3    <div class="row"> 

4      <#list entries as curEntry> 

5        <#assign assetRenderer = curEntry.getAssetRenderer() /> 

6        <#assign item = assetRenderer.getArticle() /> 

7        <#list item.document.rootElement.elements() as dynamicElement> 

8          <#if dynamicElement.attributeValue("field-reference") == "image"> 

9            <#assign imageJSONString = dynamicElement.element("dynamic-content").getText() /> 

10            <#attempt> 

11              <#assign imageUrl = jsonFactoryUtil.createJSONObject(imageJSONString).getString("url") /> 

12            <#recover> 

13              <#assign imageUrl = "" /> 

14            </#attempt> 

15            <#if imageUrl?has_content> 

16              <div class="col-md-6 col-lg-4 mb-4"> 

17                <div class="card shadow border-0 h-100"> 

18                  <img src="${imageUrl}" class="card-img-top img-fluid rounded-top" alt="${curEntry.getTitle(locale)}"> 

19                  <div class="card-body"> 

20                    <h5 class="card-title">${curEntry.getTitle(locale)}</h5> 

21                    <p class="card-text"> 

22                      <#if dynamicElement.attributeValue("field-reference") == "content"> 

23                        <#assign content = dynamicElement.element("dynamic-content").getText()?truncate(200)> 

24                        ${content} 

25                      </#if> 

26                    </p> 

27                    <a href="/web/am/w/${item.urlTitle}" class="btn btn-outline-primary btn-sm stretched-link">ተጨማሪ ያንብቡ</a> 

28                    <p class="card-text mt-2"><small class="text-muted">Last updated ${curEntry.modifiedDate?datetime} ago</small></p> 

29                  </div> 

30                </div> 

31              </div> 

32            </#if> 

33          </#if> 

34        </#list> 

35      </#list> 

36    </div> 

37  </div> 

38</#if> 

39 

40<style> 

41.card { 

42  position: relative; 

43  overflow: hidden; 

44  border-radius: 10px; 

45  transition: transform 0.3s ease, box-shadow 0.3s ease; 

46} 

47 

48.card:hover { 

49  transform: scale(1.05); 

50  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 

51} 

52 

53.card-img-top { 

54  height: 200px; /* Adjust as needed */ 

55  object-fit: cover; 

56  border-radius: 10px 10px 0 0; 

57} 

58 

59.card-body { 

60  position: absolute; 

61  bottom: 0; 

62  left: 0; 

63  width: 100%; 

64  background-color: rgba(255, 255, 255, 0.9); 

65  transition: transform 0.3s ease, opacity 0.3s ease; 

66  transform: translateY(100%); 

67  opacity: 0; 

68} 

69 

70.card:hover .card-body { 

71  transform: translateY(0); 

72  opacity: 1; 

73} 

74 

75.btn-outline-primary { 

76  color: #007bff; 

77  border-color: #007bff; 

78} 

79 

80.btn-outline-primary:hover { 

81  color: #fff; 

82  background-color: #007bff; 

83  border-color: #007bff; 

84} 

85 

86.text-muted { 

87  font-size: 0.875rem; 

88} 

89</style>