Posted 3 years ago #
I'd like to add links into the photo captions for when I'm linking to a flickr user and using the caption as a photo credit.
The caption is the alt tag and so when I insert html code into the caption box, it breaks the whole thing.
Is there a workaround for adding a hyperlink to the photo caption text?
Posted 3 years ago #
I'm wondering the same thing.
Insert the image first with a plain text caption. Then using the visual editor, select the part of the text you want to be the link, click the Link button in the editor, and type in the URL. The caption itself is text in the post, and can be edited in the post.
Posted 3 years ago #
i tried making the link in the visual editor, as suggested above, and when I save the page it strips out the link. any other sections? thanks!
Posted 3 years ago #
turn off the visual editor and try it in the html mode.
copy your link. highlight your caption. hit the link button and paste in your link. it should not matter if the alt tag is the same as the caption.
if you wish to open a new window when the link it hit add...
target="_blank" immediately following your link =
<a href="domain.com/path/" target="_blank">you caption</a>
the visual editor can sometimes breaks things.
Posted 3 years ago #
The html editor doesn't seem to work either. Any other suggestions?
Posted 3 years ago #
one way, strange though, of getting hyperlinks on image caption is explained here.
You could something like what I did:
Insert the image you want, click on it to edit. insert in the caption name field anything, "a" for example, and save. go to the html mode and you will see the "[caption]... [/caption]". insert the link you want before "[/caption]" within small tags. Like this:
[caption]...
<small>
Name of caption
</small>
[/caption]
Then, you have to remove the "a" you inserted just for the caption tag to appear in the code. Replace it with a simple blank space. If you remove everything that labels the caption in the code, the editor will remove the entire caption tag afterwords. A simple space is inoffensive. That's it.
Posted 3 years ago #
Whoa! How did anyone ever discover that? I'm impressed! :-)
My solution for now is simply to style p.image-caption so that it looks like an actual caption. I'm not thrilled with this, but (no offense) at least it's quick & easy. I'll experiment with yours, though. Thanks for posting it.
Posted 3 years ago #
pilcrow - Thanks for the much shorter solution. But the thing is I know very little of CSS. That's why I did that long solution. My knowledge is so shot that i didn't even understand your solution! Could you, please, give a short "tutorial" to how do it in your way? Tanks a lot!
Posted 3 years ago #
Sure. Sorry for being cryptic!
Don't use the image editor for captions at all. Instead, insert the image the usual way, and below it (in the post editor), type a paragraph with the photo credit link. Then switch over to html view and add <p class="img-cap"> before, and </p> after, the credit.
Now, in your stylesheet add something like
p.img-cap {
margin-top:-1.5em;
font-size: .75em;
font-style:italic;
text-align:right;
padding:2px 0 0;
}You'll probably want to adjust the margins & padding to suit your own theme; this is what worked with mine. Sorry my site's not live yet, or I'd show you it in action.
Posted 3 years ago #
We solved this on http://www.thegambiablog.co.uk by using a small amount of jquery code.
Basically in our captions we can add links like so:
This is a caption text {link:http://www.google.co.uk/}that links to google{/link} - great!
Then I put the following code in footer.php
<script type="text/javascript">
jQuery().ready(function() {
jQuery("p.wp-caption-text").each(function(n) {
this.innerHTML = this.innerHTML.replace(new RegExp("{link:([^}]*)}([^{]*){/link}"), "<a href=\"$1\">$2</a>");
});
});
</script>
Posted 3 years ago #
Hey jvmm, I'm trying your solution, but there's one thing I'm unclear on. Where do you insert the actual link? You demonstrate where "name of caption" is inserted, but I don't see any destination for the link itself. Thanks for the help.
Posted 3 years ago #
Hainesy82 - You rock! This solution works perfect, thanks for posting it!
Posted 3 years ago #
Agreed. Thanks Hainesy82.
Posted 3 years ago #
Absolutely what I was looking for, Hainesy82. Thanks!
Is it possible to target the link "blank" or, even better for me, to "shadowbox" it?
Posted 2 years ago #
Good Work Hainesy. Sometime, somebody should look at the code that handles the caption shortcodes and figure out why it's removing links. In the meantime, Hainesy's solution is great.
MrPascal, if you want to change the way the link is structured, just change this line:
this.innerHTML = this.innerHTML.replace(new RegExp("{link:([^}]*)}([^{]*){/link}"), "<a href=\"$1\">$2</a>");Regular expressions are wildly confusing, but you can think of this one like this: the \"$1\" is going to be your url - if you wanted to set it to target _blank, you'd just change it to this:
this.innerHTML = this.innerHTML.replace(new RegExp("{link:([^}]*)}([^{]*){/link}"), "<a href=\"$1\" target=\"_blank\">$2</a>");If you wanted to add some extra info to shadowbox the link, you'd just add whatever info you need after the url after the $1, and add the new class in the same place I added the "target".
Good luck!
Posted 2 years ago #
Thank you peterebutler! It works fine!
For the "shadowbox" option I did as you suggest:
this.innerHTML = this.innerHTML.replace(new RegExp("{link:([^}]*)}([^{]*){/link}"), "<a href=\"$1\" rel=\"shadowbox\">$2</a>")
Posted 2 years ago #
I've taken Hainesy82's great approach and tweaked it a bit.
<script type="text/javascript">
(function($){
$(function() {
$("p.wp-caption-text").each(function() {
var $caption = $(this).text();
$(this).html($caption);
});
});
});
</script>This method will allow you to add HTML to a caption inside of WordPress and have it parse out on your page.
Posted 2 years ago #
With the code above Hainesy82's link would be reformatted like this:
This is the caption text <a href="http://www.google.co.uk/">that links to google</a> - great!
Posted 2 years ago #
Hi, could reach to make that thing work.
But I was wondering why this wasn't a default feature of WordPress?
Cheers
Posted 2 years ago #
I've tried adding each one of the jquery scripts (separately) into footer.php, and then editing in visual (using the built in WP box), and editing the html. No matter what I do, it still strips out the link. I'm in version 2.8.2, can someone 'splain where I'm going wrong?
Mike
Hainesy82's code works perfectly but for some reason it breaks the float: left styling. I've tried using the image uploader alignleft function, I've tried inserting css into the img tag - nothing works. It just won't float.
Is there something about the caption or the jquery code that breaks the float function and if so, is there a way to fix it?
Update - it's definitely the Caption shortcode, not the jquery that's breaking the styling.
Is there a way to use float and Caption together?
This topic has been closed to new replies.
