{"id":835,"date":"2026-09-23T18:18:39","date_gmt":"2026-09-23T18:18:39","guid":{"rendered":"https:\/\/dpup.dpo-bangladesh.org\/?page_id=835"},"modified":"2026-09-23T18:21:26","modified_gmt":"2026-09-23T18:21:26","slug":"recent-news","status":"publish","type":"page","link":"https:\/\/dpup.dpo-bangladesh.org\/index.php\/recent-news\/","title":{"rendered":"Recent News"},"content":{"rendered":"\n<!-- =========================================\n     DPUP BLOG POST GRID\n     ONLY CATEGORY: BLOG\n========================================= -->\n\n<style>\n\n.dpup-post-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 30px;\n    width: 100%;\n}\n\n.dpup-post-card {\n    background: #fff;\n    border: 1px solid #e5e5e5;\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.3s ease;\n}\n\n.dpup-post-card:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 8px 25px rgba(0,0,0,0.10);\n}\n\n.dpup-post-image {\n    width: 100%;\n    height: 220px;\n    overflow: hidden;\n}\n\n.dpup-post-image img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    transition: transform 0.4s ease;\n}\n\n.dpup-post-card:hover .dpup-post-image img {\n    transform: scale(1.05);\n}\n\n.dpup-post-content {\n    padding: 20px;\n}\n\n.dpup-post-title {\n    margin: 0 0 12px;\n    font-size: 20px;\n    line-height: 1.4;\n    font-weight: 700;\n}\n\n.dpup-post-title a {\n    color: #222;\n    text-decoration: none;\n}\n\n.dpup-post-title a:hover {\n    color: #0073aa;\n}\n\n.dpup-post-meta {\n    display: flex;\n    gap: 15px;\n    flex-wrap: wrap;\n    margin-bottom: 14px;\n    font-size: 13px;\n    color: #777;\n}\n\n.dpup-post-excerpt {\n    color: #555;\n    font-size: 15px;\n    line-height: 1.7;\n    margin-bottom: 18px;\n}\n\n.dpup-read-more {\n    display: inline-block;\n    padding: 9px 18px;\n    background: #0073aa;\n    color: #fff !important;\n    text-decoration: none !important;\n    border-radius: 5px;\n    font-size: 14px;\n    font-weight: 600;\n}\n\n.dpup-read-more:hover {\n    background: #005a87;\n}\n\n.dpup-loading {\n    text-align: center;\n    padding: 25px;\n    color: #777;\n}\n\n.dpup-load-more-wrapper {\n    text-align: center;\n    margin: 40px 0 20px;\n}\n\n#dpup-load-more {\n    padding: 12px 30px;\n    border: none;\n    border-radius: 5px;\n    background: #0073aa;\n    color: #fff;\n    font-size: 16px;\n    font-weight: 600;\n    cursor: pointer;\n}\n\n#dpup-load-more:hover {\n    background: #005a87;\n}\n\n#dpup-load-more:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n@media (max-width: 1024px) {\n    .dpup-post-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 767px) {\n    .dpup-post-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .dpup-post-image {\n        height: 210px;\n    }\n}\n\n<\/style>\n\n\n<!-- POST GRID -->\n\n<div\n    id=\"dpup-post-grid\"\n    class=\"dpup-post-grid\">\n<\/div>\n\n\n<!-- LOADING -->\n\n<div\n    id=\"dpup-loading\"\n    class=\"dpup-loading\">\n\n    Loading Blog posts&#8230;\n\n<\/div>\n\n\n<!-- LOAD MORE -->\n\n<div class=\"dpup-load-more-wrapper\">\n\n    <button\n        id=\"dpup-load-more\"\n        type=\"button\">\n\n        Load More Posts\n\n    <\/button>\n\n<\/div>\n\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n    \/* =====================================\n       SETTINGS\n    ===================================== *\/\n\n    const postsPerPage = 9;\n\n    let currentPage = 1;\n\n    const apiURL = \"\/wp-json\/wp\/v2\/posts\";\n\n\n    const grid =\n        document.getElementById(\n            \"dpup-post-grid\"\n        );\n\n    const loading =\n        document.getElementById(\n            \"dpup-loading\"\n        );\n\n    const loadMoreButton =\n        document.getElementById(\n            \"dpup-load-more\"\n        );\n\n\n    \/* =====================================\n       FIND BLOG CATEGORY\n    ===================================== *\/\n\n    let blogCategoryID = null;\n\n\n    async function getBlogCategory() {\n\n        try {\n\n            const response =\n                await fetch(\n                    \"\/wp-json\/wp\/v2\/categories?search=Blog\"\n                );\n\n            const categories =\n                await response.json();\n\n\n            \/*\n             * Find category named exactly \"Blog\"\n             *\/\n\n            const blogCategory =\n                categories.find(\n                    category =>\n                        category.name.toLowerCase()\n                        === \"blog\"\n                );\n\n\n            if (blogCategory) {\n\n                blogCategoryID =\n                    blogCategory.id;\n\n            } else {\n\n                throw new Error(\n                    \"Blog category not found\"\n                );\n\n            }\n\n        }\n        catch (error) {\n\n            loading.innerHTML =\n                \"Blog category not found.\";\n\n            loadMoreButton.style.display =\n                \"none\";\n\n        }\n\n    }\n\n\n    \/* =====================================\n       CLEAN CONTENT\n    ===================================== *\/\n\n    function cleanText(html) {\n\n        const temp =\n            document.createElement(\"div\");\n\n        temp.innerHTML = html;\n\n        return (\n            temp.textContent ||\n            temp.innerText ||\n            \"\"\n        );\n\n    }\n\n\n    \/* =====================================\n       100 CHARACTER CONTENT\n    ===================================== *\/\n\n    function createExcerpt(content) {\n\n        let text =\n            cleanText(content)\n            .replace(\/\\s+\/g, \" \")\n            .trim();\n\n\n        if (text.length > 100) {\n\n            text =\n                text.substring(0, 100)\n                .trim() + \"...\";\n\n        }\n\n\n        return text;\n\n    }\n\n\n    \/* =====================================\n       CREATE POST\n    ===================================== *\/\n\n    function createPost(post) {\n\n        let image =\n            \"https:\/\/via.placeholder.com\/800x500?text=No+Image\";\n\n\n        if (\n            post._embedded &&\n            post._embedded[\"wp:featuredmedia\"] &&\n            post._embedded[\"wp:featuredmedia\"][0]\n        ) {\n\n            image =\n                post._embedded\n                    [\"wp:featuredmedia\"][0]\n                    .source_url;\n\n        }\n\n\n        let author = \"Admin\";\n\n\n        if (\n            post._embedded &&\n            post._embedded.author &&\n            post._embedded.author[0]\n        ) {\n\n            author =\n                post._embedded.author[0].name;\n\n        }\n\n\n        const date =\n            new Date(post.date)\n            .toLocaleDateString(\n                \"en-GB\",\n                {\n                    day: \"2-digit\",\n                    month: \"short\",\n                    year: \"numeric\"\n                }\n            );\n\n\n        const card =\n            document.createElement(\"article\");\n\n\n        card.className =\n            \"dpup-post-card\";\n\n\n        card.innerHTML = `\n\n            <div class=\"dpup-post-image\">\n\n                <a href=\"${post.link}\">\n\n                    <img decoding=\"async\"\n                        src=\"${image}\"\n                        alt=\"${post.title.rendered}\"\n                        loading=\"lazy\"\n                    >\n\n                <\/a>\n\n            <\/div>\n\n\n            <div class=\"dpup-post-content\">\n\n                <h3 class=\"dpup-post-title\">\n\n                    <a href=\"${post.link}\">\n\n                        ${post.title.rendered}\n\n                    <\/a>\n\n                <\/h3>\n\n\n                <div class=\"dpup-post-meta\">\n\n                    <span>\n                        \ud83d\udcc5 ${date}\n                    <\/span>\n\n                    <span>\n                        \ud83d\udc64 ${author}\n                    <\/span>\n\n                <\/div>\n\n\n                <div class=\"dpup-post-excerpt\">\n\n                    ${createExcerpt(\n                        post.content.rendered\n                    )}\n\n                <\/div>\n\n\n                <a\n                    href=\"${post.link}\"\n                    class=\"dpup-read-more\">\n\n                    Read More\n\n                <\/a>\n\n            <\/div>\n\n        `;\n\n\n        return card;\n\n    }\n\n\n    \/* =====================================\n       LOAD POSTS\n    ===================================== *\/\n\n    async function loadPosts(page) {\n\n        if (!blogCategoryID) {\n            return;\n        }\n\n\n        loading.style.display =\n            \"block\";\n\n        loadMoreButton.disabled =\n            true;\n\n\n        try {\n\n            const response =\n                await fetch(\n\n                    apiURL +\n                    \"?per_page=\" +\n                    postsPerPage +\n                    \"&page=\" +\n                    page +\n                    \"&categories=\" +\n                    blogCategoryID +\n                    \"&_embed\"\n\n                );\n\n\n            if (!response.ok) {\n\n                throw new Error(\n                    \"No more posts\"\n                );\n\n            }\n\n\n            const posts =\n                await response.json();\n\n\n            posts.forEach(\n                function(post) {\n\n                    grid.appendChild(\n                        createPost(post)\n                    );\n\n                }\n            );\n\n\n            const totalPages =\n                parseInt(\n                    response.headers.get(\n                        \"X-WP-TotalPages\"\n                    )\n                );\n\n\n            if (\n                page >= totalPages\n            ) {\n\n                loadMoreButton.style.display =\n                    \"none\";\n\n            } else {\n\n                loadMoreButton.style.display =\n                    \"inline-block\";\n\n            }\n\n\n            currentPage++;\n\n\n        }\n        catch (error) {\n\n            if (page === 1) {\n\n                loading.innerHTML =\n                    \"No Blog posts found.\";\n\n            }\n\n            loadMoreButton.style.display =\n                \"none\";\n\n        }\n\n\n        loading.style.display =\n            \"none\";\n\n        loadMoreButton.disabled =\n            false;\n\n    }\n\n\n    \/* =====================================\n       START\n    ===================================== *\/\n\n    async function start() {\n\n        await getBlogCategory();\n\n        if (blogCategoryID) {\n\n            loadPosts(currentPage);\n\n        }\n\n    }\n\n\n    start();\n\n\n    \/* =====================================\n       LOAD MORE\n    ===================================== *\/\n\n    loadMoreButton.addEventListener(\n        \"click\",\n        function () {\n\n            loadPosts(currentPage);\n\n        }\n    );\n\n});\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Loading Blog posts&#8230; Load More Posts<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_xspeed_no_cache":false,"_xspeed_expiry_hours":0,"footnotes":""},"class_list":["post-835","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"tarek","author_link":"https:\/\/dpup.dpo-bangladesh.org\/index.php\/author\/tarek\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Loading Blog posts&#8230; Load More Posts","_links":{"self":[{"href":"https:\/\/dpup.dpo-bangladesh.org\/index.php\/wp-json\/wp\/v2\/pages\/835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dpup.dpo-bangladesh.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dpup.dpo-bangladesh.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dpup.dpo-bangladesh.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dpup.dpo-bangladesh.org\/index.php\/wp-json\/wp\/v2\/comments?post=835"}],"version-history":[{"count":2,"href":"https:\/\/dpup.dpo-bangladesh.org\/index.php\/wp-json\/wp\/v2\/pages\/835\/revisions"}],"predecessor-version":[{"id":838,"href":"https:\/\/dpup.dpo-bangladesh.org\/index.php\/wp-json\/wp\/v2\/pages\/835\/revisions\/838"}],"wp:attachment":[{"href":"https:\/\/dpup.dpo-bangladesh.org\/index.php\/wp-json\/wp\/v2\/media?parent=835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}