display only image in simplepie using rss feed

Question

how to display only image in simplepie when using rss feed.I am using simplepie but enable to extract only image from rss.How to do this?

Answer 1

Considering certain feed structures are different, there is not an explicit way of doing this that I know of. This is how I was able to do it.First check out this article:

How to Display Thumbnail from WordPress RSS feed using SimplePie?

I was able to copy and paste the code and make some minor changes

I was not using Wordpress, but it helped give me an idea of what needed to be done.

Insert this code after feed->init();

    //This function will get an image from the feed

function returnImage ($text) {
    $text = html_entity_decode($text, ENT_QUOTES, 'UTF-8');
    $pattern = "/<img[^>]+\>/i";
    preg_match($pattern, $text, $matches);
    $text = $matches[0];
    return $text;
}


    //This function will filter out image url which we got from previous returnImage() function

    function scrapeImage($text) {
        $pattern = '/src=[\'"]?([^\'" >]+)[\'" >]/';
        preg_match($pattern, $text, $link);
        $link = $link[1];
        $link = urldecode($link);
        return $link;

    }

Now you want to call the functions so it searches the description, or in my case the content, to find the img tag and structure the output correctly. This is what my code looked like:

foreach ($feed->get_items(0 , 3) as $item):
    $feedDescription = $item->get_content();
    $image = returnImage($feedDescription);
    $image = scrapeImage($image);
    $image_url= $item->get_permalink();
    $description = $item->get_description();
?>
        <div class="item">
            <h4><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h4>
            <div class="image-box"><?php echo '<a href="' . $image_url . '"><img src="' . $image . '" /></a>'."\n";?></div>
            <p><?php echo $description ?></p>
            <p><a href="<?php echo $item->get_permalink(); ?>">Continue Reading</a></p>   
        </div>

    <?php endforeach; ?>

It may take some buggin, but once you know where your img tag exists in the feed, you can get simplepie to parse the feed and the function will find the tag and format so it is html ready.

To only pull one post, you can edit your loop:

foreach ($feed->get_items(0 , 1) as $item): 

The first number (0) is the starting point, 0 being the latest posts. The second number (1) is how many posts to pull. Since you only want one image, you want that number to be 1.

Answer 2

Maybe you would like to do it on the client side. Then it is quite easy with jQuery. Let's say your item-content in your javascript looks like this

var content = '<div><a href="http://kwout.com/cutout/b/es/y2/ukn_rou_sha.jpg"
imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;">
<img border="0" height="239" src="http://kwout.com/cutout/b/es/y2/ukn_rou_sha.jpg"
width="320"></a>Erat austro rerum.</div>';

Then you can easily identify and isolate an image within the content with the jQuery-selectors. For instance use

$(content).find('img:first');   //find the FIRST image inside an element or
$(content).find('a:first');     //take the hyperlink AND the image

If it's not the first image inside the content or the content is more complex than this example (mostly ;-) - no worry - then some other selectors will do the trick. Take a look at the documentation at jquery.com for more info.

This way I removed elements, added some or added classes to different elements in the content to show the post in my way.