Widget:UPDateOnline: Difference between revisions

Revision as of 23:23, 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 227: / Line 227: @@
           */
-         if (firstImage) {
+         // Find the first image AFTER the opening paragraph
+var temp = document.createElement('div');
+temp.innerHTML = post.content.rendered;
-            var image =
+var paragraphs = temp.querySelectorAll('p');
-                document.getElementById(
+var firstParagraph = null;
-                    'update-online-image'
-                );
+// Find the first paragraph that actually contains text
+for (var i = 0; i < paragraphs.length; i++) {
+    if (paragraphs[i].textContent.trim().length > 0) {
+        firstParagraph = paragraphs[i];
+        break;
+    }
+}
-            /*
+var selectedImage = null;
-             * Use the actual image URL.
-             */
-            image.src =
+if (firstParagraph) {
-                firstImage.src;
+    // Look at all paragraphs and images in document order
+    var elements = temp.querySelectorAll('p, img');
+    var passedFirstParagraph = false;
-            /*
+    for (var i = 0; i < elements.length; i++) {
-             * Use existing alt text if
-             * available.
-             */
-            image.alt =
+        var element = elements[i];
-                firstImage.alt ||
-                post.title.rendered;
+        if (element === firstParagraph) {
+            passedFirstParagraph = true;
+            continue;
          }
-         else {
+         if (
+            passedFirstParagraph &&
+            element.tagName.toLowerCase() === 'img' &&
+            !firstParagraph.contains(element)
+        ) {
+            selectedImage = element;
+            break;
+        }
+    }
+}
+// Put the image into our widget
+if (selectedImage) {
+    var imageUrl =
+        selectedImage.getAttribute('src') ||
+        selectedImage.getAttribute('data-src') ||
+        selectedImage.getAttribute('data-lazy-src');
-            /*
+    if (imageUrl) {
-             * No image found after the
+        var outputImage =
-             * opening paragraph.
+            document.getElementById('update-online-image');
-             */
-             document.querySelector(
+        outputImage.src = imageUrl;
-                '.update-news-image'
+        outputImage.alt =
-             ).style.display =
+             selectedImage.getAttribute('alt') ||
-                'none';
+             post.title.rendered;
-         }
+         outputImage.style.display = 'block';
+    }
+}