Hexo image hacking

As I just started blogging on the hexo platform I quickly stumbled upon a behavior that was not what I expected.

I wanted to insert an image that links to a different site, but because of the fancybox implementation whenever you clicked the image, it would open the image rather than opening the link as I wanted.

For example, I want to show my StackOverflow flair image and point the link at the profile page:

1. The most basic thing you would try is:

[http://stackexchange.com/users/flair/17621.png](http://stackexchange.com/users/17621)

This will render like this:

https://stackexchange.com/users/flair/17621.png

Obviously not what you’d expect. All right, maybe what you’d expect, but certainly not what we want.

2. Trying to fix our initial mistake, try and render the image in the tag

[![Alex Drenea's Stack Exchange profile](http://stackexchange.com/users/flair/17621.png)](http://stackexchange.com/users/17621)

Rendering like:

This is close to what we want, but not exactly there. If you click on the image, it just open the fancybox for that image, but I want clicking the image to take me to the destination website instead. I don’t like the caption under the image in this case even though it points to the right link. But I want the image to go to the link. I also don’t like the center alignment.

3. Defining the image explicitly with HTML in the tag does not help

[<img src="http://stackexchange.com/users/flair/17621.png" width="208" height="58" alt="Alex Drenea's Stack Exchange profile" title="Alex Drenea's Stack Exchange profile">](http://stackexchange.com/users/17621)

Renders same as the other option.

4. Last ditch effort, define everything in HTML

<a href="http://stackexchange.com/users/17621">
    <img src="http://stackexchange.com/users/flair/17621.png" width="208" height="58" alt="Alex Drenea's Stack Exchange profile" title="Alex Drenea's Stack Exchange profile">
</a>

Still nothing.

5. Time to see what’s going on here.

Frustrated from all the attempts I start looking at the generated html page. Surprisingly it looks fine:

<a href="https://stackexchange.com/users/17621" target="_blank" rel="external">
    <img src="https://stackexchange.com/users/flair/17621.png" width="208" height="58" alt="Alex Drenea's Stack Exchange profile" title="Alex Drenea's Stack Exchange profile">
</a>

But when I look in the actual rendered page source, it’s different.

   <a href="https://stackexchange.com/users/17621" target="_blank" rel="external">
       <br>
       <a href="https://stackexchange.com/users/flair/17621.png" title="Alex Drenea's Stack Exchange profile" class="fancybox"  rel="article0">
           <img src="https://stackexchange.com/users/flair/17621.png" width="208" height="58" alt="Alex Drenea's Stack Exchange profile" title="Alex Drenea's Stack Exchange profile">
       </a>
    <span class="caption">Alex Drenea's Stack Exchange profile</span>
    <br>
</a>

Must be an evil Javascript script that’s messing with my page at run-time. More digging and sure thing, there it is:

$(this).find('img').each(function(){
	if ($(this).parent().hasClass('fancybox')) {
	    return;
	}
	var alt = this.alt;
	if (alt) {
	    $(this).after('<span class="caption">' + alt + '</span>');
	}
	
	$(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
}

So it looks that for every img tag that does not have a “fancybox” parent, this script will add a wrapper to make it fancybox. I tried disabling the fancybox from the theme but this script is still there.
But does not matter, I now have the solution.

6. The fix

Notice the class attribute on the a tag. It’s tricking the Javascript script to think it already generated the fancybox enclosure for the image so it does not do it again.

<a href="https://stackexchange.com/users/17621" class="fancybox" target="_blank" rel="external">
    <img src="https://stackexchange.com/users/flair/17621.png" align="left" width="208" height="58" alt="Alex Drenea's Stack Exchange profile" title="Alex Drenea's Stack Exchange profile">
</a>

Aligning the image easlily done with the ‘align’ attribute.
Perfect!!!!

If there’s anything I missed and this is actually easily handled by default by hexo, please let me know in the comments.