[HOWTO] Create powerful specific templates for posts types and categories

Typo 6.0.6 introduced custom post types, allowing you to chose which template you want to use for your posts. Since Typo 6.0.8, you can also define per category templates.

Let’s say you blog about tech and wine, and want to display wine posts differently. You upload an attached picture to every wine related post and want it to be displayed in every article. You also have a custom CSS for wine blocks, and don’t want people to comment your wine reviews (this to make the sample template more readable). You also want to apply this to the category page.

I. Prepare the path

First, login to your blog admin and go to Article -> Post Types. Create a new post type called Wine.

See the template name? Remember it, because we’re going to use it somewhere soon.

Now, create a new category in Articles -> Categories. We’ll call it Wine too.

Note the permalink id somewhere because we’re going to reuse it very soon.

II. Create the templates you need

You’re going to create 2 custom templates: one to display wine related articles, and one to display the Wine category.

First, create a templates called wine.html.erb in your theme/views/articles/ directory. If the views/articles directory doesn’t exist, create it. The template will probably look like something like this:

<div class="wine" %>>
  <h2><%= link_to_permalink @article, @article.title %></h2>
  <p class="auth"><%= _("Posted by")%> <%= author_link(@article) %>
  <%= display_date_and_time @article.published_at %></p>
  <%= @article.html(:body) %>
  <!-- This display the attached images -->
  <% @article.resources.each do |upload| %>
    <img src='<%= "#{this_blog.base_url}/files/#{upload.filename}" %>' class="centered" />
  <% end %>
  <div class="extended">
    <%= @article.html(:extended) %>
  </div>

</div>
<p class="meta">
  <%= article_links @article %>
</p>

You’re now going to do the same with the wine category. In your theme /views/categories, create a wine.html.erb template. This is adapted from the category/show.html.erb of one of the stock themes.

<h1><%= link_to "Wine", "#{this_blog.base_url}/category/#{params[:id]}" %></h1>

<div class='category-excerpt <%= "border" if @article_counter >= 0 %>' id="article-<%= article.id %>">
  
<% @articles.each do |article| %>
  <h2><%= link_to_permalink(article, article.title) %></h2>
  <p class="auth"><%= _("Posted by")%> <%= author_link(earticle) %>
  <%= display_date_and_time article.published_at %></p>
  <%= article.html(:body) %>
  <!-- This display the attached images -->
  <% article.resources.each do |upload| %>
    <img src='<%= "#{this_blog.base_url}/files/#{upload.filename}" %>' class="centered" />
  <% end %>
  <div class="extended">
    <%= article.html(:extended) %>
  </div>
<% end %>
</div>

<div id='paginate'>
  <%= will_paginate @articles, { :previous_label => _('Previous'), :next_label => _('Next')  } %>
</div>

Here you are, you can now write about wine. Just don’t forget to chose the wine post type within the editor.

2 comments »

• By Brian 31/08/2011 at 18h18

  I’m trying to access the demo to check out what’s new in Typo 6 but it’s throwing an error. Anyway you folks can look into that? Thanks.

  ---

• By Frédéric de Villamil 01/09/2011 at 12h35

  Hi Brian,

  It’s back, there was a bug breaking Typo with Ruby 1.9.2 but we’ve fixed it.

  Best regards.

  ---