Documentation

Make pages editable

Boxcab helps you to structure the content of your page thanks to a handful set of custom tags. Basically, you define the elements of your page that you want to be able to edit through our awesome UI.

boxcab_page

It describes your page inside our editor. It's a good practice to put it on top of your Ruby on Rails view.

Syntax

boxcab_page <options>

Options

Name Type Description
title string title of the page displayed in the back-office
position integer position of the page in the navbar (back-office)

Example:

<%= boxcab_page 'My home page', position: 1 %>

<p>My home page view (app/views/welcome/home.html.erb)</p>

boxcab_content

It defines an editable element.

Syntax

boxcab_content <name>, <options>, &block

name should be an underscore string or a symbol. Block is required for the list type.

Options:

Name Type Description
label string Text displayed in the back-office
type symbol/string Possible values: string, text, image, list. Default: string
hint string Hint displayed in the back-office
position integer Position of the field in the form
html boolean Enable the Rich Text Editor on the back-office. Only for string/text field types (true|false). Default: false
default string Default value for the field

Examples:

Simple editable string

<h1><%= boxcab_content 'title', type: 'string', hint: 'Title of the home page' %></h1>

Editable image and text with Rich Text Editor enabled

<div class="hero">
  <% if (background = boxcab_content('background', type: 'image')) != '' %>
    <div class="background">
      <img src="<%= background %>" />
    </div>
  <% end %>

  <div class="text">
    <%= boxcab_content 'hero', type: 'text', html: true do %>
      <p>Another way to set a default content</p>
    <% end %>
  </div>
</div>

If the type is a list, the block will require an argument which can be useful to know if the current displayed item is the first one for instance. The iterator object has the following methods:

Method Returned type Description
index integer position of the item in the list (0 based)
size integer number of elements in the list
first? boolean true if the current element is the first one in the list
last? boolean true if the current element is the last one in the list
every?(n) boolean true if ((index + 1) mod n) == 0 (and if not first or last)

Example:

<div class="gallery">
  <%= boxcab_content 'gallery', label: 'My images', type: 'list', default: 3 do |iterator| %>
    <div class="media <%= 'first-media' if iterator.first? %>">
      <div class="media-left">
        <a href="<%= boxcab_content 'link', type: 'string', default: '#', position: 2 %>">
          <img class="media-object" src="http://placehold.it/200x200" />
        </a>
      </div>
    </div>

    <hr/>
  <% end %>
</div>