RSS Feed Icon durch CSS Sprite-Image ersetzen

In der IT-Cru - Das IT-Gewächs Drupal Trickkiste finden sich nun regelmäßig kleine nützliche Drupal Code Snippets, die einem beim erstellen einer Website basierend auf dem Drupal CMS behilflich sein können. Den Anfang macht hierbei die Ersetzung des RSS-Feed Icons mit einem Icon aus einem Sprite-Image.

Änderungen am Drupal 7 Theme

Einfach folgenden Code Snippet in das genutzte Drupal Theme in die template.php Datei integrieren und 'your_theme_name' durch den Namen des Themes ersetzen. Nun wird nur noch der Link zum RSS Feed von Drupal gerendert und man kann diesen mit ein wenig CSS Code und einem passendem Sprite-Image mit dem gewünschten RSS Icon versehen.

/**
* Overrides theme_feed_icon().
*/
function your_theme_name_feed_icon($variables) {

  // Taken from original function
  $text = t('Subscribe to !feed-title', array('!feed-title' => $variables['title']));

  // Overridden to not render an image element (will use 100% CSS here instead)
  return l('', $variables['url'], array('html' => TRUE, 'attributes' => array('class' => array('feed-icon'), 'title' => $text)));
}

Benötigtes CSS zum selektieren des Sprite Images

Beispiel für den möglichen CSS Code, um den gerenderten RSS Link mit einem 32x32 Pixel großen Icon aus dem Sprite-Image zu versehen, welches in der im images Verzeichnis liegenden sprites.png als erstes Icon auf Position x = 0 und y = 0 platziert ist.

.feed-icon {
  background: url("../images/sprites.png") no-repeat;
  background-position: 0 0;
  width: 32px;
  height: 32px;
}
.feed-icon a {
  display: block;
  font-size: 0;
  position: absolute;
  width: 32px;
  height: 32px;  
}

Weitere Quellen

• SpritePad
  Nützliches Webtool zum erstellen von Sprite-Images und dazugehörigem CSS
  http://spritepad.wearekiss.com/
• Drupal API Docs theme_feed_icon
  http://api.drupal.org/api/drupal/includes!theme.inc/function/theme_feed_icon/7