Slide 1 Title
Slide 1 Subtitle
Slide 2 Title
Slide 2 Subtitle
Slide 3 Title
Slide 3 Subtitle
Latest News
An error occurred while processing the template.
The following has evaluated to null or missing:
==> dynamicElement.element("dynamic-content") [in template "17616084546371#20119#264612" at line 17, column 40]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign imageJSONString = dynamicElem... [in template "17616084546371#20119#264612" at line 17, column 13]
----
1<#if entries?has_content>
2 <div class="container my-4">
3 <div class="row gx-4 gy-4">
4 <#list entries as curEntry>
5 <#assign assetRenderer = curEntry.getAssetRenderer() />
6 <#assign item = assetRenderer.getArticle() />
7 <#assign imageUrl = "" />
8 <#assign content = "" />
9 <#assign shortDescription = "" />
10 <#assign publishDate = curEntry.getPublishDate()?string("MMMM dd, yyyy") />
11 <#assign viewCount = curEntry.getViewCount()!"0" />
12 <#assign isBreaking = curEntry?is_first />
13
14 <#-- Process all dynamic elements first -->
15 <#list item.document.rootElement.elements() as dynamicElement>
16 <#if dynamicElement.attributeValue("field-reference") == "image">
17 <#assign imageJSONString = dynamicElement.element("dynamic-content").getText()!"" />
18 <#if imageJSONString?has_content>
19 <#attempt>
20 <#assign imageUrl = jsonFactoryUtil.createJSONObject(imageJSONString).getString("url")!"" />
21 <#recover>
22 </#attempt>
23 </#if>
24 <#elseif dynamicElement.attributeValue("field-reference") == "content">
25 <#assign content = dynamicElement.element("dynamic-content").getText()!"" />
26 <#elseif dynamicElement.attributeValue("field-reference") == "shortDescription">
27 <#assign shortDescription = dynamicElement.element("dynamic-content").getText()!"" />
28 </#if>
29 </#list>
30
31 <#-- Only render if we have an image -->
32 <#if imageUrl?has_content>
33 <div class="col-md-6 col-lg-4">
34 <div class="card shadow border-0 h-100 news-card">
35 <#if isBreaking>
36 <div class="position-absolute top-0 start-0 bg-danger text-white px-3 py-1 m-2 rounded">
37 <i class="fas fa-bolt me-1"></i> አዲስ
38 </div>
39 </#if>
40
41 <div class="image-container position-relative">
42 <img src="${imageUrl}" class="card-img-top img-fluid rounded-top"
43 alt="${curEntry.getTitle(locale)?html}">
44
45
46 <div class="image-caption p-3">
47 <h5 class="card-title mb-1 fw-bold">${curEntry.getTitle(locale)}</h5>
48 <#if shortDescription?has_content>
49 <p class="mb-0 small text-dark">${shortDescription}</p>
50 </#if>
51 </div>
52 </div>
53
54 <div class="card-body">
55 <p class="card-text text-dark">
56 ${content?replace("<[^>]*>", "", "r")?truncate(200)}
57 </p>
58 <div class="d-flex justify-content-between align-items-center mt-3">
59 <a href="/web/eng/w/${item.urlTitle}"
60 class="btn btn-sm stretched-link"
61 style="background-color: #007bff; color: #ffffff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: normal; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); padding: 10px 20px; border-radius: 8px;">
62 ተጨማሪ ያንብቡ <i class="fas fa-arrow-right ms-1"></i>
63</a>
64
65
66 <small class="text-muted">
67 <i class="far fa-calendar-alt me-1"></i> ${publishDate}
68 </small>
69 </div>
70 </div>
71 </div>
72 </div>
73 </#if>
74 </#list>
75 </div>
76 </div>
77<#else>
78 <div class="alert alert-info">No News!</div>
79</#if>
80
81<style>
82 /* Current News Alert Styles */
83 .alert-danger {
84 background-color: #f8d7da;
85 border-left: 5px solid #dc3545;
86 border-radius: 0;
87 animation: pulse 2s infinite;
88 }
89 .container {
90 margin-top: 2px !important;
91}
92.news-card:hover {
93 background-color: #d0e8ff; /* Light blue */
94 transform: translateY(5px);
95 box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.15);
96}
97.row.g-4 {
98 display: flex;
99 flex-wrap: wrap;
100 gap: 20px; /* Adjust this value for more/less spacing */
101}
102.col-md-6.col-lg-4 {
103 padding: 20px; /* Adjust padding as needed */
104}
105
106
107
108
109 @keyframes pulse {
110 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
111 70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
112 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
113 }
114
115 /* Section Header Styles */
116 .section-title {
117 font-size: 2rem;
118 font-weight: 700;
119 color: #2c3e50;
120 position: relative;
121 display: inline-block;
122 }
123
124 .section-title:after {
125 content: '';
126 position: absolute;
127 width: 50%;
128 height: 3px;
129 background: linear-gradient(to right, #e74c3c, #3498db);
130 bottom: -10px;
131 left: 25%;
132 }
133
134 /* News Card Styles */
135 .news-card {
136 position: relative;
137 overflow: hidden;
138 border-radius: 10px;
139 transition: all 0.3s ease;
140 border: none;
141 }
142
143 .news-card:hover {
144 transform: translateY(-5px);
145 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
146 }
147
148 .image-container {
149 overflow: hidden;
150 border-radius: 10px 10px 0 0;
151 }
152
153 .card-img-top {
154 height: 200px;
155 width: 100%;
156 object-fit: cover;
157 transition: transform 0.5s ease;
158 }
159
160 .news-card:hover .card-img-top {
161 transform: scale(1.05);
162 }
163
164 .image-caption {
165 background-color: rgba(255, 255, 255, 0.9);
166 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
167 }
168
169 .card-body {
170 position: absolute;
171 bottom: 0;
172 left: 0;
173 width: 100%;
174 background-color: rgba(255, 255, 255, 0.98);
175 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
176 transform: translateY(100%);
177 opacity: 0;
178 padding: 1.5rem;
179 border-radius: 0 0 10px 10px;
180 }
181
182 .news-card:hover .card-body {
183 transform: translateY(0);
184 opacity: 1;
185 }
186
187 .btn-primary {
188 background-color: #e74c3c;
189 border-color: #e74c3c;
190 transition: all 0.3s ease;
191 }
192
193 .btn-primary:hover {
194 background-color: #c0392b;
195 border-color: #c0392b;
196 }
197
198 @media (max-width: 768px) {
199 .card-body {
200 position: relative;
201 transform: none;
202 opacity: 1;
203 background-color: white;
204 }
205
206 .news-card:hover {
207 transform: none;
208 }
209
210 .alert-danger {
211 font-size: 0.9rem;
212 }
213 }
214</style>
215
216<script>
217// You can add this to your theme's main.js or include it separately
218document.addEventListener('DOMContentLoaded', function() {
219 // Example of updating the current news alert (can be replaced with dynamic content)
220
221
222 let currentIndex = 0;
223 const newsElement = document.getElementById('currentNewsText');
224
225 function rotateNews() {
226 newsElement.textContent = currentNews[currentIndex];
227 currentIndex = (currentIndex + 1) % currentNews.length;
228 }
229
230 // Rotate news every 10 seconds
231 rotateNews();
232 setInterval(rotateNews, 10000);
233});
234</script>