How To Add Image in Tags ?

Question

Please Anyone Tell Me How To add Images in Tags this is same as stackexchange website but now  today i saw it in Question2answer Website 

http://serkan.varoglu.net/sorucevap/

Answer 1

You can add an image to tags using pure css. Just use a background image like:

 

  background-repeat: no-repeat;

  background-position: 2% 50%;

  background-image: url(tag-icon.gif);

  padding-left: 18px; /* make room for the image */

 

To add different images based on tag content would be more difficult. You could do this by adding a class based on tag content either server side or with jQuery.

 

It should be easy enough to create a jQuery function to insert the image based on tag content. This is not as desirable as server-side, but should be a lot easier.

 

 

Answer 2

The way they have done it on that site is to add the tag name as a class to the tag. For example this (in bold) for excel:

<li class="qa-q-item-tag-item excel"><a href="./tag/excel" class="qa-tag-link">excel</a></li>

You should be able to do this by overriding this in a theme:

function post_tag_item($tag, $class)
{
    $this->output('<LI CLASS="'.$class.'-tag-item '.$tag.'">'.$tag.'</LI>');
}

Then they just use a background image on that class to display the icons. Try Firebug plugin in Firefox or the Dev Tools in Chrome to see exactly what they did.

Comments

How can i implement this for "tags" page?

Answer 3

 

I Overwrite this function 

$this->output('<LI CLASS="'.$class.'-tag-item '.$tag.'">'.$tag.'</LI>'); 

 

but it convert css in this style 

 

<li class="qa-q-item-tag-item &lt;A HREF=" .="" tag="" facebook"="">facebook"&gt;<a href="./tag/facebook" class="qa-tag-link">facebook</a></li>

 

Which Gives output like this

 

 

 

 

Comments

try $this->output('<LI CLASS="'.$class.'-tag-item '.strip_tags($tag).'">'.$tag.'</LI>');

---

Thanks Merkus Its working .

---

mine don't work with this code. 1.5.4v
why?

Answer 4

Hello,

It's not difficult my friend, below the code to do it (i am inspired of the tags used in stackoverflow.com) !

<A HREF="./tag/html" CLASS="qa-tag-link t-fav">html<span class="supprimer-tag"></span></A>

And the CSS :

.qa-tag-link {font-size:11px; color:#407192; font-weight:normal; padding:3px 5px; margin-bottom:3px; background:#D8E6EF; display:-moz-inline-stack; display:inline-block; border-bottom:1px solid #436B84; border-right:1px solid #809FB4; vertical-align:middle; text-decoration:none;} /* inline-block for IE, -moz-inline-stack for early FF */

.qa-tag-link:hover {text-decoration:none; color:#ffffff; background-color:#356FCB;}

 

.t-fav

{

/*padding-right: 15px;*/

margin-right: 15px;

}

 

.supprimer-tag

{

background: url('delete.png') no-repeat scroll 0 0 transparent;

overflow:hidden;

vertical-align:top;

margin-top:1px;

margin-left:3px;

width:14px;

height:14px;

display:inline-block;

white-space: nowrap;

text-indent: -99999em;

}

 

.supprimer-tag:hover,.supprimer-tag:active{background: url('delete-hover.png') no-repeat scroll 0 0 transparent; cursor:pointer;}

 

 

PS : you must replace 'delete.png' and 'delete-hover.png' with your own images.

 

And below the result :

 

Cordially.