Jump to content

Widget:UPDateOnline: Difference between revisions

From Iskomunidad
No edit summary
No edit summary
Line 1: Line 1:
<includeonly>
<includeonly>


<div class="your-news-class" id="update-online-news">
<div class="update-news" id="update-online-news">


     <div id="update-online-loading">
     <div id="update-online-loading">
Line 9: Line 9:
     <div id="update-online-content" style="display:none;">
     <div id="update-online-content" style="display:none;">


         <!-- News image -->
         <!-- Image -->
         <img id="update-online-image"
         <div class="update-news-image">
            src=""
            <img id="update-online-image"
            alt=""
                src=""
            style="display:none;">
                alt="">
        </div>


         <!-- Date -->
         <!-- Article information -->
         <div id="update-online-date"></div>
         <div class="update-news-content">


        <!-- Title -->
            <div class="update-online-date"
        <h2 id="update-online-title"></h2>
                id="update-online-date">
            </div>


        <!-- Excerpt -->
            <h2 class="update-online-title"
        <div id="update-online-excerpt"></div>
                id="update-online-title">
            </h2>


        <!-- Read more -->
            <div class="update-online-excerpt"
        <a id="update-online-link"
                id="update-online-excerpt">
          href=""
            </div>
          target="_blank"
 
          rel="noopener noreferrer">
            <a class="update-online-link"
            Read more →
              id="update-online-link"
         </a>
              href=""
              target="_blank"
              rel="noopener noreferrer">
                Read more →
            </a>
 
         </div>


     </div>
     </div>
Line 42: Line 51:
     /*
     /*
     * Get the newest UPDate Online article.
     * Get the newest UPDate Online article.
    *
    * _embed=true tells WordPress to include
    * information about the featured image.
     */
     */


Line 78: Line 84:


         /*
         /*
        * -----------------------------
         * TITLE
         * TITLE
        * -----------------------------
         */
         */


Line 90: Line 94:


         /*
         /*
        * -----------------------------
         * EXCERPT
         * EXCERPT
        * -----------------------------
         */
         */


Line 102: Line 104:


         /*
         /*
        * -----------------------------
         * ARTICLE LINK
         * ARTICLE LINK
        * -----------------------------
         */
         */


Line 114: Line 114:


         /*
         /*
        * -----------------------------
         * DATE
         * DATE
        * -----------------------------
         */
         */


Line 135: Line 133:


         /*
         /*
        * -----------------------------
         * FEATURED IMAGE
         * FEATURED IMAGE
        * -----------------------------
        *
        * WordPress places the featured
        * image information inside:
        *
        * post._embedded['wp:featuredmedia']
         */
         */


Line 153: Line 144:
             var media =
             var media =
                 post._embedded['wp:featuredmedia'][0];
                 post._embedded['wp:featuredmedia'][0];
            /*
            * Get the image URL.
            *
            * source_url = original image
            */


             if (media.source_url) {
             if (media.source_url) {
Line 174: Line 158:
                     post.title.rendered;
                     post.title.rendered;


                image.style.display =
                    'block';
             }
             }
        } else {
            /*
            * If the article has no
            * featured image, hide
            * the image container.
            */
            document.querySelector(
                '.update-news-image'
            ).style.display =
                'none';
         }
         }




         /*
         /*
        * -----------------------------
         * SHOW ARTICLE
         * SHOW ARTICLE
        * -----------------------------
         */
         */


Line 190: Line 184:
         ).style.display =
         ).style.display =
             'none';
             'none';


         document.getElementById(
         document.getElementById(
             'update-online-content'
             'update-online-content'
         ).style.display =
         ).style.display =
             'block';
             'flex';


     })
     })
Line 201: Line 194:


     /*
     /*
    * -----------------------------
     * ERROR HANDLING
     * ERROR HANDLING
    * -----------------------------
     */
     */


Line 221: Line 212:


</includeonly>
</includeonly>
<noinclude>
== UPDate Online Widget ==
Displays the latest UPDate Online article from UP Diliman.
Usage:
<pre>
{{#widget:UPDateOnline}}
</pre>
</noinclude>

Revision as of 23:13, 6 October 2026



UPDate Online Widget

Displays the latest UPDate Online article from UP Diliman.

Usage:

{{#widget:UPDateOnline}}