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="your-news-class" id="update-online-news">


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


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


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


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


         <a class="update-online-link"
         <!-- Excerpt -->
          id="update-online-link"
        <div id="update-online-excerpt"></div>
 
        <!-- Read more -->
        <a id="update-online-link"
           href=""
           href=""
           target="_blank"
           target="_blank"
Line 25: Line 35:


</div>
</div>


<script>
<script>
(function () {
(function () {


     fetch(
     /*
         'https://upd.edu.ph/wp-json/wp/v2/posts?categories=4&per_page=1'
    * Get the newest UPDate Online article.
     )
    *
    * _embed=true tells WordPress to include
    * information about the featured image.
    */
 
    var api =
         'https://upd.edu.ph/wp-json/wp/v2/posts' +
        '?categories=4&per_page=1&_embed=true';
 
 
     fetch(api)


     .then(function (response) {
     .then(function (response) {
        if (!response.ok) {
            throw new Error(
                'Unable to retrieve UPDate Online'
            );
        }
         return response.json();
         return response.json();
     })
     })


Line 40: Line 69:


         if (!posts || !posts.length) {
         if (!posts || !posts.length) {
             throw new Error('No article found');
             throw new Error(
                'No UPDate Online article found'
            );
         }
         }


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


         /* Title */
 
         document.getElementById('update-online-title').innerHTML =
         /*
        * -----------------------------
        * TITLE
        * -----------------------------
        */
 
         document.getElementById(
            'update-online-title'
        ).innerHTML =
             post.title.rendered;
             post.title.rendered;


         /* Excerpt */
 
         document.getElementById('update-online-excerpt').innerHTML =
         /*
        * -----------------------------
        * EXCERPT
        * -----------------------------
        */
 
         document.getElementById(
            'update-online-excerpt'
        ).innerHTML =
             post.excerpt.rendered;
             post.excerpt.rendered;


         /* Article URL */
 
         document.getElementById('update-online-link').href =
         /*
        * -----------------------------
        * ARTICLE LINK
        * -----------------------------
        */
 
         document.getElementById(
            'update-online-link'
        ).href =
             post.link;
             post.link;


         /* Date */
 
         /*
        * -----------------------------
        * DATE
        * -----------------------------
        */
 
         var date = new Date(post.date);
         var date = new Date(post.date);


         document.getElementById('update-online-date').textContent =
         document.getElementById(
             date.toLocaleDateString('en-US', {
            'update-online-date'
                year: 'numeric',
        ).textContent =
                month: 'long',
             date.toLocaleDateString(
                day: 'numeric'
                'en-US',
             });
                {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                }
             );
 
 
        /*
        * -----------------------------
        * FEATURED IMAGE
        * -----------------------------
        *
        * WordPress places the featured
        * image information inside:
        *
        * post._embedded['wp:featuredmedia']
        */
 
        if (
            post._embedded &&
            post._embedded['wp:featuredmedia'] &&
            post._embedded['wp:featuredmedia'].length
        ) {
 
            var media =
                post._embedded['wp:featuredmedia'][0];
 
 
            /*
            * Get the image URL.
            *
            * source_url = original image
            */
 
            if (media.source_url) {
 
                var image =
                    document.getElementById(
                        'update-online-image'
                    );
 
                image.src =
                    media.source_url;
 
                image.alt =
                    post.title.rendered;


         /* Show article */
                image.style.display =
         document.getElementById('update-online-loading').style.display =
                    'block';
            }
        }
 
 
         /*
        * -----------------------------
        * SHOW ARTICLE
        * -----------------------------
        */
 
         document.getElementById(
            'update-online-loading'
        ).style.display =
             'none';
             'none';


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


     })
     })
    /*
    * -----------------------------
    * ERROR HANDLING
    * -----------------------------
    */


     .catch(function (error) {
     .catch(function (error) {


         document.getElementById('update-online-loading').innerHTML =
         document.getElementById(
            'update-online-loading'
        ).innerHTML =
             'Unable to load the latest UPDate Online article.';
             'Unable to load the latest UPDate Online article.';


Line 87: Line 219:
})();
})();
</script>
</script>
</includeonly>
</includeonly>

Revision as of 23:12, 6 October 2026