Widget:UPDateOnline: Difference between revisions

Revision as of 23:18, 6 October 2026

UPDate Online Widget

Displays the latest UPDate Online article and the first image appearing after the opening paragraph.

Usage

{{#widget:UPDateOnline}}

@@ Line 51: / Line 51: @@
      /*
       * 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.
       */
@@ Line 88: / Line 84: @@
          /*
-          * -----------------------------
+          * --------------------------------
           * TITLE
-          * -----------------------------
+          * --------------------------------
           */
@@ Line 100: / Line 96: @@
          /*
-          * -----------------------------
+          * --------------------------------
           * EXCERPT
-          * -----------------------------
+          * --------------------------------
           */
@@ Line 112: / Line 108: @@
          /*
-          * -----------------------------
+          * --------------------------------
           * ARTICLE LINK
-          * -----------------------------
+          * --------------------------------
           */
@@ Line 124: / Line 120: @@
          /*
-          * -----------------------------
+          * --------------------------------
           * DATE
-          * -----------------------------
+          * --------------------------------
           */
@@ Line 145: / Line 141: @@
          /*
-          * -----------------------------
+          * --------------------------------
-          * FIND FIRST ARTICLE IMAGE
+          * FIND FIRST IMAGE AFTER
-          * -----------------------------
+          * THE FIRST PARAGRAPH
+         * --------------------------------
           */
@@ Line 157: / Line 154: @@
-         var firstImage =
+        /*
-             temp.querySelector('img');
+         * Find the first paragraph
+         */
+        var firstParagraph =
+            temp.querySelector('p');
+         var firstImage = null;
+        if (firstParagraph) {
+            /*
+             * Look through everything that
+             * comes AFTER the first paragraph.
+             */
+            var current =
+                firstParagraph.nextElementSibling;
+             while (current) {
+                /*
+                 * Check whether this element
+                 * itself contains an image.
+                 */
+                if (
+                    current.tagName &&
+                    current.tagName.toLowerCase() === 'img'
+                ) {
+                    firstImage =
+                        current;
+                    break;
+                }
+                /*
+                 * Check for an image inside
+                 * this element.
+                 */
+                var image =
+                    current.querySelector('img');
+                if (image) {
+                    firstImage =
+                        image;
+                    break;
+                }
+                current =
+                    current.nextElementSibling;
+            }
+        }
+        /*
+         * --------------------------------
+         * DISPLAY THE IMAGE
+         * --------------------------------
+         */
          if (firstImage) {
@@ Line 170: / Line 236: @@
              /*
-              * Get image URL
+              * Use the actual image URL.
               */
@@ Line 178: / Line 244: @@
              /*
-              * Use the article's
+              * Use existing alt text if
-              * image alt text if available.
+              * available.
               */
@@ Line 186: / Line 252: @@
                  post.title.rendered;
+        }
-         } else {
+         else {
              /*
-              * No image found.
+              * No image found after the
-              * Hide image container.
+              * opening paragraph.
               */
@@ Line 203: / Line 270: @@
          /*
-          * -----------------------------
+          * --------------------------------
           * SHOW ARTICLE
-          * -----------------------------
+          * --------------------------------
           */
@@ Line 223: / Line 290: @@
      /*
-      * -----------------------------
+      * --------------------------------
       * ERROR HANDLING
-      * -----------------------------
+      * --------------------------------
       */
@@ Line 243: / Line 310: @@
 </includeonly>
 <noinclude>
@@ Line 249: / Line 317: @@
 Displays the latest UPDate Online article and
-the first image appearing in the article.
+the first image appearing after the opening paragraph.
 === Usage ===