Show Icon on thread resonse or created by specific role

Requirement:

When a thread has a response, or is started by someone with the role of - "DigitalPlatforms Support"  or  - "Administrator" 
then we need to display an icon next to the thread display when viewing a board:
As an example, please see the following mock-up: https://playstation.box.com/s/wf8t6e7y69rvj63n194l  

We want to implement it on all the listing of threads on a boards  

E.g. We want  it on URL :  http://community.us.playstation.com/t5/PlayStation-General/bd-p/10031

Hi bhupen - The icon which you are referring to is the user role icon, and by default, it shows up along with the user name, i.e. in the Author row. I checked and noted that these default icons are hidden via CSS in PlayStation Community, using display:none;

CSS to be used to display them back again:

.messageAuthorColumn .UserName.lia-user-name img.lia-user-rank-icon-left {
    display: block;
    margin-left: -81px !important;
}

 Now, as you want to display this only for 2 roles, i.e. "DigitalPlatforms Support"  or  - "Administrator", so this can be done via jQuery:

ForDigitalPlatforms Support:

<img class="lia-user-rank-icon-left" title="DigitalPlatforms Support" alt="DigitalPlatforms Support" id="display_9" src="http://community.us.playstation.com/t5/image/serverpage/image-id/213315i52E5BF6439205975/image-size/large/is-moderation-mode/true?v=mpbl-1&amp;px=600">

For SMSCS:
<img class="lia-user-rank-icon-left" title="Administrator" alt="Administrator" id="display_7" src="http://community.us.playstation.com/t5/image/serverpage/image-id/213313i3C90E5E52BF684C6/image-size/large/is-moderation-mode/true?v=mpbl-1&amp;px=600">

So, you get to this node using jQuery, and the read the title attribute using .attr, and hide the icons which are not one of these 2.

<script>
 $(".thread-list .lia-list-row .messageAuthorColumn").each(function(){
 
var getRole = $(this).find('.lia-user-rank-icon-left').attr('title');

if(getRole != "PlayStation MVP" || getRole !="Administrator"){
     $(this).find('.lia-user-rank-left-icon').hide();
}
});
 </script>

I hope this helps.

Hi VarunLuthra  Thank you so much for this help and giving your precious time into it.

I did display back the icon on listing but somehow Iam not able to show desired icon on "DigitalPlatforms Support" or
- "Administrator". Icon is displaying for all.  Iam sure Iam missing something somewhere. Can you please have a look and suggest me the right steps.

I would like to display icon only on two roles."DigitalPlatforms Support" or - "Administrator" not for other.

Steps I followed:

1. Made a Digitalplatforms role in backend.

2. Put the following code in header section "Page Head Content" and "Page Header". I tried to put code on both section at a time because its not working in any place. First I put the code in "Page Head Content" and later on "Page Header".

<script>
$(".thread-list .lia-list-row .messageAuthorColumn").each(function(){
 
var getRole = $(this).find('.lia-user-rank-icon-left').attr('title');

if(getRole != "DigitalPlatforms" || getRole !="Administrator"){
     $(this).find('.lia-user-rank-left-icon').hide();
}
});
</script>
<script>
<img class="lia-user-rank-icon-left" title="DigitalPlatforms Support" alt="DigitalPlatforms Support" id="display_9" src="http://stage.community.us.playstation.com/html/assets/true.png" >

<img class="lia-user-rank-icon-left" title="Administrator" alt="Administrator" id="display_7" src="http://stage.community.us.playstation.com/html/assets/true.png" >
</script>

Help is appreciated.

Thanks & Regards

You're on the right track putting your script in the wrapper Page Head Content, though there are several other ways of including script blocks, depending on your preference.  Previous advice is sound, though you can probably simplify this one a bit.  You might leave the CSS rule which hides the icons, then just turn on the ones for the roles you want -- assuming you have far fewer Admin and Support users here than ordinary users -- which you should be able to select like so:

<script type="text/javascript">
	(function($){
		$(document).ready(function() {
			$('.lia-user-rank-icon-left[title="DigitalPlatforms Support"], .lia-user-rank-icon-left[title="Administrator"]').show();
		});
	})(LITHIUM.jQuery);
</script>

I've wrapped this in a doc.ready so it won't execute until all of the elements in question are loaded.  You could substitute Lithium versions of the <script> and doc.ready bits, though that's really not necessary if you're executing this in your wrapper header.

Cheers,

Tyson

Also, if you're going to stick this script in the wrapper header, you might want to wrap it with something like the following:

<#if page.name == "ForumPage">
<script>
...
</script>
</#if>

 So it doesn't execute on every single page on the site.

Cheers,

Tyson

Thanks Tyson.

But its not working for me. 

Hi bhupen - The method VarunLuthra mentioned is the way to go, I just made a few tweaks to it, it should work. Please check and let me know if you have any concerns.

  <script>
   $(".thread-list .lia-list-row .messageAuthorColumn").each(function(){
 
var getRole = $(this).find('.lia-user-rank-icon-left').attr('title');

if(getRole == "PlayStation MVP" || getRole =="Administrator"){
     
  $(this).find('.lia-user-rank-icon-left').show();
}else {
 $(this).find('.lia-user-rank-icon-left').hide();
  }

});
  </script>

Thanks VarunGrazitti  but Iam not sure what iam missing because nothing is working for me. I have followed the following steps but iam not able to make the changes. Please see the steps I followed and correct me If Iam doing anythig wrong:

Step One:

Put the folowing css on skin and enable the all icon

.messageAuthorColumn .UserName.lia-user-name img.lia-user-rank-icon-left {
    display: block;
    margin-left: -81px !important;
}

  aded a Digitalplatforms role in backend.

Step 2:

Put the following code in header section "Page Head Content" and "Page Header". I tried to put code on both section at a time because its not working in any place. First I put the code in "Page Head Content" and later on "Page Header".

Step 3:

Paste the following script on "Page Head content"

    -> script is about to show the icon on only on "DigitalPlatforms Support" or - "Administrator"  role.  But its not working at front end. Suggest me where to put i this script so that it starts working.

  <script>
   $(".thread-list .lia-list-row .messageAuthorColumn").each(function(){
 
var getRole = $(this).find('.lia-user-rank-icon-left').attr('**bleep**le');

if(getRole == "Digital Platform" || getRole =="Administrator"){
     
  $(this).find('.lia-user-rank-icon-left').show();
}else {
 $(this).find('.lia-user-rank-icon-left').hide();
  }

});
  </script>

Also I put the icon directly on img tag below script. its showing directly on front end

<img class="lia-user-rank-icon-left" title="DigitalPlatforms Support" alt="DigitalPlatforms Support" id="display_9" src="http://stage.community.us.playstation.com/html/**bleep**ets/true.png" >

<img class="lia-user-rank-icon-left" title="Administrator" alt="Administrator" id="display_7" src="http://stage.community.us.playstation.com/html/**bleep**ets/true.png" >

Please suggest me right step to accomplish this task:

Right now All icon are enable at front end. Although I want only show icon on the role of "DigitalPlatforms Support" and "Administrator".

Thanks

bhupen - you need to add following script to your header:

<@liaAddScript>
(function( $ ) {
$(document).ready(function(){
	  $(".thread-list .lia-list-row .messageAuthorColumn").each(function(){
	 
		var getRole = $(this).find('.lia-user-rank-icon-left').attr('title');

		if(getRole == "PlayStation MVP" || getRole =="Administrator"){
		 
		$(this).find('.lia-user-rank-icon-left').show();
			}else {
		$(this).find('.lia-user-rank-icon-left').hide();
		}

	});
});
})(LITHIUM.jQuery);
</@liaAddScript>

VarunGrazitti  thanks mate for help. I Can see now no icon are visible in front end but the issue is now I can't see the icon on "Administrator" and "Digital platform" role as well. Can you please suggest me the exact steps to put the code on right area to make it working. Please see the above trail I followed to put the code. Some how icon are not showing in front end but I can't see in desired role as well.

Please suggest me the right steps to accomplish it.

Really help is appreciated.

Thnaks