1 Topic by scull (edited by 2015-04-10 11:52:00)

  • Registered: 2015-04-10
  • Posts: 5

Topic: How to make avatar grayscale in ie11 ?

Hi Guys

This is my 1st post in cutenews forum and would like to thank the cutenews dev team for this brilliant script.

My Problem
I have added an avatar field to my news template and wanted to make all images in it change to grayscale .
I have managed to make this work in all browsers appart from ie 10-11.
Can  anyone help me..

Here is my template code 

<div id="grayscale" style=" background-image:url({avatar});filter:gray;  filter: grayscale(100%); -webkit-filter: grayscale(100%); background-size: contain; height: 70px; width: 70px; border:0px solid black; border-radius: 50%; float: left; ">

I have tryed a few of the tricks using an svg filter to make this work which work outside the news.php embed but am having trouble implementing them inside the news.php embeded on my html page.

I Hope someone here can help thanks in advance.  https://cutephp.com/forum/style_emoticons/default/smile.gif

  • Registered: 2015-04-10
  • Posts: 5

Re: How to make avatar grayscale in ie11 ?

Ok I have found the answer no thanks to anyone here is this community dead ? as I see very few posts being answered.

Anyway just incase others want to know the answer here it is.....

You put this code inside your template 

<svg class="avatar" width="70" height="70" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
     <filter id="grayscale">
          <feColorMatrix type="saturate" values="0"/>
     </filter>
 <image xlink:href = "{avatar}"  width="100%" height="100%" filter="url(#grayscale)" />
</svg>

Then you can style it using your pages normal style sheet like this.... 

.avatar {
    border-radius: 50%;
    float: left;
}


Hope this helps someone.