Développements Bac à sable

Afficher la photo de profil à l'aide des CSS


Suite à l'arrivée des Thèmes de la 3e génération, les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes ou qui ne conviennent pas à votre nouveau thème !
Pour vous aider a développer votre thème, référez-vous :En cas de besoin, exposez votre cas sur le forum.
Description Gadget Type Default Gadget Version Layouts Version
Méthode qui permet de remplacer la traditionnelle balise <img/> utilisée pour afficher les photos de profil, par une image d'arrière-plan dans un cadre.
Blog
Profile
1
1
2
Méthode qui permet de remplacer la traditionnelle balise <img/> utilisée pour afficher les photos de profil, par une image d'arrière-plan dans un cadre.

Cette méthode peut s'avérer utile, si par exemple, la photo de votre profil est prise en considération au lieu de la photo de l'article lorsque vous partagez un article sur un réseau ou si vous ne souhaitez pas qu'elle se retrouve référencée.
En remplaçant l'image par la propriété CSS background, vous diminuez les risques que tout cela se produise.

Exemple de mise en œuvre avec l'option "Profil de l'auteur".

Recherchez
<b:if cond='data:post.authorPhoto.url'>
  <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>

Remplacez par
<b:if cond='data:post.authorPhoto.url'>
  <div expr:style='&quot;width: &quot; + data:post.authorPhoto.thumbWidth + &quot;px; height: &quot; + data:post.authorPhoto.thumbHeight + &quot;px; background-image: url(&quot; + data:post.authorPhoto.thumbUrl + &quot;); background-repeat: no-repeat; background-position: center; background-size: &quot; + data:post.authorPhoto.thumbWidth + &quot;px &quot; + data:post.authorPhoto.thumbHeight + &quot;px; margin: 0px 10px 10px 0px; float: left;&quot;'/>
</b:if>

Exemple de mise en œuvre avec le gadget "Profil".

Recherchez
<b:if cond='data:photo.url'>
  <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

Remplacez par
<b:if cond='data:photo.url'>
  <a expr:href='data:userUrl'><span class='profile-img' expr:style='&quot;width: &quot; + data:photo.width + &quot;px; height: &quot; + data:photo.height + &quot;px; background-image : url(&quot; + data:photo.url + &quot;); background-repeat: no-repeat; background-position: center; background-size: &quot; + data:photo.width + &quot;px &quot; + data:photo.height + &quot;px;&quot;'/></a>
</b:if>
Assistance publique pour le produit Blogger sur les supports  d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

Développements Multi-versions
Facebook : Boîte de commentaires [Comments Box]
Populaire
Base de connaissances Fonctionnalités Avancé
Populaire
Développements Multi-versions
Facebook : Bouton partager [Share button]
Populaire