Setting up a custom template

Spina Layouts

Templates

Setting up a template

When creating your template you have to update the default.rb or demo.rb (which we will be calling theme.rb in this tutorial) file where you will find everything you need.

These are the instructions to get to create the following template:

We will be following these steps:

• Create the template
• Create the parts
• Link the template to a page

Creating the template

Open up your theme.rb file and go to self.view_templates. You probably already have some code in there and it should look like this

self.view_templates = {
  'homepage' => {
    title:      'Homepage',
    page_parts: ['text']
  },
  'show' => {
    title:        'Default',
    description:  'A simple page',
    usage:        'Use for your content',
    page_parts:   ['text']
  }
}

title, description and usage are used to give information about the given template when you will want to select it in your admin page (when creating a new page). The last one, page_parts contains all the parts that will be available for this template and that will appear in your New Page layout. In our case we want more than just text, we need excerpt, content and thumbnail since the title is automatically included in the form. We will create a new template called Page:

self.view_templates = {
  ...
  'page' => {
    title:        'Page',
    description:  'Custom Page Template',
    usage:        'This is an awesome page !!!',
    page_parts:    %w(excerpt thumbnail content)
  }
}

_Writting `%w(excerpt thumbnail content)` is the same as writting `["excerpt", "thumbnail", "content"]`. It's just a shortcut._

Cool ! Now we have a template ! Unfortunately if we head to our administration panel and create a page using this template, it will probably not work... That's because we are using custom parts that are more relevant to our users.

Creating the parts

Each template uses a set of parts that are defined in the self.page_parts. Not sure if this is a complete list of the available parts but I didn't find anything else

self.page_parts = [{
  name:               'line',
  title:              'Line',
  page_partable_type: 'Spina::Line'
}, {
  name:               'text',
  title:              'Text',
  page_partable_type: 'Spina::Text'
}, {
  name:               'photo',
  title:              'Photo',
  page_partable_type: 'Spina::Photo'
}, {
  name:               'photo_collection',
  title:              'Photo collection',
  page_partable_type: 'Spina::PhotoCollection'
}, {
  name:               'attachment',
  title:              'Attachment',
  page_partable_type: 'Spina::Attachment'
}, {
  name:               'attachment_collection',
  title:              'Attachment collection',
  page_partable_type: 'Spina::AttachmentCollection'
}, {
  name:               'structure',
  title:              'Structure',
  page_partable_type: 'Spina::Structure'
}, {
  name:               'color',
  title:              'Color',
  page_partable_type: 'Spina::Color'
}]

Now the problem we have is that these parts will be showed with their given title in your New Page panel. However we would like to have some more explicit names. You can either append your parts to this list or replace it with only your parts. Here are the parts we will need for our template

self.page_parts = [{
  name:               'excerpt',
  title:              'Excerpt',
  page_partable_type: 'Spina::Text'
}, {
  name:               'content',
  title:              'Content',
  page_partable_type: 'Spina::Text'
}, {
  name:               'thumbnail',
  title:              'Thumbnail',
  page_partable_type: 'Spina::Photo'
}]

The difference between Spina::Text and Spina::Line is that the Text will be a textarea and the Line will be a simple one line input.

Now you can go and create your custom page in your admin panel ! Yay !

Linking the template to a page

Great, now we have created a template that we can use in our "New Page" panel. However when trying to access this new page on the website, we get an error... That's because we forgot to add a view.

Go to views/[theme name]/pages and create a new file with the name you gave to your template. In this case it will be page.html.erb.

Everything you need to display is contained in the @page variable. Here is what you could do with our awesome Page:

<h1><%= @page.title %></h1>
<%= @page.content(:excerpt).try(:html_safe) %>
<%= @page.content(:content).try(:html_safe) %>
<%= image_tag @page.content(:thumbnail).try(:file_url) %>

This should render all the components you added with the title of the page. Each custom part is included in @page.content. You can also access the page URL with the following line:

<%= link_to @page.title, @page.materialized_path %>

Nice ! We now have a custom template up and running !