Widget:UPMakingADifference: Difference between revisions
No edit summary |
No edit summary |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
<div class="update-news"> | <div class="update-news update-making-difference"> | ||
<div class="update-online-loading"> | <div class="update-online-loading"> | ||
| Line 21: | Line 20: | ||
<div class="update-online-date"></div> | <div class="update-online-date"></div> | ||
<h2 class="update-online-title"></h2> | <h2 class="update-online-title" style="color: #000000 !important;"></h2> | ||
<div class="update-online-excerpt"></div> | <div class="update-online-excerpt"></div> | ||
| Line 42: | Line 41: | ||
/* | /* | ||
* | * Find this widget instance | ||
*/ | */ | ||
var widgets = | var widgets = document.querySelectorAll('.update-news'); | ||
var widget = widgets[widgets.length - 1]; | |||
var widget = | |||
if (!widget) { | if (!widget) { | ||
return; | return; | ||
} | } | ||
/* | /* | ||
* | * Find elements inside this widget | ||
*/ | */ | ||
var loading = | var loading = widget.querySelector('.update-online-loading'); | ||
var content = widget.querySelector('.update-online-content'); | |||
var image = widget.querySelector('.update-online-image'); | |||
var content = | var title = widget.querySelector('.update-online-title'); | ||
var excerpt = widget.querySelector('.update-online-excerpt'); | |||
var link = widget.querySelector('.update-online-link'); | |||
var image = | var dateElement = widget.querySelector('.update-online-date'); | ||
var title = | |||
var excerpt = | |||
var link = | |||
var dateElement = | |||
/* | /* | ||
* | * Making a Difference API | ||
* Category ID: 5063 | * Category ID: 5063 | ||
*/ | */ | ||
| Line 90: | Line 71: | ||
'https://up.edu.ph/wp-json/wp/v2/posts' + | 'https://up.edu.ph/wp-json/wp/v2/posts' + | ||
'?categories=5063&per_page=1&_embed'; | '?categories=5063&per_page=1&_embed'; | ||
/* | /* | ||
* | * Retrieve the latest article | ||
*/ | */ | ||
| Line 113: | Line 93: | ||
if (!posts || posts.length === 0) { | if (!posts || posts.length === 0) { | ||
throw new Error('No articles found'); | throw new Error( | ||
'No Making a Difference articles found' | |||
); | |||
} | } | ||
var post = posts[0]; | var post = posts[0]; | ||
/* | /* | ||
| Line 123: | Line 104: | ||
*/ | */ | ||
title.innerHTML = | title.innerHTML = post.title.rendered; | ||
/* | /* | ||
| Line 131: | Line 110: | ||
*/ | */ | ||
excerpt.innerHTML = | excerpt.innerHTML = post.excerpt.rendered; | ||
/* | /* | ||
| Line 139: | Line 116: | ||
*/ | */ | ||
link.href = | link.href = post.link; | ||
/* | /* | ||
| Line 147: | Line 122: | ||
*/ | */ | ||
var articleDate = | var articleDate = new Date(post.date); | ||
dateElement.textContent = | dateElement.textContent = | ||
articleDate.toLocaleDateString( | articleDate.toLocaleDateString('en-US', { | ||
year: 'numeric', | |||
month: 'long', | |||
day: 'numeric' | |||
}); | |||
/* | /* | ||
* | * FEATURED IMAGE | ||
*/ | */ | ||
var imageUrl = ''; | var imageUrl = ''; | ||
var media = null; | |||
if ( | if ( | ||
| Line 176: | Line 143: | ||
post._embedded['wp:featuredmedia'].length > 0 | post._embedded['wp:featuredmedia'].length > 0 | ||
) { | ) { | ||
media = post._embedded['wp:featuredmedia'][0]; | |||
} | |||
if (media) { | |||
var sizes = | var sizes = | ||
| Line 186: | Line 154: | ||
: {}; | : {}; | ||
/* | |||
* Prefer the largest available image. | |||
*/ | |||
imageUrl = | if (sizes.full && sizes.full.source_url) { | ||
imageUrl = sizes.full.source_url; | |||
} else if ( | } else if ( | ||
sizes. | sizes.large && | ||
sizes. | sizes.large.source_url | ||
) { | ) { | ||
imageUrl = sizes.large.source_url; | |||
imageUrl = | } else if ( | ||
sizes.medium_large && | |||
sizes.medium_large.source_url | |||
) { | |||
imageUrl = sizes.medium_large.source_url; | |||
} else if (media.source_url) { | } else if ( | ||
media.source_url | |||
imageUrl = | ) { | ||
imageUrl = media.source_url; | |||
} else if ( | |||
sizes.medium && | |||
sizes.medium.source_url | |||
) { | |||
imageUrl = sizes.medium.source_url; | |||
} | } | ||
} | } | ||
/* | /* | ||
* DISPLAY | * DISPLAY IMAGE | ||
*/ | */ | ||
if (imageUrl) { | if (imageUrl) { | ||
image.src = | image.src = imageUrl; | ||
image.alt = | image.alt = post.title.rendered | ||
.replace(/<[^>]*>/g, ''); | |||
image.style.display = | image.style.display = 'block'; | ||
' | |||
image.onerror = function () { | |||
console.error( | |||
'Unable to load Making a Difference image:', | |||
imageUrl | |||
); | |||
image.style.display = 'none'; | |||
}; | |||
} | } | ||
/* | /* | ||
* SHOW | * SHOW CONTENT | ||
*/ | */ | ||
loading.style.display = | loading.style.display = 'none'; | ||
content.style.display = 'block'; | |||
content.style.display = | |||
}) | }) | ||
/* | /* | ||
| Line 271: | Line 246: | ||
Displays the latest article from the UP website's | Displays the latest article from the UP website's | ||
Making a Difference category, including its featured | Making a Difference category, including its featured | ||
image, publication date, excerpt, and article link. | |||
=== Usage === | === Usage === | ||
Latest revision as of 07:03, 26 October 2026
UP Making a Difference Widget
Displays the latest article from the UP website's Making a Difference category, including its featured image, publication date, excerpt, and article link.
Usage
{{#widget:UPMakingADifference}}