Image bullets in sidebar links…

Hey, just to clarify, I pretty much want to use a separate bullet image for a boy and a girl.

So for instance, here’s my blogroll right now:

https://www.fiahmad.com/pictures/wordpress/wordpress_help1.gif

And this is what I want it to look like:

https://www.fiahmad.com/pictures/wordpress/wordpress_help2.gif

you want to set list-style-image for the boy and girl class you add to your li or anchor tags. And then add some padding-left to make room for the image.

Thanks geoffe :-), but I’m not sure exactly what you mean. Could you elaborate further? Thanks. ??

The primary trick you need to pull is to set some property for each link to indicate whether the blog you link to is that of a male or female.

You are just entering each link into WordPress and letting WordPress spit out the code for them? I’m not sure how, but you need some way to assign a property to each link or else you will need to write out the code on your blog and not use the WordPress engine to write your links.

If you figure out that, you can set the a or li tags to class=”boy” and create a rule in your style.css that would say:

.boy {
list-style-image: url(boy.gif);
}


Unfortunately, the link images and the link names are contrary. If you turn on images, the name goes away.

However, you can turn on both the link images and the descriptions together. Then make your link descriptions be what you want to display. Downside to this is that only the image is the link, the description is not shown as a link.

Alternatively, a simple change to WordPress will allow you to show both the link_images and the name. Open wp-includes/links.php. Find this bit of code around line 250-ish:


if (($row->link_image != null) && $show_images) {
if (strstr($row->link_image, 'http'))
$output .= "<img src="$row->link_image" $alt $title />";
else // If it's a relative path
$output .= "<img src="" . get_settings('siteurl') . "$row->link_image" $alt $title />";
} else {
$output .= $name;
}


Change it to this:

if (($row->link_image != null) && $show_images) {
if (strstr($row->link_image, 'http'))
$output .= "<img src="$row->link_image" $alt $title />";
else // If it's a relative path
$output .= "<img src="" . get_settings('siteurl') . "$row->link_image" $alt $title />";
$output .= $name;
} else {
$output .= $name;
}


Note that I only added one line of code there.

This will make the name appear after the image in the links lists. You’ll still need to turn on showing images for the link category though. But you can then use the image field in each link to define a custom image for that link.

I’m not sure what Otto is talking about.

Here’s a stylesheet rule to add to your css to give all your links the guy image next to them:
#linkcat-2 a {
background: url('https://fiahmad.com/wordpress/wp-content/plugins/more-smilies/Islamica/brother.gif') no-repeat 2px !important;
padding: 7px 0 7px 29px !important;

}
I don’t know if there is a way to set a property to your link that would let you distinguish it with a different class. If I find out I’ll post it here.

But if there is, you’d just set the li or a to style=”girl”, and then it would require a new style rule pointing to the other image.

geoffe: What I was talking about was doing it without screwing around with CSS or trying to figure out how to set properties on the links.

WordPress’s Links Manager lets you define an image for each and every link. You can then set categories of links to show those images instead of the name of the link, when it displays on the page. This is all done in the admin screen.

However, if you use that images functionality, the name of the link is replaced by the image. So it’s either image or name, not both.

What I was describing was how to change WordPress to make it show both the image you define and the name of the link. This solves his problem without the drastic changes that would be required to define a new independant class for the links so that your CSS idea would work.

good explanation. It’s okay if you want to call my drastic idea ‘stupid’. Be as snarly as you want to be.

Is it drastic to lose all the names for the links? Then all the names of his friends will be gone, and only the web addresses remain, with images next to them? Is that correct?

It’s okay if you want to call my drastic idea ‘stupid’.

I didn’t say that. I didn’t even mean to imply that. Sorry if it came across as “snarly”, that was not my intention. ??

I only meant that your idea was more drastic because it would probably require significantly more changes to the links system. You’d need to add the ability to define a custom class for each link, which would probably mean changing the interface, adding a database column, etc. It’s a big thing, in other words.

As to your question, yes, by default, the link names won’t display if you use link images. It only shows an image, and the image is the link. But, the names are still there in the database.

The one-line modification I was suggesting will make it display both the images AND the names as the link, which is sorta what he’s wanting. The ability to define an image for every link and still keep the names there.

Rather than creating a field in the database, couldn’t the assignment of a link category of ‘boys’ or ‘girls’ suffice?

Or you could type in boy or girl in the short description field and then you’d have to add this line to links.php at line 235:


if ('' != $desc) $title .= ' style="' . $desc . '"';

This means that you’d add one line to links.php and you’d add two new style rules, but then all you’d need to do in the administration panel is type boy or girl (or just girl, where necessary, if the default is boy) rather than type in the image url for every link.

Yes, that would probably work, but you’d lose the use of the description field as a description field, if you wanted to use it for something else.

As for typing URLs, meh. Cut and paste, brother. ??

Still, yeah, either solution would work. I like mine better because it doesn’t involve messing with the CSS and it uses the image field mostly for what it was intended for and it gives you finer grained control without editing text files any further (web interface only after the one line change).

Your solution has the advantage that you’re essentially dividing the links into a sort of sub-category by using description as a class/style, then using the CSS to put images in front of them.

To each his own. ??

Now that I look at what link categories does, you could also just set a boy and girl category for links, then for the formatting options, set the Before link field to:

<li style="background: #fff url('https://fiahmad.com/wordpress/wp-content/plugins/more-smilies/Islamica/brother.gif') no-repeat 2px !important;padding: 2px 0 3px 25px !important;">

and change the image for the girl category. Then there is no editing of any files and the only work that needs to be done is set the category.

It would be more efficient in the HTML that WordPress spits out to use a CSS class rule than to have it spit out a rule for each link.

If you use two different categories, how do you display both categories in one list of links?

hmmm.. no clue. As it is, I’ve not used links at all with WP. Doesn’t wp_get_links list all links regardless of category, if no category is set?

His current links are in a list with an id of #linkcat-2 because they are in a link category with an ID of 2. Are there other categories at work?

if anyone is still interested, or hasn’t found it in another topic, ive found an ‘easy’ way to sort this.

in wherever you want the list to display make your li tags like this:

<ul><li id=boy>fred</li>
<li id=girl>jane</li></ul>

this then makes each link dependent on whether it is a boy or a girl, and different images can be displayed...so

...on your stylesheet add

#boy {background: url(..boy.png) padding:xxx;}
#girl {background: url(..girl.png) padding:xxx;)`

you then need to change the specific padding to fit the image in:

#cronies ul li {padding: 0px 0px 0px 10px;}

this id is the one for where your list is, the equiv to sidebar, navigation etc etc

hope this helps