Spam: The other white meat

Unless I am just completely missing it, the support for auto linking images back to their source for TinyMCE is just not intuitive. Since I generally upload a larger image than what I can use on a page, I want to have the image on the page link back to the larger one. Having to create a link after you have placed an image does not really make sense to me. So an obvious hack enters the room. Since we know that at least in Drupal, imaes that are in content areas of a post are likely to have been uploaded by a user, we can make a general assumption that these are likely to want to lnk to the original. jQuery of course gives us just enough power to be dangerous:

$(document).ready(function () {
$('.node .content img').each(function () {
var url = $(this).attr('src');
$(this).wrap('');
}); 
});

This snipped finds the images inside of a class node and class content (fairly standard for Drupal) and creates a link from the image src.

Now, this is a rather agressive hack. Instead of doing this to all images, it should be based on a class- it seems like you could choose a class for images in TinyMCE's image window, but in my very limited examination I did not see how to popuate this list. If this script was based on a user selected script, then you could safely mix it with other images that you want to link to other places or simply not link. 

To implement this automatically, you can stick the code into a preprocess function in your template.php:

<

p>

/**
* scab some javascript into every page load which 
* auto links images to help TinyMCE link images
* @param array $variables
*/
function phptemplate_preprocess_page (&$variables) {
$script = "
<script type="\"text/javascript\"">
<!--//--><![CDATA[//><!--
$(document).ready(function () {
$('.node .content img').each(function () {
var url = $(this).attr('src');
$(this).wrap('<a href=\"'+url+'\"></a>');
}); 
});
//--><!]]>
</script>";
$variables['scripts'] .= $script;
}