21 | Hyperlinks in wordpress image captions

Posted by alchymyth | Wordpress | Sunday 17 January 2010
one million dollars, copyright silkandart

one million dollars, copyright © silkandart, a source of inspirational art on silk

have a look at the image above and check the link within the image caption.
nice feature?
as many of you might have experienced before, the image caption function of wordpress filters all html content, including any attempts to insert  links.

however, this functionality would come very handy, if you want to credit the copyright owner of the image (which could obviously be yourself) by providing a one-click connection to their website.

the convention to insert the link into the caption text is:
‘text before the link ##http://www.linkurl.com##link text## text after the link’.
multiple links are possible.

i have choosen the double ## because it does not get filtered from the caption text and is very unlikely to be part of any normal caption.

here follows the code of the function:

add_shortcode('wp_caption', 'LinkInCaption');
add_shortcode('caption', 'LinkInCaption');
function LinkInCaption($attr, $content = null) {
// Allow plugins/themes to override the default caption template.
// to place a link in the caption you need to use following convention:
// 'text before link ##http://linkurl##linktext## text after link ' //
// more than one link allowed
// this function DOES NOT CHECK FOR CORRECT SYNTAX, i.e. the correct number of ##
// thanks to: @sagemintblue http://wordpress.org/support/profile/3715429 for the main function code
// text manipulation by: @alchymyth
$output = apply_filters('img_caption_shortcode', '', $attr, $content);
if ( $output != '' ) return $output;
extract(shortcode_atts(array(
'id'=> '',
'align' => 'alignnone',
'width' => '',
'caption' => ''), $attr));
if ( 1 > (int) $width || empty($caption) )
return $content;
$text=explode('##',$caption);
if( count($text) >= 3 ) :
$outtext=$text[0]; //start with the caption text to the left of the first ##
for($i=1; $i<count($text); $i=$i+3):
// add the link html codes to the respective places
$outtext = $outtext.'<a href="'.$text[$i].'">'.$text[$i+1].'</a>'.$text[$i+2];
endfor;
$caption = $outtext;
endif; // end of the caption manipulation
if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
return '<div ' . $id . 'class="wp-caption ' . esc_attr($align)
. '" style="width: ' . ((int) $width+10) . 'px">'
. do_shortcode( $content ) . '<p class="wp-caption-text">'
. $caption . '</p></div>';
}

don’t worry, the caption will look awful in the editor window, but should render nicely in the browser.
a very small side effect at this stage is that the image caption text appears in the alt text of the image the way you type it, including ## and link url.
the plugin does not check for the correctness of the input.

i would like to encourage you to explore the possibilities of the wordpress filters and functions on your own – nearly any idea can be realized by exploiting them.

be safe and use a virus scanner before downloading or installing any software

i managed to put the function into a plugin – HyperlinkCaption.zip – under the terms of the GNU General Public License:

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

code is poetry – code is alchemy

tagged: . . . . . . . . . .

12 Comments

Tobi | August 27, 2010

Thanks for this mate. You have just resolved a day long problem I’ve been having with WP. I’ve also modified your code to open the link in a blank window. Thanks again mate. Keep up the good work!

Burton F. Sailer | August 14, 2010

Useful post, Just subscribed to your feed.

Sam | August 12, 2010

Thank you so much – this has gone into use on my WP blog immediately.

Dan | August 9, 2010

Outstanding! Thank you so much for this much-needed feature.

Stu Tanquist | August 1, 2010

Thank you for the plug-in – it worked beautifully!

This is a slick way to credit the authors of photos licensed under Creative Commons.

Matthew Gore | July 20, 2010

This is sooo simple and works wonderfully! I’m a photographer and have been looking for a simple way to get links into image captions for months… I’m glad I ran across this. THANK YOU!

- Matthew Gore

DK Brainard | July 7, 2010

This works perfectly. Thanks a bunch!! You might want to spread the word at http://wordpress.org/support/ People are getting crazy over there!

Thanks again for the elegant solution. I’m gonna buy you a coffee now.

And please come over and read your horoscope any time you like.

DK

alchymyth | April 22, 2010

hi sander,
i have no plans to extend the plugin; i trust that the wordpress developers are going to include the link function into image caption very soon.

for now, you could just add this ‘target=”_blank”‘ into the plugin code;
as i’ve done here in the upoaded modified file http://wordpress.pastebin.com/m2Caw1Jb

Sander | April 22, 2010

Excellent tool !! Will this options be extended with an target=”blank” possibilty ? I am very curious for that.

wp-popular.com » | March 14, 2010

[...] post: TransformationPowerTools » hyperlinks in wordpress image captions | for personal growth and transfo… Tags: after-the-link, before-the-link, link-text, [...]

Amy | February 10, 2010

This was exactly what I was looking for, and it works like a charm. Thanks!

Conrad Zero» Free Media, or How to Not Be a Pirate – Conrad Zero – Gothic Author, Musician and Demonologist | February 9, 2010

[...] has fought hard to keep bloggers from attributing images by stripping links out of image captions, this kind soul has developed a working solution, which I now implement here at [...]

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Next article:
Previous article: