Better theme function
nicholas.alipaz - June 30, 2009 - 17:28
| Project: | Textimage |
| Version: | 6.x-2.x-dev |
| Component: | Miscellaneous |
| Category: | task |
| Priority: | minor |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
I would have posted this on the discussion in deciphered.com, but it seems to be broken.
I was looking at the theming function for this and feel it could be done better/differently. Here is what I came up with, based off the tutorial you guys linked to on the project page.
<?php
function framework_links($links, $attributes = array('class' => 'links')) {
global $language;
$output = '';
if (count($links) > 0) {
$output = '<ul'. drupal_attributes($attributes) .'>';
$num_links = count($links);
$i = 1;
foreach ($links as $key => $link) {
$class = $key;
// Add first, last and active classes to the list of links to help out themers.
if ($i == 1) {
$class .= ' first';
}
if ($i == $num_links) {
$class .= ' last';
}
if (isset($link['href']) && ($link['href'] == $_GET['q'] || ($link['href'] == '<front>' && drupal_is_front_page()))
&& (empty($link['language']) || $link['language']->language == $language->language)) {
$class .= ' active';
}
if (isset($link['href'])) {
if (strstr($key, 'menu-')) {
$title = $link['title'];
$path = theme('textimage_image', 'primary_links', $link['title'], array(), 'png', '', '', array(), TRUE, FALSE);
$size = getimagesize($path);
$output .= '<li'. drupal_attributes(array('class' => $class)) .' style="width:'.$size[0].'px;height:'.$size[1].'px;">';
$link['title'] = '<span style="background-image:url(/'.$path.');width:'.$size[0].'px;height:'.$size[1].'px;display:block;text-indent:-5000px;">'.$link['title'].'</span>';
$link['html'] = TRUE;
}
else {
$output .= '<li'. drupal_attributes(array('class' => $class)) .'>';
}
// Pass in $link as $options, they share the same keys.
$output .= l($link['title'], $link['href'], array('attributes' => array('title' => $title), 'html' => true));
}
else if (!empty($link['title'])) {
$output .= '<li'. drupal_attributes(array('class' => $class)) .'>';
// Some links are actually not links, but we wrap these in <span> for adding title and class attributes
if (empty($link['html'])) {
$link['title'] = check_plain($link['title']);
}
$span_attributes = '';
if (isset($link['attributes'])) {
$span_attributes = drupal_attributes($link['attributes']);
}
$output .= '<span'. $span_attributes .'>'. $link['title'] .'</span>';
}
$i++;
$output .= "</li>\n";
}
$output .= '</ul>';
}
return $output;
}
?>This produces links like these:
<ul class="links primary-links">
<li class="menu-242 first" style="width:44px;height:23px;"><a href="/" title="Home"><span style="background-image:url(/sites/default/files/textimage/1/12463820932957.png);width:44px;height:23px;display:block;text-indent:-5000px;">Home</span></a></li>
<li class="menu-268" style="width:152px;height:23px;"><a href="/philosophy.html" title="Philosophy & Curriculum"><span style="background-image:url(/sites/default/files/textimage/1/12463820936436.png);width:152px;height:23px;display:block;text-indent:-5000px;">Philosophy & Curriculum</span></a></li>
<li class="menu-269" style="width:151px;height:23px;"><a href="/registration.html" title="Registration & Admission"><span style="background-image:url(/sites/default/files/textimage/1/12463820934948.png);width:151px;height:23px;display:block;text-indent:-5000px;">Registration & Admission</span></a></li>
<li class="menu-270" style="width:113px;height:23px;"><a href="/classes-schedule.html" title="Classes & Schedule"><span style="background-image:url(/sites/default/files/textimage/1/12463820935558.png);width:113px;height:23px;display:block;text-indent:-5000px;">Classes & Schedule</span></a></li>
<li class="menu-273 last" style="width:89px;height:23px;"><a href="/tuition-fees.html" title="Tuition & Fees"><span style="background-image:url(/sites/default/files/textimage/1/12463820931029.png);width:89px;height:23px;display:block;text-indent:-5000px;">Tuition & Fees</span></a></li>
</ul>Why is this better? IMO SEO. You can still visibly display the text to bots and they look like typical links, but to the end user they receive the image.
Now I am not a fan of inline styles but this is the only way I can think to do it.
#1
BTW, one would need to add the appropriate styling to the stylesheet to do this. something like:
li{text-indent:-5000px;}
Perhaps other things as well.
#2
Hi Nicholas,
I believe you meant deciphered.net, not .com, and it's not broken, I just turn of commenting on posts older than two months as I found that reduced spam issues and irrelevant posts.
I will take a look at this as soon as I have time and if what you say is correct that it is a better option I will update the tutorial. If I do make the update I would also like to give credit where credit is due, so do you have a blog or website you would like linked?
Cheers,
Deciphered.
#3
Thanks for offering the credit. You may link to http://nicholas.alipaz.net/
Thanks for taking the time to look at it. I only thought the site was broken because it doesn't tell me that commenting is "disabled" it just tells me there is an issue.