243

Product support

Get help in the plugin support forum.

Categories

An OctoberCMS plugin for easy creation and usage of cards (tiles). Templates use TailwindCSS by default. The plugin supports 'out of the box' the TailwindCSS-based cards format used by FateFactory, so that you can use FF's visual card browser, pick your favourite card, and use it in your website.

Plugin contains both components and snippets for use either in 'CMS' pages or 'Static Pages':

  • Section component to display a section of cards
  • Card component to display sub-page with content of a single card.

Installation

Install plugin as usual:

  • using the OctoberCMS Marketplace or
  • get it from GitHub

If you choose manual install (e.g. using GitHub), make sure to intialize the database tables using the cli command php artisan october:up. This will create two tables.

Configuration and usage

Sections

Backend - Tiles component main interface

Start by adding at least one new section. In the section editor, provide at least the name, and turn the visibility of the section on.

A section constitutes a category of cards to be displayed on a specific page. Using the provided component, you can select a single section of tiles to be displayed. Each section can have a default display style, but it can be overriden in the CMS or StaticPage configuration, so that you can have the same dataset displayed using different styles on different pages.

Backend - create new section of tiles

The section editor has three tabs:

  • The MAIN tab lets you define the basic (required) settings, and you can start adding new cards directly inside the section editor.
  • The LAYOUT tab has a code editor, empty by default, typically used with the FateFactory.com to paste any card TWIG code from the FateFactory

Backend - create - layout tab

  • The LABELS tab should be ignored for now - in future versions, it will allow you to override the default Card fields with custom ones.

Then create one or more individual cards in the "cards" section.

Section templates

Card sections can use different layout templates.

A default template has been defined in the plugin (plugins\cjkpl\tiles\components\section\tileset1.htm), you can also add new templates into your theme as partials located in THEME-FOLDER/partials/tiles/. For example, if you copy the default tileset1.htm into THEME-FOLDER/partials/tiles/homepage.htm, it will be listed in the component Layouts selector as 'homepage.htm'.

Use either tileset1.htm or any TWIG card template from FateFactory.com as an inspiration for your new card layouts.

Cards

The card editor affects the CONTENT of the card only, not the layout! Think of it as content editor. If you want to change the layout, change the whole section template as described above. You cannot have different card layouts for individual cards, at least not using any of the built-in or FateFactory.com card designs.

Card editor contains a set of typical fields used in Cards or Tiles. They are divided into tabs. Individual fields are mapped onto the TWIG variables defined in the section templates. Twig field names are listed below each field to help you work with the card templates.

  • Misc - contains the most frequently used fields, like Title ({{ card.title }}), background image ({{ card.image }})
  • Person - fields used in personal cards, like name, status, photo, etc.
  • Tags and URLs - if the card is clickable, the URL field should be completed; If the card layout supports tags, you can add them here.
  • Card content - since v.1.0.7 a new component is available, to display content of a single card. By default the Card content field is displayed by the component. The component uses card id to link the detail page, so the URL of the card detail page should look like this: /tiles/tile/:id (it should end with the id parameter)
  • Custom sets - this part is currently under development

See in the example below, how a TWIG template from FateFactory.com allows automatic mapping of the Tag field onto a card definition: Card field mapping

Using in CMS and static pages

Backend - add component (or snippet) to a page

The screenshot above shows the dialog inside a snippet added to a StaticPage. A similar setup can be done using plain CMS pages, instead of a snippet, use a component.

The Dialog for configuring a "Section of Cards" contains the following options:

  • Columns: the number of columns in one row. Most card definitions at FateFactory nicely respond to browser window size changes.
  • Layout: defines the card template to use. By default, it will use plugins\cjkpl\tiles\components\section\tileset1.htm. Note, if you decide to fork the component in the backend page editor, it will clone just the plugins\cjkpl\tiles\components\section\default.htm, which is not enough - most likely will want to edit the tileset1.htm as well, as this is where the cards are defined. The default.htm merely decides which layout to load: a default one, an inline one (i.e. one defined in the "Section Layout" form editor), or one of the partials defined in THEME-FOLDER/partials/tiles/
  • Language filter: author's personal requirements called for an easy way to add cards in multiple languages (also in one section), and this option allows you to select for display only cards in a specific language.
  • Section: decides which of the sections defined in the Tiles Section editor in the backend should be displayed. You can only display one section at a time.
  • Link/content page: (1.0.7+) - a CMS page with "Card" component added, to display card content details. This is useful for building simple content page with cards used as "list of posts" kind of view, timelines with detail view, etc.
1.0.12

Fixed broken update 1.0.11

Sep 22, 2020

1.0.11

Updated table cjkpl_tiles_cards - changed tags_url to text, string was too short

Sep 22, 2020

1.0.10

Updated table cjkpl_tiles_cards renamed tags_url_pattern to tags_url which will now become a repeater field

Sep 22, 2020

1.0.9

Fixed an `ok to auto-link` condition in Section

Aug 15, 2020

1.0.8

Added code to detect if card URL has been explicitly set, and if it is not set, but autolink_content is set and some content is present, to inject into the card.url field in the Section component an automatically generated link to the card content page.

Aug 12, 2020

1.0.7

Table cjkpl_tiles_cards - added card content section, new fields in card editor, and new component to display single card content

Aug 12, 2020

1.0.6

Removed external dependency with GetCommonLanguageOptions.

Aug 08, 2020

1.0.5

Updated table cjkpl_tiles_sections

Aug 08, 2020

1.0.4

Updated table cjkpl_tiles_cards

Aug 08, 2020

1.0.3

Created table cjkpl_tiles_sections

Jul 29, 2020

1.0.2

Created table cjkpl_tiles_cards

Jul 29, 2020

1.0.1

Initialize plugin.

Jul 29, 2020