DéveloppementsBac à sable

Afficher la photo de profil à l'aide des CSS


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
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>
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • 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éveloppementsFichiers XML
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire