Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+4 votes
1.9k views
in Plugins by

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/

4 Answers

+1 vote
by

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.
 
 
+5 votes
by

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.

by
How can i implement this for "tags" page?
+2 votes
by

 

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
 
 
 
 
by
try $this->output('<LI CLASS="'.$class.'-tag-item '.strip_tags($tag).'">'.$tag.'</LI>');
by
Thanks Merkus Its working .
by
mine don't work with this code. 1.5.4v
why?
+1 vote
by
edited by

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.

...