one million dollars, copyright © silkandart, a source of inspirational art on silk
hover over 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);
$limit = 1+3*(ceil(count($text)/3)-1);
$text=explode('##',$caption,$limit);
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
if(strpos($text[$i],'http://')===false) {
$outtext = $outtext.$text[$i+1].$text[$i+2]; }
else { $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.
Consider the above just as an idea how to ‘hack’ into the caption shortcode -
- for a working solution, there is a plugin available, ‘Links in Captions’, by Zack Katz.
Thank you so much for the code. I’ve gone through so many different versions from different sources for adding image caption links, and yours was the simplest and the only one that actually worked smoothly. My one question is:
How do I assign a css style specific to the caption and caption link? After I added your code to my functions.php, my captions seem to have taken on my and styles.
no idea why the styles should be effected – i can have a quick look if you post a link to your site, to a post/page with captions.
have you tried this plugin: http://wordpress.org/extend/plugins/links-in-captions/
imho, a cleaner alternative.
I created a plugin that has the same functionality, as well as
targetandrelcapabilities. It’s been submitted to the WordPress.org plugin directory: Links in Captions Plugin. It uses shortcode functionality instead of the##concept to parse the links.It’s not yet live on WordPress.org, so until that time, you can access the download here.
Thank you, Zack, for this clean solution.
the syntax is so close to a html link tag, that it is quite easy to remember.
I am going to link to it when the plugin is in the wordpress plugin directory.
The website author has a specified skill to describe actually incredibly excellent topics. Reading this net website is truly enjoyable and you’ll locate surely a lot of excellent comments. In any circumstance, it was a pleasure to invest time with your website site and go through the exciting report.
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!
Useful post, Just subscribed to your feed.
Thank you so much – this has gone into use on my WP blog immediately.
Outstanding! Thank you so much for this much-needed feature.
Thank you for the plug-in – it worked beautifully!
This is a slick way to credit the authors of photos licensed under Creative Commons.
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
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
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
Excellent tool !! Will this options be extended with an target=”blank” possibilty ? I am very curious for that.
Pingback: 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, [...]
This was exactly what I was looking for, and it works like a charm. Thanks!
Pingback: 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 …