changer l'avatar anonyme dans les commentaires de blogger

Question

Je rencontre des problèmes avec la modification de l'avatar par défaut utilisé dans les commentaires natifs Blogger/Blogspot pour les utilisateurs Anon + Name/Url.

J'ai essayé:

.avatar-image-container svg { 
    width: 35px; 
    height: 35px; 
    background-image: url(some-uploaded-photo.jpg); 
    background-size: contain; 
    color: transparent; 
} 
.avatar-image-container svg use { 
    display:none; 
} 

Ce:

<script> var oldSrc = '//img1.blogblog.com/img/blank.gif'; //Default blogger image link 
var newSrc = 'https://3.bp.blogspot.com/-UNjtW9_9fcs/VrvrBJi_8CI/AAAAAAAABP4/jjFMkoCi6Ig/s1600/blank-user-avatar.png'; //New image link 
$('img[src="' + oldSrc + '"]').attr('src', newSrc); </script> 

Ce:

<script src='http://code.jquery.com/jquery-latest.js'/> 
<script> 
$(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;) 
.attr(&#39;src&#39;, &#39;http://1.bp.blogspot.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/s1600/default_avatar.gif&#39;) 
.ssyby(&#39;blank&#39;) 
</script> 
<script src='http://code.jquery.com/jquery-latest.js'/> 
<script> 
$(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;) 
.attr(&#39;src&#39;, &#39;http://1.bp.blogspot.com/-eKbzORzVaBQ/T6ZXHmdgHqI/AAAAAAAACFs/rVy3T4gxojM/s1600/blogger-user.png&#39;) 
.ssyby(&#39;blank&#39;) 
</script> 

Et ce qui est très similaire à la première ci-dessus:

.avatar-image-container { 
background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/SxL-DRXzmWI/AAAAAAAACY0/d1g3ymxGLEQ/s400/avatar.gif); 
width: 36px; 
height: 36px; 
border-radius: 50px; 
border: 1px solid #fff; 
} 

Le plus proche d'un résultat est ce dernier code (il montre l'avatar utilisé ici) jusqu'à ce que j'ajoute le lien URL à ma propre image. J'ai essayé d'éditer le HTML direct et de l'ajouter en tant que CSS et essayé de l'héberger sur Blogger + en externe dans les deux formats JPG et GIF en vain.

Des idées? S'il vous plaît? C'est vraiment bizarre et ça me rend un peu noisette.

Merci!

:: blog que cela se rapporte à >> est https://guplayground.blogspot.com/ < <

Answer 1

// résolu //Utilisez une image (jpg/png) de 36 pixels x 36 pixels! Tout ce qui ne sera pas plus grande redimensionné en fonction de

;)

Answer 2

Que diriez-vous juste:

.avatar-image-container img { 
    content: url(http://1.bp.blogspot.com/_7wsQzULWIwo/SxL-DRXzmWI/AAAAAAAACY0/d1g3ymxGLEQ/s400/avatar.gif); 
    width: 36px; 
    height: 36px; 
} 

Edit: le va changer ci-dessus tous les avatars, voici donc une solution javascript qui ne fera que changer les avatars trouvés avec le nom de fichier anon par défaut:

<script type="text/javascript"> 
    (function() { 
    var avatars = document.getElementsByClassName("avatar-image-container"); 
    for (i=0; i < avatars.length; i++) { 
     var image = avatars[i].firstChild; 
     if (image.src === 'https://img1.blogblog.com/img/blank.gif' || image.src === 'http://img1.blogblog.com/img/blank.gif') { 
     image.src = 'http://1.bp.blogspot.com/_7wsQzULWIwo/SxL-DRXzmWI/AAAAAAAACY0/d1g3ymxGLEQ/s400/avatar.gif'; 
     image.style.height='36px'; 
     image.style.width='36px'; 
     } 
    } 
    })(); 
</script>