Can I make the "Flag this" link an image?

First, upgrade to the "dev" version. The "beta3" you're using is very old (we will soon release "beta4").

You'll find a Theming guide in the handbook.

1) Using an img tag as the actual message. No good, because all the special characters are escaped.

Open 'theme/flag.tpl.php' in an editor. You'll find that the text of the link is wrapped in strip_tags(...). That's the reason you can't embed HTML in labels. You can remove this wrapping if you want to be able to use HTML directly in labels.

I've just opened an issue, #304369: Allow HTML in the flag text?

But instead of removing the "strip_tags" you can type the "{img src=...}" directly into the template. This is better, because the label may appear in other places in Drupal, and you wouldn't want to mess it up with markup.

Of course, you'll want to copy 'flag.tpl.php' into 'flag-favorites.tpl.php' (replace 'favorites' with the machine-name of your flag), because you wouldn't want all flags to look the same. Copy that file into your theme folder. The instructions are in 'theme/README.txt'.

2) Adding in the "flag_create_link" function, before realizing that that's for Drupal6.

It's for D5 as well, it's just that it isn't in the old "beta3". But this function isn't used for theming: it's used for placing. The handbook explains this as well.

Can I suggest that the handbook pages have some sort of version number included in them?

That won't be needed: beta4 is about to be released.

Our handbook was revamped only very lately. It wasn't yet "advertized". It's kind of secret.

For the short period of time till beta4 is released, we'll rely on the axiom "Users never read documentation", so no confusion will arise.

Of course, you're right in what you're saying. Thanks for the comments. I hope such a state won't occur again in the future. We should release more often.

===

if ($action == 'flag'){$img_tag = '<img src="/themes/mytheme/images/add_to_favorites.png">';}
if ($action == 'unflag'){$img_tag = '<img src="/themes/mytheme/images/remove_from_favorites.png">';}

Or you could do something along of:

if (file_exists(..... $flag->name . '-' . $action . '.png')) {
  $img_tag = '<img src="....... $flag->name . '-' . $action . '.png">';
}

Then you wouldn't have to update the template for every flag.

I think I'll put the recipe to this in the handbook. (And I think we will remove the strip_tag() so it'd be possible to do this in a preprocess function and not alter the template.

I put the recipe in the handbook:

How to show images instead of text

(But note the message at the bottom of that page: you'll have to upgrade your 'dev'.)

In addition, it might be that, in the final release, we'll use two dashes in the template name: flag--bookmarks.tpl.php instead of flag-bookmarks.tpl.php.

[...] Please don't switch to two dashes in the name
my favorite thing [...] is how I don't have to relearn paradigms for every new module

Thanks for the feedback. It's important that we know what users prefer.

it now seems that we'll switch from "flag-bookmark.tpl.php" to "flag-link-bookmark.tpl.php". I'm not very happy about this, about lengthening the file name.

Everything else I've done in Drupal uses single dashes

(This changes with Views 2.x, which uses two dashes.)

subscribing

HAHA! I've tried glaring at the screen too, it never works.

Thanks so much for this post, it was very helpful. Got an image working!

just wondering the steps you took to get it working.
i am still having trouble replacing the default flag link, with a custom image...

thanks!
chris

I've tried both ways but couldn't get an image to show up for drupal 6.

I made so:
(senks http://odrupal.ru/drunews/snippety/zamenit-ssylku-modulya-flag-na-izobra... )

1. Copy flag.tpl.php in folder theme;
2. In template.php past function:

function framework_preprocess_flag(&$vars) {
$image_file = path_to_theme() . '/images/flag-' . $vars['flag']->name . '-' . ($vars['action'] == 'flag' ? 'off' : 'on') . '.png';
// uncomment with testing
//drupal_set_message("Поиск изображения '$image_file'...");
$vars['link_text'] = '';
}

in path images themes copy images with name lag-[flag-name]-off.png и flag-[flag-name]-on.png

Work!

Using @marycka9 's code as inspiration, here is how to do it in Twitter Bootstrap:

// Function to enable css glyphicon flags instead of text flags
function THEMENAME_preprocess_flag(&$vars) {
	if ($vars['action'] == 'flag') {
	//Flag Off
	$csselement = '<div class="glyphicon glyphicon-unchecked"></div>';
	} else {
	//Flag On
	$csselement = '<div class="glyphicon glyphicon-check"></div>';
	}
	$vars['link_text'] = $csselement;
}