Widget:UPDateOnline: Difference between revisions

Revision as of 23:16, 6 October 2026

UPDate Online Widget

Displays the latest UPDate Online article and the first image appearing in the article.

Usage

{{#widget:UPDateOnline}}

@@ Line 9: / Line 9: @@
      <div id="update-online-content" style="display:none;">
-         <!-- Image -->
+         <!-- News image -->
          <div class="update-news-image">
              <img id="update-online-image"
@@ Line 50: / Line 50: @@
      /*
-      * Get the newest UPDate Online article.
+      * Get the latest UPDate Online article.
+     *
+     * We do NOT rely on the featured image.
+     * Instead, we retrieve the article content
+     * and find the first image inside it.
       */
      var api =
          'https://upd.edu.ph/wp-json/wp/v2/posts' +
-         '?categories=4&per_page=1&_embed=true';
+         '?categories=4&per_page=1';
@@ Line 84: / Line 88: @@
          /*
+         * -----------------------------
           * TITLE
+         * -----------------------------
           */
@@ Line 94: / Line 100: @@
          /*
+         * -----------------------------
           * EXCERPT
+         * -----------------------------
           */
@@ Line 104: / Line 112: @@
          /*
+         * -----------------------------
           * ARTICLE LINK
+         * -----------------------------
           */
@@ Line 114: / Line 124: @@
          /*
+         * -----------------------------
           * DATE
+         * -----------------------------
           */
@@ Line 133: / Line 145: @@
          /*
-          * FEATURED IMAGE
+          * -----------------------------
+         * FIND FIRST ARTICLE IMAGE
+         * -----------------------------
           */
-         if (
+         var temp =
-             post._embedded &&
+             document.createElement('div');
-            post._embedded['wp:featuredmedia'] &&
-            post._embedded['wp:featuredmedia'].length
-        ) {
-            var media =
+        temp.innerHTML =
-                post._embedded['wp:featuredmedia'][0];
+            post.content.rendered;
-            if (media.source_url) {
-                var image =
+        var firstImage =
-                    document.getElementById(
+            temp.querySelector('img');
-                        'update-online-image'
-                    );
-                image.src =
-                    media.source_url;
-                 image.alt =
+        if (firstImage) {
-                    post.title.rendered;
+            var image =
+                document.getElementById(
+                    'update-online-image'
+                );
+            /*
+             * Get image URL
+             */
+            image.src =
+                 firstImage.src;
+            /*
+             * Use the article's
+             * image alt text if available.
+             */
+            image.alt =
+                firstImage.alt ||
+                post.title.rendered;
-            }
          } else {
              /*
-              * If the article has no
+              * No image found.
-             * featured image, hide
+              * Hide image container.
-              * the image container.
               */
@@ Line 177: / Line 203: @@
          /*
+         * -----------------------------
           * SHOW ARTICLE
+         * -----------------------------
           */
@@ Line 184: / Line 212: @@
          ).style.display =
              'none';
          document.getElementById(
@@ Line 194: / Line 223: @@
      /*
+     * -----------------------------
       * ERROR HANDLING
+     * -----------------------------
       */
@@ Line 217: / Line 248: @@
 == UPDate Online Widget ==
-Displays the latest UPDate Online article from UP Diliman.
+Displays the latest UPDate Online article and
+the first image appearing in the article.
-Usage:
+=== Usage ===
 <pre>