DéveloppementsBac à 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 Gadget Version Template 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

ThéorieFonctionnalitésOrganigramme
Populaire
ThéorieRéférences XMLBalises
Les balises de marquage par défaut [b:defaultmarkups / b:defaultmarkup]
Populaire
DéveloppementsMulti-versions
Populaire
DéveloppementsFichiers XML
Populaire
ThéorieFonctionnalitésÉditeurs
Populaire