[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.

Custom field 2

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

Custom field 2

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

Custom template creation

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

Custom template creation

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.

Custom template creation

Published on 20/05/2016 at 08h26 by Matijs van Zuijlen, tags

  • Gravatar

    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.


  • Gravatar

    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.


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

Trackbacks are disabled

Powered by Publify | Photo Startup stock photos