mardi 23 septembre 2014

Blogger - Blogspot : afficher des images miniatures en page d'accueil



Les snippets ou thumbnails calculés pour chaque image de votre blogspot, et qui servent notamment dans vos widgets de présentation de vos articles (articles populaires, articles au hasard) font partie de la machinerie Blogger et sont automatiquement créés lors de vos éditions de pages et vos chargement d'images. Ils peuvent donc être retrouvés aisément et affichés à votre gré, par exemple, sur votre page d'accueil, dans vos pages de catégorie - label, etc...



1. Afficher l'image miniature

L'affichage automatique des thumbnails ne se fait cependant pas par défaut. Certains templates les proposent avec, derrière, du code lourd à gérer et transformer. Il est pourtant bien plus simple d'utiliser les fonctions déjà active sur tout blogspot, en travaillant avec les données data:post.thumbnailUrl.

Ce paramètre affiche la première image de votre article, en miniature (72x72 px). Pour afficher vos thumbnail en page d'index, utilisez alors le code suivant : 

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:post.thumbnailUrl'>
<img class="postthumbnail" expr:src ="data:post.thumbnailUrl" expr:alt="data:post.title"/>
</b:if>
</b:if>

Ce code devra être placé de préférence, juste avant la balise <data:post.body/> (étalez vos widgets - précisément le Post, ou utilisez le raccourci alt+f pour retrouver facilement cette balise).

Si vous souhaitez utiliser les thumbnails dans vos articles ou pour chaque page de label, de recherche, etc... vous pouvez modifier les balises conditionnelles (<b:if cond='data:blog.pageType == "index"'>) à votre gré, selon les normes présentées dans cet article.

2. Définir le CSS

Afficher des images miniatures sur la page d'accueil de votre blog Blogger est sympa, mais vous aurez sûrement également envie de mettre en forme le snippet de sorte qu'il s'insère de façon agréable dans vos pages. Le code suivant, à ajouter dans votre header dans la section de style, vous y aidera.

.postthumbnail {
padding: 5px;
float:left;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

Vous pourrez avoir un aperçu du résultat ici même, sur la page d'accueil, ou sur d'autre sites de notre conception tels que www.joook.fr.

3. Changer la taille de l'image

Vous pourrez changer la taille de l'image en définissant des propriétés height et width dans le code de l'image, ou dans le fichier css en déclarant un nouveau groupe css : 

.postthumbnail img {vos-propriétés css}

Si néanmoins, vous souhaitez obtenir des images plus grandes, il peut vous être utile d'utiliser un peu de javascript pour redimensionner à la volée les thumbnails, remplacer le premier code, alors, par le code suivant, et définissez la taille de l'image (ici, 150px, à remplacer par ce que vous voudrez).

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:post.isFirstPost'> 
<script type="text/javascript">
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=150;
var show_default_thumbnail=true;
var default_thumbnail="http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumbnail" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
</b:if>
<script type="text/javascript">
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</b:if>

Vous voilà fin près pour agrémenter votre blog de belles images et de leurs miniatures en page d'accueil!

0 commentaires:

Enregistrer un commentaire