OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Blogger gadget for Featured Posts

  • Thread starter Thread starter Gitz
  • Start date Start date
G

Gitz

Guest
With the help of an IA, I developed the code for a Blogger gadget that displays three featured posts (title and image) in the sidebar. Ideally, it should have similar or identical graphics to the Popular Posts gadget, so that the two gadgets can be used together to create a Featured Posts + Popular Posts column on the right-hand side of the page. This is an example of what I came up with: https://www.wikipedate.com/2024/06/che-genere-di-enciclopedia-maschile_22.html (in Italian, "In vetrina" is Featured posts and "Post più popolari" is Popular posts) I spot three main issues:

  1. The dimensions of the images are not equal to each other and are different from those displayed by Popular Posts.
  2. My Featured Posts gadget uses fonts that are different from Popular Posts.
  3. Popular Posts' graphics is better because it leaves some space between each post; in my Featured Posts gadget, the three posts are crammed together. Here is the code I developed.

Code:
<div class="featured-posts-column">
    <ul class="featured-posts-list">
        <li class="featured-post">
            <a href="https://www.wikipedate.com/2023/09/wikipedate-questo-blog-parte-2.html">
                <img class="featured-post-image" src="" alt="" />
                <span class="featured-post-title"><b>Wikipedate (Questo blog Parte 2)</b></span>  
            </a>
        </li>
        <li class="featured-post">
            <a href="https://www.wikipedate.com/2023/11/kirk-lalba-delluomo.html">
                <img class="featured-post-image" src="" alt="" />
                <span class="featured-post-title"><b>Kirk. L'alba dell'uomo</b></span>  
            </a>
        </li>
        <li class="featured-post">
            <a href="https://www.wikipedate.com/2024/03/appunti-sullantirecentismo-parte-2-la.html">
                <img class="featured-post-image" src="" alt="" />
                <span class="featured-post-title"><b>Appunti sull'antirecentismo, Parte 2. La cipolla</b></span>  
            </a>
        </li>
    </ul>
</div>

<style>
.featured-posts-column img {
    max-width: 100%; 
    height: auto;     
}

/* Equal Height for Featured Post Images */
.featured-post-image {
    height: 150px;      /* Adjust this to your desired height */
    object-fit: cover;  /* This ensures images maintain aspect ratio and cover the container */
}
</style>

<script>
function getFeaturedPostImage(postUrl) {
    const postLink = document.querySelector(`a[href="${postUrl}"]`);
    if (postLink) {
        const img = postLink.querySelector('.featured-post-image');
        if (img) {
            fetch(postUrl)
                .then(response => response.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');

                    // Image Selectors 
                    let postImage;
                    if (postUrl.includes('wikipedate-questo-blog-parte-2')) {
                        postImage = doc.querySelector('.separator a img'); // First Post
                    } else if (postUrl.includes('kirk-lalba-delluomo')) {
                        postImage = doc.querySelector('.tr-caption-container a img'); // Second Post
                    } else if (postUrl.includes('appunti-sullantirecentismo-parte-2-la')) {
                        postImage = doc.querySelector('.tr-caption-container a img'); // Third Post (same as second)
                    }

                    if (postImage) {
                        img.src = postImage.src;
                        img.alt = postImage.alt || 'Immagine dal post in vetrina';
                    } else {
                        console.error("Opening image not found for:", postUrl);
                    }
                })
                .catch(error => console.error("Error fetching post:", postUrl, error));
        }
    }
}

document.querySelectorAll('.featured-post a').forEach(link => {
    getFeaturedPostImage(link.href);
});
</script>

<p>With the help of an IA, I developed the code for a Blogger gadget that displays three featured posts (title and image) in the sidebar. Ideally, it should have similar or identical graphics to the Popular Posts gadget, so that the two gadgets can be used together to create a Featured Posts + Popular Posts column on the right-hand side of the page.
This is an example of what I came up with:
<a href="https://www.wikipedate.com/2024/06/che-genere-di-enciclopedia-maschile_22.html" rel="nofollow noreferrer">https://www.wikipedate.com/2024/06/che-genere-di-enciclopedia-maschile_22.html</a>
(in Italian, "In vetrina" is Featured posts and "Post più popolari" is Popular posts)
I spot three main issues:</p>
<ol>
<li>The dimensions of the images are not equal to each other and are different from those displayed by Popular Posts.</li>
<li>My Featured Posts gadget uses fonts that are different from Popular Posts.</li>
<li>Popular Posts' graphics is better because it leaves some space between each post; in my Featured Posts gadget, the three posts are crammed together.
Here is the code I developed.</li>
</ol>
<pre><code><div class="featured-posts-column">
<ul class="featured-posts-list">
<li class="featured-post">
<a href="https://www.wikipedate.com/2023/09/wikipedate-questo-blog-parte-2.html">
<img class="featured-post-image" src="" alt="" />
<span class="featured-post-title"><b>Wikipedate (Questo blog Parte 2)</b></span>
</a>
</li>
<li class="featured-post">
<a href="https://www.wikipedate.com/2023/11/kirk-lalba-delluomo.html">
<img class="featured-post-image" src="" alt="" />
<span class="featured-post-title"><b>Kirk. L'alba dell'uomo</b></span>
</a>
</li>
<li class="featured-post">
<a href="https://www.wikipedate.com/2024/03/appunti-sullantirecentismo-parte-2-la.html">
<img class="featured-post-image" src="" alt="" />
<span class="featured-post-title"><b>Appunti sull'antirecentismo, Parte 2. La cipolla</b></span>
</a>
</li>
</ul>
</div>

<style>
.featured-posts-column img {
max-width: 100%;
height: auto;
}

/* Equal Height for Featured Post Images */
.featured-post-image {
height: 150px; /* Adjust this to your desired height */
object-fit: cover; /* This ensures images maintain aspect ratio and cover the container */
}
</style>

<script>
function getFeaturedPostImage(postUrl) {
const postLink = document.querySelector(`a[href="${postUrl}"]`);
if (postLink) {
const img = postLink.querySelector('.featured-post-image');
if (img) {
fetch(postUrl)
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');

// Image Selectors
let postImage;
if (postUrl.includes('wikipedate-questo-blog-parte-2')) {
postImage = doc.querySelector('.separator a img'); // First Post
} else if (postUrl.includes('kirk-lalba-delluomo')) {
postImage = doc.querySelector('.tr-caption-container a img'); // Second Post
} else if (postUrl.includes('appunti-sullantirecentismo-parte-2-la')) {
postImage = doc.querySelector('.tr-caption-container a img'); // Third Post (same as second)
}

if (postImage) {
img.src = postImage.src;
img.alt = postImage.alt || 'Immagine dal post in vetrina';
} else {
console.error("Opening image not found for:", postUrl);
}
})
.catch(error => console.error("Error fetching post:", postUrl, error));
}
}
}

document.querySelectorAll('.featured-post a').forEach(link => {
getFeaturedPostImage(link.href);
});
</script>
</code></pre>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top