Jump to content

Widget:UPMakingADifference: Difference between revisions

From Iskomunidad
Newer edit →
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
Line 42: Line 42:


     /*
     /*
     * Find this widget instance
     * FIND THIS WIDGET INSTANCE
     */
     */


Line 54: Line 54:
         return;
         return;
     }
     }


     /*
     /*
     * Find elements inside this widget
     * FIND ELEMENTS INSIDE THIS WIDGET
     */
     */


Line 79: Line 80:
     var dateElement =
     var dateElement =
         widget.querySelector('.update-online-date');
         widget.querySelector('.update-online-date');


     /*
     /*
     * UP Diliman Making a Difference API
     * UP 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';
 


     /*
     /*
     * Retrieve the latest article
     * RETRIEVE THE LATEST ARTICLE
     */
     */


Line 113: Line 117:


             var post = posts[0];
             var post = posts[0];


             /*
             /*
Line 118: Line 123:
             */
             */


             title.innerHTML = post.title.rendered;
             title.innerHTML =
                post.title.rendered;
 


             /*
             /*
Line 124: Line 131:
             */
             */


             excerpt.innerHTML = post.excerpt.rendered;
             excerpt.innerHTML =
                post.excerpt.rendered;
 


             /*
             /*
Line 130: Line 139:
             */
             */


             link.href = post.link;
             link.href =
                post.link;
 


             /*
             /*
Line 136: Line 147:
             */
             */


             var articleDate = new Date(post.date);
             var articleDate =
                new Date(post.date);


             dateElement.textContent =
             dateElement.textContent =
Line 148: Line 160:
                 );
                 );


            /*
            * PARSE ARTICLE CONTENT
            */
            var article = document.createElement('div');
            article.innerHTML = post.content.rendered;


             /*
             /*
             * FIND THE FIRST NON-EMPTY PARAGRAPH
             * GET FEATURED THUMBNAIL
            *
            * Prefer the medium-sized image.
            * Fall back to the thumbnail size,
            * then the original featured image.
             */
             */


             var paragraphs = article.querySelectorAll('p');
             var imageUrl = '';


             var firstParagraph = null;
             if (
                post._embedded &&
                post._embedded['wp:featuredmedia'] &&
                post._embedded['wp:featuredmedia'].length > 0
            ) {


            for (var i = 0; i < paragraphs.length; i++) {
                var media =
                    post._embedded['wp:featuredmedia'][0];


                 if (paragraphs[i].textContent.trim() !== '') {
                 var sizes =
                     firstParagraph = paragraphs[i];
                     media.media_details &&
                     break;
                     media.media_details.sizes
                }
                        ? media.media_details.sizes
                        : {};


            }
                if (
                    sizes.medium &&
                    sizes.medium.source_url
                ) {


            /*
                    imageUrl =
            * FIND THE FIRST IMAGE AFTER THAT PARAGRAPH
                        sizes.medium.source_url;
            */
 
            var selectedImage = null;
 
            if (firstParagraph) {


                 var images = article.querySelectorAll('img');
                 } else if (
                    sizes.thumbnail &&
                    sizes.thumbnail.source_url
                ) {


                for (var j = 0; j < images.length; j++) {
                    imageUrl =
                        sizes.thumbnail.source_url;


                    var position =
                } else if (media.source_url) {
                        firstParagraph.compareDocumentPosition(
                            images[j]
                        );


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


                 }
                 }


             }
             }


             /*
             /*
             * DISPLAY THE SELECTED IMAGE
             * DISPLAY FEATURED THUMBNAIL
             */
             */


             if (selectedImage) {
             if (imageUrl) {


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


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


                    image.src = imageUrl;
                image.style.display =
                    'block';


                    image.alt =
            }
                        selectedImage.getAttribute('alt') ||
                        post.title.rendered;


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


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


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


         })
         })
        /*
        * ERROR HANDLING
        */


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


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
thumbnail, publication date, excerpt, and article link.
the opening paragraph.


=== Usage ===
=== Usage ===

Revision as of 23:53, 22 October 2026



UP Making a Difference Widget

Displays the latest article from the UP website's Making a Difference category, including its featured thumbnail, publication date, excerpt, and article link.

Usage

{{#widget:UPMakingADifference}}


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