Gérer sa médiathèque avec Movable Type v. 4

Vous avez probablement constaté sur ce site un changement d’envergure : l’ajout d’une médiathèque. Celle-ci est gérée de façon quasi automatique grâce à Movable Type et quelques plugins astucieux. 

Quelques prérequis

Déjà il vous faut movable type… j’utilise la version 4.1 et donc tout ce que je vais écrire là se rapporte à cette version. Cependant cette idée de gérer ma médiathèque avec movable type est née à partir d’une expérience similaire datant de 2002. Idée qu’il a fallut adapter pour suivre les évolutions de Movable Type notamment. On va supposer ici que Movable Type est installé correctement et que vous savez vous en servir. Le but n’est pas ici de faire un mode d’emploi exhaustif de ce logiciel (!).

Ensuite il vous faut une clé d’API Amazon. Là il faut causer un peu anglais pour pouvoir l’obtenir sur le site dédié.

Il vous faudra aussi le greffon Media Manager pour Movable Type 4. Il est pour l’instant disponible uniquement en version beta. Il inclue MTAmazon dont on aura besoin pour afficher les pages du site. Il est disponible sur le site de majordojo.

 

Une idée simple

L’idée simple de départ consiste à dire que la médiathèque est gérée comme un sideblog. Autrement dit vous avez votre blog principal et vous utilisez les fonctionnalités de movable type pour générer des pages dans un coin.

Au sein de ce sideblog, chaque article de la médiathèque est représenté par une note. Là vous avez deux options : soit vous utilisez la fonctionnalité de gestion des assets de movable type avec Media manager : création de l’asset, création de la note, etc. soit vous optez pour quelque chose d’un peu plus sioux. J’ai bien entendu choisi cette seconde option bien que la première fonctionne parfaitement (pour preuve l’illustration de cet article).

Pour bien gérer une médiathèque il faut des catégories. J’ai choisi de créer une catégorie par type de média (CD, DVD, livre, jeux vidéo, etc.) puis pour chaque catégorie de décliner en sous-catégories. Cela permet de ne pas tout mélanger. On peut même envisager de créer une catégorie Wish Liste et lorsqu’on a acheté (ou qu’on vous a offert ?!) un élément de cette liste il ne reste plus qu’à en changer la catégorie !

Ensuite chaque média est représenté par une note. J’utilise le titre de la note comme nom du média (c’est original non ?!). Le corps de la note me permet d’ajouter un commentaire ou une description si je me sens une âme de commentateur. Ensuite je stocke l’ASIN dans le champs Mots clés. A noter que la version 4.2 de Movable Type (sortie depuis que j’ai commencé à écrire ce billet !) permet de gérer des champs personnalisés (fonctionnalité jusqu’alors payante de la version pro) et on pourrait donc mettre l’ASIN dans un champ à part… mais bon c’est juste un détail !

Qu’est-ce donc que cet ASIN ? C’est l’identifiant d’un objet chez Amazon. C’est LA clé d’entrée de l’API Amazon qui va permettre d’afficher une image du produit, d’en récupérer des informations comme le nom de l’auteur voir une description plus complète. Grâce à cet ASIN et en bidouillant les templates de Movable Type on va pouvoir afficher une belle médiathèque !

Et comme je suis amateur de bandes dessinées il me faut gérer des collections (par exemple la série des Tintin) et quel champ mieux adapté à cela que celui des tags (les fonctions de recherche par tag étant intégrée dans MT).

Mise en route

Première chose à faire : créer le sideblog dans Movable Type. En quelques clics hop c’est fait. Ensuite on installe Media Manager et on va le configurer aussi bien dans les propriétés du système que dans les propriétés du sideblog (notamment pour la locale qui permet de choisir le magasin Amazon dans lequel on fait les recherches pour la création des assets).

Enfin il ne reste plus qu’à créer sa première note avec son livre préféré… pour cela se rendre sur Amazon, rechercher le livre en question. Dans la description on trouve l’ASIN. S’il n’y est pas il suffit de prendre l’ISBN.

On clique sur « créer > note », on rentre le titre, on choisi la catégorie, on met l’ASIN dans les mots clés et éventuellement la collection en tag (attention : pas de virgule qui est le séparateur de tags !).

Une fois cela fait on peut aller voir le site publié… bon il manque l’illustration et la présentation n’est pas franchement très « médiathèque ». Mais on va remédier à cela grâce à MTAmazon !

Paramétrage de Movable Type

On va déjà commencer par gérer l’accès aux médias. Pour l’instant si vous avez fait tout comme je vous l’ai dit vous devriez avoir un truc qui ressemble à ça :

L’accès au livre se fait par une adresse qui inclut la date de la note… Si ce choix est optimal pour un blog, pour une médiathèque il est plus intéressant d’avoir un accès par catégorie et sous catégorie. On va donc aller changer celà dans Movable Type. Pour cela il faut aller dans Design / gabarits et choisir les « gabarits d’archives ».

Cliquer sur « Note » et modifier la table de correspondance des archives pour choisir un chemin de type « categorie/sous-categorie/nomdebase-note.html » (ou les variantes avec le caractère souligné, comme vous préférez). Enregistrez.

On va aussi en profiter pour supprimer des archives inutiles (et accélérer ainsi la publication) : cliquez sur « Liste des notes » et dans la table de correspondance ne conservez que la ligne « par catégories ». Republiez votre site et admirez les changements d’adresses (!).

Oui bon c’est gentil tout ça mais on a pas encore les jaquettes… patience, ça arrive !!!

Bon alors l’idée c’est d’utiliser MTAmazon qui est fourni avec Media Manager. Pour cela on va aller modifier quelques gabarits standards. Le premier à modifier c’est « Résumé de la note » (c’est un gabarit de type module).

Grâce à MT 4 on peut maintenant utiliser des variables. Il est donc facile de mémoriser le mot clé (qui contient l’ASIN du produit) dans une variable et d’utiliser celle-ci en paramètre à la fonction MTAmazonItemLookup. En gros ça donne ça :

<mt:ifnonempty tag="EntryKeywords">
<$MTEntryKeywords setvar="asin"$>
<MTAmazonItemLookup ItemId="$asin">
<div id="entry-<$MTEntryID$>" class="entry-asset asset hentry">
<a rel="bookmark" href="<$MTEntryPermalink$>"><img src="<$MTAmazonCustomImageURL size="small" shadow="right"$>" alt="<$MTAmazonTitle encode_html="1"$>" title="<$MTAmazonTitle encode_html="1"$>" /></a><br />
<a rel="bookmark" href="<$MTEntryPermalink$>"><small><$MTEntryTitle$></small></a>
</div>
</MTAmazonItemLookup>
</mt:ifnonempty>

Au passage on remarquera que j’ai supprimé pas mal de choses 🙂 Avec plusieurs livres le résultat devrait être semblable à celui-ci (après sauvegarde et republication).

On a bien nos jaquettes par contre la mise en page laisse à désirer : chaque titre prends une ligne à lui tout seul ! On va donc aller modifier la feuille de style pour améliorer tout cela. Retour aux gabarits index et direction la feuille de style (styles.css).

Par défaut c’est du minimaliste : on inclut les feuilles de style du thème courant… on va ajouter nos propres déclarations pour forcer les choses :

/* Default Layout:  */
@import url(<$MTStaticWebPath$>themes-base/blog.css);
@import url(<$MTStaticWebPath$>themes/minimalist-red/screen.css);

#alpha .asset {
	width		: 200px;
	height		: 220px;
	line-height	: 1.0em;
	float		: left;
	vertical-align	: bottom;
	text-align	: center;
	padding		: 0;
	margin		: 0.25em;
	clear		: none;
}

.content-nav {
	clear		: both;
}

En gros on lui explique que l’on désire avoir des éléments carrés de 200 pixels de largeur qui « floatent » les uns à côté des autres.

Déjà ça commence à ressembler à quelque chose. Il ne nous reste plus qu’à modifier ce que l’on voit lorsqu’on clique sur un livre (ou autre média)… mais ça je vous le laisse en exercice (façon simple de mettre en ligne ce billet qui trainait en mode « brouillon » depuis le mois de juin dernier !

A noter que j’ai fait une petite modification dans la librairie MTAmazon. En effet par défaut l’URL de l’image est pour la version américaine (.01. dans l’URL, de tête) alors que la majorité de mes livres, CD, etc. sont français. J’ai donc modifié le code pour prendre en compte cette différence (je détaillerai dès que j’aurai un peu de temps… si vous êtes sages !).