Créez un photoblog en Ruby on Rails en 20 minutes

Installation des prérequis

Afin de transformer votre Typo en photoblog, il vous faut :

<li>Un Typo (évidemment).</li>
<li>Une librairie de gestion des champs EXIF en ruby.</li>

Pour le premier, j’ai choisi la version de développement de Typo, et plus particulièrement la version “nice permalinks”, qui équipe ce site :

git clone git://github.com/fdv/typo.git photoblog
cd photoblog
git submodule init
git submodule update
git checkout -b origin/nice_permalinks

Pendant que vous téléchargez les dépendances, allez vous faire un café, et profitez-en pour déguster un de ces délicieux macarons Ladurée qui traînent dans la cuisine.

Pour la librairie, j’ai choisi Exifr, qui présente l’avantage indéniable d’être entièrement en Ruby et ne pas reposer sur une quelconque dépendance.

sudo gem install remvee-exifr -s http://gems.github.com

Et voilà, c’est cette fois un peu plus rapide, mais n’hésitez pas à reprendre un de ces excellents macarons, ils l’ont bien mérité.

Nous allons maintenant mettre les mains dans le cambouis, et faire quelque chose de très sale, mais c’est pour la bonne cause.

Utiliser Typo comme photoblog

Dans un premier temps, rendez-vous dans la zone d’administration de Typo, onglets configuration, sous-onglet lire, et passez le nombre d’éléments par page à 1.

Afin de publier les photos, nous allons utiliser une fonctionnalité assez méconnue et peu usitée de Typo, les pièces jointes. À l’origine mise en place pour les éditeurs de podcasts, celles-ci apparaissent dans le flux RSS mais jamais dans les billets. Nous remédierons à cela un peu plus loin.

Adapter le thème au photoblogging

Choisissez un thème quelconque, par exemple, Typographic, fourni par défaut avec Typo, et éditez le fichier views/articles/_article.html.erb. Nous allons y apporter quelques changements, charge à vous d’adapter la feuille de style.

Dans un premier temps, nous allons afficher les informations de base : titre, photo, contenu…

<div class="atomentry" id="article-<%= article.id %>">
    <h2><%= link_to_permalink(article,article.title) %></h2>
    <%  image = article.resources.first %>
    <img id="photo" exif="true" src='<%= "#{this_blog.base_url}/files/#{image.filename}" %>' alt="<%= article.title %>" />

    <%= simple_format article.html(:body) %>

    <% if article.extended? -%>
      <div class="extended">
        <% if controller.action_name == 'index' -%>
          <p><%= link_to_permalink article,_("Continue reading...") %></p>
        <% else -%>
          <%= simple_format article.html(:extended) %>
        <% end -%>
      </div>
    <% end -%>  
    
    <div class="meta">
      <%= _("Posted by") %> <%= author_link(article) %> 
      <%= js_distance_of_time_in_words_to_now article.published_at %>
    </div>
  </div>

Dernier point, nous allons afficher les champs EXIF des photos :

<% require 'exifr' %>
<% exif = EXIFR::JPEG.new("#{RAILS_ROOT}/public/files/#{image.filename}") %>
Champs Exif : 
  <ul>
    <li>Photo prise le : <%= exif.date_time%></li>
    <li>Appareil : <%= exif.model %></li>
    <li>Ouverture : <%= exif.f_number.to_f %></li>
    <li>Exposition : <%= exif.exposure_time.to_s %></li>
  </ul>
</div>

Enfin, autre fonctionnalité peu connue – car peu documentée de Typo, nous allons rajouter des liens vers les photos précédentes et suivantes.

<p class="pagination">
  <%= link_to_permalink(article.previous, article.previous.title) if article.previous %>
  <%= link_to_permalink(article.next, article.next.title) if article.next %>
</p>

Et voilà, c’est terminé. Vous avez maintenant le droit d’achever cette pauvre boite de macarons qui ne vous avait pourtant rien fait. Il manque évidemment quelques petites choses, comme la génération de miniatures, pas encore directement possible avec Typo, mais ce n’est que partie remise.