Change the XML or Feed icons with theme_xml_icon & theme_feed_icon
August 7, 2008 by Jeff
Here in the first of our series on over riding theme function we attack theme_xml_icon.
As you will read on the Drupal API page the function has largely been superseded by theme_feed_icon. Therefore it makes sense to look at both and kill two birds with one stone. They're very similar with only minor differences in their respective output.
So to the code - first lest take a look at the default functions.
<?php
function theme_xml_icon($url) {
if ($image = theme('image', 'misc/xml.png', t('XML feed'), t('XML feed'))) {
return '<a href="'. check_url($url) .'" class="xml-icon">'. $image .'</a>';
}
}
?>
<?php
function theme_feed_icon($url, $title) {
if ($image = theme('image', 'misc/feed.png', t('Syndicate content'), $title)) {
return '<a href="'. check_url($url) .'" class="feed-icon">'. $image .'</a>';
}
}
?>As we can see both theme functions are returning two things - an image with a link. Additionally theme_feed_icon returns the value of the $title.
Now, how to change the 
feed icon or the 
xml icon?
1) First you need to copy/paste the function into your themes template.php file.
2) Change the name of the function to match the name of your theme. Lets say your themes name is "mytheme", then your function should be named as such:
<?php
function mytheme_feed_icon($url, $title) {
// rest of code will be here...
}
?>3) All we need to do is upload an icon of our choice to our themes images folder and tell the function to use our new image. We do that by modifying the path to the icon. For example:
<?php
function theme_feed_icon($url, $title) {
// alter the path to the feed icon
if ($image = theme('image', 'path-to-my-theme/my-bad-ass-feed-icon.png', t('Syndicate content'), $title)) {
return '<a href="'. check_url($url) .'" class="feed-icon">'. $image .'</a>';
}
}
?>Now, I wanted a really huge feed icon, so for me the above function returns...
And for reference the output is...
<a class="feed-icon" href="http://adaptivethemes.com/rss.xml">
<img width="96" height="96" title="adaptivethemes RSS" alt="Syndicate content" src="/sites/all/themes/zen_naked/images/my-bad-ass-feed-icon.png"/>
</a>Now you sharp cookies out there will notice the output includes the image dimensions and an alt attribute - where did that come from! The key to that is the "image" theme function:
if ($image = theme('image',...)You can read more about over at the Drupal API site theme_image.
We'll also be covering theme_image later in the series.
The default icons won't always suit your custom design or palette so over riding this function is quite useful.
Comments
Post new comment