Jump to content

Widget:UPMakingADifference: Difference between revisions

From Iskomunidad
IskoAdmin (talk | contribs)
Bots, Bureaucrats, Interface administrators, page-editor, page-maker, Push subscription managers, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Suppressors, Administrators, Widget editors
856 edits
VisualWikitext
Created page with " <includeonly> <div class="update-news"> <div class="update-online-loading"> Loading latest Making a Difference article... </div> <div class="update-online-content" style="display:none;"> <div class="update-news-image"> <img class="update-online-image" src="" alt="" style="display:none;"> </div> <div class="update-news-content"> <div class="update-..."
 
No edit summary
 
(9 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 45: Line 44:
     */
     */


     var widgets =
     var widgets = document.querySelectorAll('.update-news');
        document.querySelectorAll('.update-news');
     var widget = widgets[widgets.length - 1];
 
     var widget =
        widgets[widgets.length - 1];


     if (!widget) {
     if (!widget) {
Line 59: Line 55:
     */
     */


     var loading =
     var loading = widget.querySelector('.update-online-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');
        widget.querySelector('.update-online-content');
     var excerpt = widget.querySelector('.update-online-excerpt');
 
     var link = widget.querySelector('.update-online-link');
     var image =
     var dateElement = widget.querySelector('.update-online-date');
        widget.querySelector('.update-online-image');
 
     var title =
        widget.querySelector('.update-online-title');
 
     var excerpt =
        widget.querySelector('.update-online-excerpt');
 
     var link =
        widget.querySelector('.update-online-link');
 
     var dateElement =
        widget.querySelector('.update-online-date');


     /*
     /*
     * UP Diliman Making a Difference API
     * Making a Difference API
    * Category ID: 5063
     */
     */


     var api =
     var api =
         'https://up.edu.ph/wp-json/wp/v2/posts' +
         'https://up.edu.ph/wp-json/wp/v2/posts' +
         '?categories=5063&per_page=1';
         '?categories=5063&per_page=1&_embed';


     /*
     /*
Line 109: 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'
                );
             }
             }


Line 139: Line 125:


             dateElement.textContent =
             dateElement.textContent =
                 articleDate.toLocaleDateString(
                 articleDate.toLocaleDateString('en-US', {
                    'en-US',
                     year: 'numeric',
                     {
                    month: 'long',
                        year: 'numeric',
                    day: 'numeric'
                        month: 'long',
                });
                        day: 'numeric'
                    }
                );
 
            /*
            * PARSE ARTICLE CONTENT
            */
 
            var article = document.createElement('div');
 
            article.innerHTML = post.content.rendered;


             /*
             /*
             * FIND THE FIRST NON-EMPTY PARAGRAPH
             * FEATURED IMAGE
             */
             */


             var paragraphs = article.querySelectorAll('p');
             var imageUrl = '';
 
             var media = null;
             var firstParagraph = null;
 
            for (var i = 0; i < paragraphs.length; i++) {
 
                if (paragraphs[i].textContent.trim() !== '') {
                    firstParagraph = paragraphs[i];
                    break;
                }


            if (
                post._embedded &&
                post._embedded['wp:featuredmedia'] &&
                post._embedded['wp:featuredmedia'].length > 0
            ) {
                media = post._embedded['wp:featuredmedia'][0];
             }
             }


             /*
             if (media) {
            * FIND THE FIRST IMAGE AFTER THAT PARAGRAPH
            */


            var selectedImage = null;
                var sizes =
                    media.media_details &&
                    media.media_details.sizes
                        ? media.media_details.sizes
                        : {};


            if (firstParagraph) {
                /*
                * Prefer the largest available image.
                */


                 var images = article.querySelectorAll('img');
                 if (sizes.full && sizes.full.source_url) {
                    imageUrl = sizes.full.source_url;


                 for (var j = 0; j < images.length; j++) {
                 } else if (
                    sizes.large &&
                    sizes.large.source_url
                ) {
                    imageUrl = sizes.large.source_url;


                     var position =
                } else if (
                        firstParagraph.compareDocumentPosition(
                     sizes.medium_large &&
                            images[j]
                    sizes.medium_large.source_url
                        );
                ) {
                    imageUrl = sizes.medium_large.source_url;


                    if (
                } else if (
                        position &
                    media.source_url
                        Node.DOCUMENT_POSITION_FOLLOWING
                ) {
                    ) {
                    imageUrl = media.source_url;
                        selectedImage = images[j];
                        break;
                    }


                } else if (
                    sizes.medium &&
                    sizes.medium.source_url
                ) {
                    imageUrl = sizes.medium.source_url;
                 }
                 }
             }
             }


             /*
             /*
             * DISPLAY THE SELECTED IMAGE
             * DISPLAY IMAGE
             */
             */


             if (selectedImage) {
             if (imageUrl) {
 
                var imageUrl =
                    selectedImage.getAttribute('src') ||
                    selectedImage.getAttribute('data-src') ||
                    selectedImage.getAttribute('data-lazy-src');


                 if (imageUrl) {
                 image.src = imageUrl;


                    image.src = imageUrl;
                image.alt = post.title.rendered
                    .replace(/<[^>]*>/g, '');


                    image.alt =
                image.style.display = 'block';
                        selectedImage.getAttribute('alt') ||
                        post.title.rendered;


                    image.style.display = 'block';
                image.onerror = function () {
                    console.error(
                        'Unable to load Making a Difference image:',
                        imageUrl
                    );


                 }
                    image.style.display = 'none';
                 };


             }
             }


             /*
             /*
             * SHOW THE ARTICLE
             * SHOW CONTENT
             */
             */


             loading.style.display = 'none';
             loading.style.display = 'none';
             content.style.display = 'flex';
             content.style.display = 'block';


         })
         })
        /*
        * ERROR HANDLING
        */


         .catch(function (error) {
         .catch(function (error) {
Line 258: Line 245:


Displays the latest article from the UP website's
Displays the latest article from the UP website's
Making a Difference category, including its publication
Making a Difference category, including its featured
date, excerpt, article link, and first image after
image, publication date, excerpt, and article link.
the opening paragraph.


=== 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}}


Retrieved from "https://iskomunidad.upd.edu.ph/index.php?title=Widget:UPMakingADifference&oldid=71336"