October CMS Tailor Setup for Flexible Content

Configuration of Tailor CMS for Flexible Content in October CMS

Tailor is a built-in content management system in October CMS 3 that replaces the plugin/model approach for typical tasks. Content structure is described via YAML blueprints without writing PHP code for simple scenarios.

Blueprint Types

Entry — collection of entries (blog, products, events). Similar to Channel in Craft CMS. Single — single entry (homepage settings, about page). Global — global variables accessible in all templates. Mixin — reusable field set to include in other blueprints.

Project Structure

blueprints/
├── blog/
│   ├── post.yaml       # Entry: blog posts
│   └── category.yaml   # Entry: categories
├── site/
│   ├── settings.yaml   # Global: site settings
│   └── homepage.yaml   # Single: home page
└── mixins/
    └── seo.yaml        # Mixin: SEO fields

Entry Blueprint

# blueprints/blog/post.yaml
uuid: a1b2c3d4-e5f6-7890-abcd-ef1234567890
handle: Blog\Post
type: entry
name: Blog Post
drafts: true
revisions: true

navigation:
  label: Blog Posts
  icon: icon-pencil

fields:
  title:
    label: Title
    type: text
    required: true
    translatable: true

  slug:
    label: Slug
    type: text
    required: true
    preset:
      field: title
      type: slug

  excerpt:
    label: Excerpt
    type: textarea
    translatable: true

  content:
    label: Content
    type: richeditor
    toolbarButtons: bold|italic|insertLink|insertImage|insertVideo|formatOL|formatUL|insertHR|fullscreen
    translatable: true

  featured_image:
    label: Featured Image
    type: fileupload
    mode: image
    imageWidth: 1200
    imageHeight: 630

  category:
    label: Category
    type: entries
    source: Blog\Category
    displayMode: list
    maxItems: 1

  tags:
    label: Tags
    type: taglist

  published_at:
    label: Published Date
    type: datepicker
    mode: datetime

  is_featured:
    label: Show in Slider
    type: switch
    default: false

  mixin[seo]:
    source: Mixins\Seo

Global Blueprint

# blueprints/site/settings.yaml
uuid: b2c3d4e5-f6a7-8901-bcde-f12345678901
handle: Site\Settings
type: global
name: Site Settings

fields:
  site_name:
    label: Site Name
    type: text

  phone:
    label: Phone
    type: text

  email:
    label: Email
    type: text

  social_links:
    label: Social Media
    type: repeater
    displayMode: builder
    fields:
      platform:
        label: Platform
        type: dropdown
        options:
          vk: VKontakte
          telegram: Telegram
          youtube: YouTube
          instagram: Instagram
      url:
        label: URL
        type: text

Usage in Templates

{# Entry — list of posts #}
{% set posts = tailor.collection('Blog\Post')
  .where('published', true)
  .orderBy('published_at', 'desc')
  .limit(12)
  .get() %}

{% for post in posts %}
  <article>
    <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
    {% if post.featured_image %}
      <img src="{{ post.featured_image.getThumb(800, 400, { mode: 'crop' }) }}" alt="{{ post.title }}">
    {% endif %}
    <p>{{ post.excerpt }}</p>
  </article>
{% endfor %}

{# Global — site settings #}
{% set settings = tailor.global('Site\Settings') %}
<a href="tel:{{ settings.phone }}">{{ settings.phone }}</a>
{% for link in settings.social_links %}
  <a href="{{ link.url }}" class="social-{{ link.platform }}">{{ link.platform }}</a>
{% endfor %}

{# Single — home page #}
{% set homepage = tailor.single('Site\Homepage') %}
<h1>{{ homepage.hero_title }}</h1>

Mixin — Reusable Fields

# blueprints/mixins/seo.yaml
uuid: c3d4e5f6-a7b8-9012-cdef-123456789012
handle: Mixins\Seo
type: mixin
name: SEO Fields

fields:
  seo_title:
    label: SEO Title
    type: text

  seo_description:
    label: SEO Description
    type: textarea

  og_image:
    label: OG Image
    type: fileupload
    mode: image
    imageWidth: 1200
    imageHeight: 630

Configuration of 5–8 Tailor blueprints for typical site takes 1–3 days.