putting a 1px border under anchors is annoying when you can use underline.
if that’s good enough, set your a:hover style to remove the border and use ‘text-decoration: underline;’ instead.
if not, you’ll have to differentiate between image links and text links.
in your post you can do <a class=”classname” href=”url”, but that’s a bigger pain in the ass than it’s worth, isn’t it?
I think you’re better off just sacrificing the bottom border in lieu of the underline.
That’s a pretty good suggestion. But I’d like to know if there is another way, because on some of the other themes I’ve looked at they do dashed border. Plus, can I set the color of an underline?
Good quick fix though, thanks!
dashed borders are usually on things like <abbr> tags, and some link plugins will actually set styles for you, on links they automatically create based on keywords.
that’s really the only way to differentiate between anchors with images in them, and anchors with just text in them.
Unless you really want to add classes to all your anchored images, you don’t have a lot of choice.
There has to be some kind of indicator to differentiate, whether it’s the class or the containing element.
But is there some easy way to say “make all linked images have this anchor class”? Instead of having to hand code it myself every time? Which I did, by the way, and updated the css. it totally worked, thanks!
I didn’t know I could set the anchor class in the post itself (I use the wysiwyg editor usually) but if it auto-populates a link when i insert an image, surely it can auto-populate a link class as well, right?
anything is possible, the issue is only what it does by default, and good luck getting the visual editor to behave the way you would like.
“linked images” is a neat way of saying it, but unfortunately they’re different elements, not a single element with a link attribute… so it’s more accurate to say “link with an image in it” which doesn’t make it sound nearly as easy.
thing is, you can change the image based on something that happens to the link (which is it’s parent element) by doing:
a:hover img { border: 1px solid red; }
that’ll change the actual image border, for linked images but nothing else that’s linked… unfortunately there’s no way of getting a child element (like the image) to affect the parent element (the anchor).
Oh I know all about how it’s two separate elements, that’s what finally brought me here. And it’s not the visual editor that’s the problem.
basically, if i insert an image, through the image editor, it automatically sets it as a link to that image file. that’s no big deal. I even think it’s kind of neat. But if it is inserting the code:
<img src=”picture.png” />
I don’t see why it can’t just insert:
<img src=”picture.png” />
and, if it can do that, I should also be able to set what the actual name of that class is. and if it is possible, i could then make a theme that chooses that class (and maybe other classes) in the dashboard.
Basically, I don’t know where in all the code the visual editor pulls the html code from and thus how to make it a variable.
oops. you probably get the idea….
<a href="somepicture.png><img src="picture.png" /></a>
<a class="link-image" href="somepicture.png><img src="picture.png" /></a>
as much as I like details, I’m definitely not into trawling core code and making upgrades more difficult, over a blue underline. 🙂
but I wish you luck in working it out.
@crazytonyi
I have the exact same problem. I would also like to have the option to have different “link with an image in it” classes inserted automaticly to my posted images.
I tried every trick in the book by now to get this going without differentiating classes, but it just isn’t really possible. Therefore we would have to make adjustments to the WordPress core, like Ivovic mentions. This makes upgrading a pain in the but I guess, but I’m going to check it out.
I’ve been trying to figure this out too. I’ve developed a PHP function that kind of does this but isn’t great, still working on it. (Wish me luck.)
Alternatively I’ve written a JavaScript function that does the trick (but of course the web client will have to support it):
function anchorImageClass() {
var anchorTags = document.getElementsByTagName("a"); // get a list of all anchor elements
for (var i = 0;i < anchorTags.length;i++) { // loop through them
if (anchorTags[i].firstChild.nodeName == "IMG") { // if the first child node is an img tag
anchorTags[i].className = "imageLink"; // set class of anchor to imageLink
}
}
}
// tie function to onload event
window.onload = function() {anchorImageClass()};
Stick this between script tags in your header and it will add class=”imageLink” to all a tags which immediately wrap an img tag. A bit rough and ready but seems to work.
