By SkullSplitter on
Heya :)
Whats the right way for Block Titles Image Replacement ?
for CSS it will looks so :
#block-menu-secondary-links h2 {
text-indent: -2000px; /*text is out of the way*/
background: url(image.gif) no-repeat right center; /* background image for title */
width:80px; /* substitute with actual width of image */
height:20px; /* substitute with actual height of image */
}
or in the block.tpl.php:
<?php
if ($block->module == 'user' && $block->delta == 1) {
$block->subject = t('admin.jpg');
}
else if ($block->module == 'user' && $block->delta == 3) {
$block->subject = t('Online.jpg');
}
... insert more Blocks ...
?>
<div class="block block-<?php print $block->module ?>" id="block-<?php print $block->module ?>-<?php print $block->delta ?>">
<h2 class="title"><?php print $block->subject; ?></h2>
<div class="content"><?php print $block->content; ?></div>
</div>
But whats the right way now ?
I changed my RSS-Feed Icon in the template php :
<?php
function skulltheme_feed_icon($url, $title) {
$img_path = drupal_get_path('theme', 'skulltheme') .'/rss_feed.png';
if ($image = theme('image', $img_path, t('Syndicate content'), $title)) {
return '<a href="'. check_url($url) .'" class="feed-icon">'. $image .'</a>';
}
}
Is it possible to make it working for Block titles too ?
Thx in advance
(Sorry for my broken english, i´m german ;) )
Comments
...
Well, the second method is not Image Replacement, it simply completely removes the text and places an image instead, true image replacement retains the text for SEO and accessibility (you can use ALT text of course). Do not use the t() function, that is for translating text, which you could use for the ALT attribute, such as in the theme_image function in the last example (do use theme_image for this).
The last example is just using a Drupal theme function, and of course you could write a function to do this for all block titles.
IMO the proper way is the CSS only Phark method in the first example, because it retains the actual block subject. I just added a comment that shows how to use it for node links - http://drupal.org/node/259742
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
your comment looks like my
your comment looks like my first example :)
But thanks anyway for your proper way :)
...
It doesnt look like it, it is it, its the extremely well known and widely used Phark method. You asked of which options is the proper way, I gave my opinion. Sheesh... what do you expect?
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
Its right ... its the Phark
Its right ... its the Phark method ...
I think i will use this one ... thx the 4 infos