Latest News with automatic thumbnails in Magento

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 .+src=[\'"]([^\'"]+)[\'"].*/>/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 src="<?php echo $image;?/>"  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.

You made it all the way down here so you must have enjoyed this post! You may also like:

Show product thumbnail in grids Petar Sambolek
Petar Sambolek, | 14

Show product thumbnail in grids

We renewed our Magento Silver Partnership Status Tomislav Bilic
, | 6

We renewed our Magento Silver Partnership Status

Breaking News! eBay Acquires Magento! Tomislav Bilic
, | 62

Breaking News! eBay Acquires Magento!

7 comments

  1. Hopefully this shows up

    [custom_fields]
    [field key=”Author”]
    [![CDATA[Author]]]
    [/field]
    [field key=”Thumbnail_URL”]
    [![CDATA[thumbnail_url]]]
    [/field]
    [/custom_fields]

  2. Looking a gift horse in the mouth a bit but is there a way to do this using custom fields in magento? I’m using a variation of your code from the march post but we’re trying to pull the thumbnail as well without touching core code too much. The RSS output looks like this:

    Any help will surely be appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.