Latest News with automatic thumbnails in Magento

We already wrote about this subject, but now we give you a new, improved version of it.

Let’s say you want to have a sidebar box with the latest news from your wordpress blog on your magento powered store, and you want to show the thumbnails with it. We’re going to do it by displaying articles from our RSS feed.

First, we have to make sure to generate thumbnails in our Wordpres RSS feed. Just paste this class into your wordpress theme’s functions.php file. This function grabs the first image in your article and attaches it to RSS feed article.

class RssImage {
var $nextgen_shortcode_backup = array();
var $thumbs = array();
 
function RssImage() {
// 'wp' hook couse is_feed is too early for 'init'
add_action('wp', array($this,'init'));
}
 
function init(){
global $shortcode_tags;
if(!is_feed()) return;
add_action('rss2_item', array($this,'rss2_item'));
add_action('rss_item', array($this,'rss2_item'));
}
 
function rss2_ns(){
echo 'xmlns:media="http://search.yahoo.com/mrss/"';
}
 
function rss2_item(){
global $post;
$thumb = $this->get_thumb();
if(!$thumb) return;
echo "<enclosure url='".$thumb."' type='image/jpg' />";
}
function get_thumb() {
global $post, $posts;
$thumb = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img class="lazyload" .+data-src=[\'"]([^\'"]+)[\'"].*/><noscript><img .+src=[\'"]([^\'"]+)[\'"].*/></noscript>/i', $post->post_content, $matches);
$thumb = $matches [1] [0];
 
if(empty($thumb)){ //Defines a default image
$blogurl = get_bloginfo('stylesheet_directory');
$thumb = $blogurl."/images/default.jpg";
}
return $thumb;
 
// NextGEN gallery?
if (class_exists('nggdb')) {
$tagregexp = 'nggallery|imagebrowser|slideshow';
$pattern = '\[('.$tagregexp.')\b(.*?)(?:(\/))?\](?:(.+?)\[\/\1\])?';
$m = array();
if(preg_match('/'.$pattern.'/s', $post->post_content, $m)) {
$attr = shortcode_parse_atts($m[2]);
if(isset($attr['id'])){
if( ($gallery = nggdb::find_gallery($attr['id'])) and $gallery->previewpic){
if( ($image = nggdb::find_image($gallery->previewpic)) ) return $image->thumbURL;
}
}
}
}
return false;
}
}
 
$rssimage = new RssImage();

In order to create automatic thumbnails, we’re going to use smart image resizer. Download it and place image.php file in your magento theme’s skin folder.

After that,  create a file called latest_news.phtml in app/design/frontend/default/[your_theme]/template/callouts/latest_news.phtml. Here, we are going to grab image, title and summary from articles in feed and display it in magento.

< ?php $channel = new Zend_Feed_Rss($this->getUrl('press/feed/'));
function text_limit($string, $length, $replacer = '...') {
$string = strip_tags($string);
if(strlen($string) > $length)
return (preg_match('/^(.*)\W.*$/', substr($string, 0, $length+1), $matches) ? $matches[1] : substr($string, 0, $length)) . $replacer;
return $string;
}?>
<div id="news-box">
<div id="news-header"><a href="<?php echo $this->getUrl('');?>press/">view all</a></div>
<ul>
< ?php $newscount = 0; ?>
< ?php foreach ($channel as $item): ?>
< ?php $newscount ++; ?>
< ?php if ($newscount > 2) break; ?>
< ?php $image=''; ?>
< ?php $limit=150; ?>
<li>
< ?php $image= $this->getSkinUrl('')."image.php/".$item->enclosure['url']."?width=101&height=67&cropratio=3:2&image=".$item->enclosure['url'];?>
<a href="<?php echo $item->link; ?>"><img class="lazyload" data-src="<?php echo $image;?/><noscript><img src="<?php echo $image;?/></noscript>"  title="< ?php echo $item->title; ?>" width="101" height="67" /> </a>
<div>
<h2><a href="<?php echo $item->link; ?>">< ?php echo $item->title; ?></a></h2>
< ?php $excerpt = $item->description; ?>
< ?php if (strlen($excerpt) > $limit) :
$excerpt = substr($excerpt, 0, strrpos(substr($excerpt, 0, $limit), ' ')) . '...'; ?>
<p>< ?php echo $excerpt; ?>
<a href="<?php echo $item->link; ?>">Read more >></a>
</p>
< ?php endif;?>
</div>
</li>
< ?php endforeach; ?>
</ul>
</div>

You can change the limit of characters in the article excerpt by editing this line of code:

< ?php $limit=150; ?>

And you can change the size of your thumbnail by editing image width and height in this line of code:

< ?php $image= $this->getSkinUrl('')."image.php/".$item->enclosure['url']."?width=101&height=67&cropratio=3:2&image=".$item->enclosure['url'];?>

Now, all you have to do is decide where you want to show it. If you want to show it , for example, in your right sidebar,  open your app/design/frontend/default/[your_theme]/layout/catalog.xml file and under “default” tag update “right” reference with this:

<reference name="right">
<block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
<block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/>
<block type="core/template" name="right.latest.news" template="callouts/latest_news.phtml"/>
</reference>

And that’s it.

Hope you find this useful.

Cheers.