Google Feed API - Failed to load images from Feed

Question

i am trying to load more than one feed in a website with Google Feed Api. I have problem to load images to my feeds and cant find a solution. Can enybody help me? Below is a codepen.

the feed has this markup:

<img>http://img.ephoto.sk/images/content/articles/c285367e4e39cfa8056f2c95ec715f76c1e758af.jpg</img>

JS Code:

function parseFeed(url, container) {
$.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&callback=?&q=' + encodeURIComponent(url), // "num=5" will show 5 articles
    dataType: 'json',
    success: function (data) {
        // log object data in console
        console.log(data.responseData.feed);
        // for each entry... *
        $.each(data.responseData.feed.entries, function (key, value) {
            var title = '<li><a class="title" href="' + value.link + '" target="_blank">' + value.title + '</a></li>';
                    var image = '<img class="thumbnail" src="' + value.img + '">';
            var entry = '<div class="entry"><ul>' + image + title +  '</ul></div>';
            // * append entire entry in container
            $(container).append(entry);
        });
    },
    // if there's an error... *
    error: function (errorThrown) {
        // * log error message in console
        console.log(errorThrown);
        // * show error message
        alert('Niekde vo feede sa vyskytla chyba.');
    }
});
}
$(document).ready(function () {
    parseFeed('http://feeds.feedburner.com/FotoportlEphotosk-FotoFotografieFotoaparty', '#ephoto');
});

Codepen: http://codepen.io/MichalSK/pen/rVEwPy

Is there also any solution to make this code to work with this markup?

<image>
<url>http://...</url>
<title>Lorem ipsum</title>
<pubDate>Wed, 19 Aug 2015 13:00:00 +0200</pubDate>
<link>http://...</link>
</image>

I hope this will help also other folks that are looking to work with Google Feed Api.

Answer 1

Are you sure that you have img parameter in data.responseData.feed.entries parameters ? your value.link is fetching values of link parameter from parameters of data.responseData.feed.entries but you don't have "img" parameter to fetch its value for

var image = '<img class="thumbnail" src="' + value.img + '">';

So you need store link of your image in data object you are loading, before you fetch undefined parameter.

Code below shows images, because there is defined link for those images. in data.responseData.feed.entries.value there is no img parameter to get the link through its value

function parseFeed(url, container) {
$.ajax({
    url: document.location.protocol 
         + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&callback=?&q=' 
         + encodeURIComponent(url), // "num=5" will show 5 articles
    dataType: 'json',
    success: function (data) {
        // log object data in console
        console.log(data.responseData.feed);
        // for each entry... *
        $.each(data.responseData.feed.entries, function (key, value) {
            //valid link to image source                
            var img = "http://rocketdock.com/images/screenshots/Debian-Logo.png"
            var title = '<li><a class="title" href="' + value.link 
            + '" target="_blank">' + value.title + '</a></li>';
            var image = '<img class="thumbnail" src="' + img + '">';
            var entry = '<div class="entry"><ul>' + image + title +  '</ul></div>';
            // * append entire entry in container
            $(container).append(entry);
        });
    },
    // if there's an error... *
    error: function (errorThrown) {
        // * log error message in console
        console.log(errorThrown);
        // * show error message
        alert('Niekde vo feede sa vyskytla chyba.');
    }
});
}
$(document).ready(function () {
   parseFeed('http://feeds.feedburner.com/FotoportlEphotosk-FotoFotografieFotoaparty',
 '#ephoto');
});

html,body {
background-color:#222;
color:#fff;
font-family:"Noto Sans", sans-serif;
font-size:1em;
font-weight:400;
line-height:1.45;
}

a{
  color: #fff;
  text-decoration: none;
}
img{
  width:50px;
  height:50px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="container">
    <div id="ephoto"></div>
</div>

Check your data from console you don't find img parameter.