Se jouer des apparences : Leçon 1
Dans cette suite de 3 articles autour des habillages avancés de TypePad, nous allons vous montrer comment réutiliser simplement les contenus déjà publiés sur votre blog pour :
- Inviter les lecteurs à découvrir une rubrique particulière de votre blog
- Rendre votre blog visuellement plus attractif en laissant parler vos contenus
Les pré-requis :
- Etre en habillage avancé,
- Avoir quelques notions CSS/HTML
Attirer l'oeil sur une catégorie
Pour commencer en douceur, nous allons ici nous intéresser à un tag TypePad particulier : MTEntryBodyFirstImage.
Les habitués de la langue de Shakespeare auront tout de suite compris son objet, récupérer la première image insérée dans le corps d'une note.
Il est de plus possible de faire appel à ce tag au sein du container MTEntries, celui-là même qui vous permet de filtrer vos notes par catégorie ou par période.
Vous voyez tout de suite où nous allons en venir : la création d'un module affichant les dernières notes d'une catégorie mais sous forme de mur d'images.
Etape 1 : création du module de gabarit
Dans notre blog en habillage avancé, nous allons créer un nouveau module de gabarit.
Celui-ci, appelé "mur-d-image", contiendra le code suivant :
<MTEntries lastn="10" category="Club VIP">
<div class="mur-image"><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryBodyFirstImage$></a></div>
</MTEntries>
Nous demandons ici à TypePad de nous générer une liste des 10 dernières entrées pour la catégorie "Club VIP", chaque entrée aura une image, sur laquelle un lien sera effectué vers la note d'origine (le permalien).
Etape 2 : donner du style
Le tag MTEntryBodyFirstImage récupère la vignette générée dans votre note, aussi, la taille de cette dernière pouvant varier, nous allons ensuite jouer avec la feuille de style pour garder un rendu homogène.
Pour cela, nous allons ajouter à notre feuille de style la classe suivante :
.mur-image{
width: 50px;
height: 50px;
float: left;
overflow: hidden;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
}
La zone d'affichage par vignette sera de 50x50 pixels, les images s'empileront latéralement par la gauche dans l'espace disponible, nous masquerons les éventuels dépassements de vignette par rapport à la zone d'affichage, et juste pour le rendu graphique, nous ajouterons un débord de 5 pixels à la vignette, ainsi qu'une marge de 5px à chaque vignette ainsi qu'une petite bordure grise.
Etape 3 : Afficher le module
Il ne nous reste plus qu'à faire appel à ce module depuis le gabarit de notre choix.
Pour l'exemple donné, nous allons coller ce mur dans le bas de la page d'accueil du blog de la communauté, via la ligne <$MTInclude module="mur-d-image">.
Pour nous simplifier sa mise en page, nous allons reprendre le style appliqué aux notes pour encapsuler le module. Dans notre gabarit Index, nous allons donc ajouter les lignes suivantes :
<div class="entry">
<h1 class="entry-header">Les VIPs en image</h1>
<$MTInclude module="mur-d-image">
</div>
Une fois ceci fait, il ne nous reste plus qu'à republier notre blog et en retour, nous disposons d'un mur d'image agrémentant simplement notre blog et mis à jour automatiquement (voir le bas de page du blog de la communauté).
Bonus : Déporter ce mur dans un autre site
Si vous disposez d'un autre site, ou d'un autre blog et que vous souhaitez créer un pont entre eux, il vous suffit de reprendre le code de l'étape 1 et de demander à TypePad de générer un Javascript pour le site distant.
Le code devient ainsi le suivant :
<MTEntries lastn="10" category="Club VIP">
document.write('<div class="mur-image"><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_js="1" $>"><$MTEntryBodyFirstImage$></a></div>');
</MTEntries>
En dehors d'encapsuler le code initial dans du javascript, nous avons aussi, à titre de précaution, ajouté l'option "encode_js", de façon à prévenir une rupture du javascript du fait de caractères tels l'apostrophe.
Comme c'est un fichier indépendant dont nous avons besoin, nous allons cette fois-ci créer un nouveau gabarit index, dont le nom sera "Mur d'image" et le fichier généré "mur-d-image.js".
Une fois ce gabarit index enregistré, nous pourrons faire appel à lui depuis n'importe quelle page HTML via l'insertion de la balise :
<script type="text/javascript" src="https://communaute.typepad.fr/communautetypepad/mur-d-image.js"></script>
Vous pouvez voir le résultat sur ce blog en bas de page (la section "VIPs en image").
A noter : Il faut évidemment reprendre le style de l'étape 2 sur le site distant.
Précautions d'emploi :
- évitez d'utiliser un tel module si vos vignettes sont de grandes images, cela risque d'alourdir le chargement de votre page. Pour les besoins de la démonstration, nous avons ajouté une classe à notre feuille de style :
.mur-image img{
position: relative;
left: -50px;
top: -50px;
}
Nos vignettes de la rubrique VIP étant un peu grandes, cela nous permet de les recadrer au sein de la zone 50x50.
- au besoin testez le rendu de votre mur d'image sur un habillage de test, ou en créant un gabarit index non visible depuis votre blog.
- Comme seule une image est affichée pour créer un lien vers la note, ne mettez en place cette fonctionnalité que si vos notes contiennent des images, sinon, vous ne verrez qu'un carré blanc s'afficher. De même il faut que les images insérées soient présentes sur votre blog et pas une référence à un lien externe.