Retrieve the initial image link from a blogger's post in cases where it is not being stored on the Blogger platform for use in related

I am currently using a hosting service to store the images that I include on my blogger platform.

However, I have encountered an issue where blogger does not automatically fetch the image url to use as the thumbnail when the image is hosted externally.

Can anyone provide guidance on how to make these external images appear as thumbnails on my blog posts?

<script type='text/javascript'>
// Custom JS script for related post thumbnails and labels
// Please do not modify unless you know what you are doing

// Variable declarations
var defaultnoimage = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults = 8;
var splittercolor = "#d4eaf2";
var relatedpoststitle = "YOU MIGHT WANT TO SEE";
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();

// Function to extract related post data including thumbnails
function related_results_labels_thumbs(json) {
    // Logic for extracting data from JSON feed
    // Code omitted for brevity
}

// Additional functions for processing related posts data
// Functions removed for brevity

// Function to display related post thumbnails with links
function printRelatedLabels_thumbs(current) {
    // Logic for displaying related post thumbnails with links
    // Code omitted for brevity
}
</script>

Answer №1

To extract the image src, it is recommended to use entry.content instead of media$thumbnail

Consider this alternative approach

<script type='text/javascript'>
//<![CDATA[
// JS LQ
var defaultnoimage = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults = 8;
var splittercolor = "#d4eaf2";
var relatedpoststitle = "YOU MIGHT WANT TO SEE";
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();

function related_results_labels_thumbs(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
        var entry = json.feed.entry[i];
        relatedTitles[relatedTitlesNum] = entry.title.$t;
        s = entry.content.$t;
        a = s.indexOf("<img");
        b = s.indexOf("src=\", a);
        c = s.indexOf("\", b + 5);
        d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            thumburl[relatedTitlesNum] = d;
        } else {
            if (typeof(defaultnoimage) !== 'undefined') {
                thumburl[relatedTitlesNum] = defaultnoimage;
            } else {
                thumburl[relatedTitlesNum] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
            }
        }
        if (relatedTitles[relatedTitlesNum].length > 35) {
            relatedTitles[relatedTitlesNum] = relatedTitles[relatedTitlesNum].substring(0, 150) + "...";
        }
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
                relatedUrls[relatedTitlesNum] = entry.link[k].href;
                relatedTitlesNum++;
            }
        }
    }
}

function removeRelatedDuplicates_thumbs() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    var tmp3 = new Array(0);
    for (var i = 0; i < relatedUrls.length; i++) {
        if (!contains_thumbs(tmp, relatedUrls[i])) {
            tmp.length += 1;
            tmp[tmp.length - 1] = relatedUrls[i];
            tmp2.length += 1;
            tmp3.length += 1;
            tmp2[tmp2.length - 1] = relatedTitles[i];
            tmp3[tmp3.length - 1] = thumburl[i];
        }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
    thumburl = tmp3;
}

function contains_thumbs(a, e) {
    for (var j = 0; j < a.length; j++) {
        if (a[j] == e) {
            return true;
        }
    }
    return false;
}

function printRelatedLabels_thumbs(current) {
    var splitbarcolor;
    if (typeof(splittercolor) !== 'undefined') {
        splitbarcolor = splittercolor;
    } else {
        splitbarcolor = "#d4eaf2";
    }
    for (var i = 0; i < relatedUrls.length; i++) {
        if ((relatedUrls[i] == current) || (!relatedTitles[i])) {
            relatedUrls.splice(i, 1);
            relatedTitles.splice(i, 1);
            thumburl.splice(i, 1);
            i--;
        }
    }
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    if (relatedTitles.length > 0) {
        document.write('<div class="phimlq"><i class="lq"></i>' + relatedpoststitle + '</div>');
    }
    document.write('<div style="clear: both;"/>');
    while (i < relatedTitles.length && i < 20 && i < maxresults) {
        document.write('<a href="' + relatedUrls[r] + '"><div class="popular-row"><div class="in-article"><div class="wrap-photos"><img class="ppl-img" src="' + thumburl[r].replace("/s72-c/", "/s200/") + '"/></div><h3 name="title">' + relatedTitles[r] + ']</h3><span class="icon-hover"></span><div class="br"></div></div></div></a>');
        i++;
        if (r < relatedTitles.length - 1) {
            r++;
        } else {
            r = 0;
        }
    }
    document.write('</div>');
    relatedUrls.splice(0, relatedUrls.length);
    thumburl.splice(0, thumburl.length);
    relatedTitles.splice(0, relatedTitles.length);
}
//]]>
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to use "/path/{?}" in a path when working with Node.js?

I am new to node.js and I'm working on creating a route that will verify the authorization of all users when the specified endpoint begins with /api. I've learned that an optional value can be indicated using ? like {_id?}, but is it possible to ...

Having issues with Cypress testing of Material-UI datepicker on Github actions

Encountering an unusual issue while running Cypress tests in a GitHub action environment. The MUI datepicker is stuck in readonly mode, preventing any input of dates (works fine in other setups). Error displayed by Cypress CypressError: Timed out retryin ...

The CSS Specificity Hierarchy

I am currently facing a dilemma with two CSS classes in my codebase. Despite having a stronger specificity, the second class is not being chosen over the first one. Can anyone shed some light on this issue? The CSS class that is currently being applied is ...

Angular Material Popup - Interactive Map from AGM

I am in the process of developing a material dialog to collect user location information using AGM (angular google maps). I have successfully implemented a map on my main page, but when the dialog is opened, it only shows a blank space instead of the map. ...

Sort slider items using Show/Hide feature in bxSlider

I am using a bxslider on my website with specific settings: $('#carousel').bxSlider({ slideWidth: 146, minSlides: 2, maxSlides: 6, speed:500, adaptiveHeight: true, moveSlides:3, infiniteLoop : false, hideContr ...

What is the proper way to structure an Xpath search?

Recently, I've been working with Selenium in QA Test automation. When it comes to selecting/writing Xpath for an element, I've noticed that there are different formats that can be used. For example, protected final String LOGIN_BUTTON_LOCATOR = ...

What could be causing the Multer error in my Express.js application when attempting to upload a file for the second time, even though the first time was successful?

Whenever I try to upload a single file, the code works flawlessly. However, if I attempt to upload another file, I encounter the following Multer error: Error code: 'LIMIT_UNEXPECTED_FILE', field: 'myFile', storageErrors: [] To succes ...

Uploading base64 arrays from AngularJS to a Node.js server: Allowing Access-Control-Origin

My current challenge involves sending an array of base64 strings from my Client Side (AngularJs) to my NodeJs Server. However, I've encountered a peculiar situation. When I attempt to send an object containing the base64 data along with other properti ...

Storing a Promise in a Variable in React

As a newcomer to JavaScript/React, I am finding it challenging to grasp the concept of using Promise and async. To illustrate, consider the API call getSimById in a JS file that returns a Promise: export function getSimById(simId) { return fetch(simsUrl ...

What is the best way to make a Dojo TitlePane overlap using CSS?

My dilemma involves a jsfiddle featuring two TitlePane widgets in the central pane's top right corner. Currently, clicking on the right TitlePane ("Switch Basemap") moves the left TitlePane ("Map Overlays") to the left. What I want is for the right Ti ...

Displaying JSON data using FormControls in Angular 5

Upon receiving Json values from the server, I am encountering an issue while binding them to respective textboxes. The problem arises as the value in the textbox appears as [object object] <h1>{{title}}</h1> <h3>Catalog</h3> ...

The value 'true' was returned for an attribute 'exact' that is not of boolean type

How can I resolve this warning? Sample Code const Main = (header, navigation) => { return ( <> <div> {navigation !== false && <Navigation />} </div> </> ) } I attempted this soluti ...

What could be the reason behind my Vue custom directives not functioning as expected?

I'm brand new to Vue and very inexperienced with custom directives. I'm attempting something basic, but it doesn't seem to be working correctly. Can someone please help me figure out what's wrong? Thank you in advance! I have created tw ...

Tips for using the Enter key to shift focus to the next input field

I am trying to move to the next input field when I hit the enter key. I found a solution in another question here, but the code provided doesn't work for me because my input fields are inside a table. Here is my HTML code: <form action="#"> < ...

Assign a value using the select component from Material UI

I just finished creating a dropdown menu const [selectedValue, setSelectedValue] = useState(''); const handleSelectionChange = (e: any) => { //setSelectedValue(e) console.log('value', selectedValue) } .... <Fo ...

The connection between an HTML form and PHP is not being established

variable-passing.php `<form method="post" action="variable-catching.php"> <input type="text" name="name1"/><br/> <input type="text" name="name2"/><br/> <input type="text" name="name3"/><br/> <input type="te ...

Guide on how to align multiple divs at the center of a container using CSS

Experimenting with centering a divider in the style of Windows metro. .container { height: 300px; width: 70%; background: #EEE; margin: 10px auto; position: relative; } .block { background: green; height: 100px; width: 10 ...

Issue when attempting to update user profile picture using Mongoose schema and Cloudinary

updateProfile: async function(req, res) { try { const update = req.body; const id = req.params.id; if (!req.files || Object.keys(req.files).length === 0) { return res.status(400).send('No files were uploaded.&a ...

I am currently encountering an issue with a code snippet that is not performing as anticipated and require clarification

import React, {useEffect, useState} from 'react'; export function App(props) { let [state, setState] = useState(2); console.log('outside', state); useEffect(()=>{ document.querySelector('.btn').addEventListener( ...

Transform text to lowercase and eliminate whitespace using JavaScript

I am a newcomer to the world of JavaScript and currently focused on building Discord bots. I have successfully coded a bot that responds to messages, but I'm facing issues when the input is in capital letters or contains spaces. The bot fails to res ...