Use patterns with Field templates

Patterns can be used as Display Suite field templates by enabling the ui_patterns_ds module. This opens the following interesting possibilities:

  • Link fields can be styled as buttons by mapping their URL and link titles to specific pattern destinations.
  • Image fields can be styled as an “image with caption” by mapping a formatted image and title to specific pattern destinations.

Let’s see how to implement the first example having the following pattern definition:

button:
  label: Button
  description: A simple button.
  fields:
    title:
      type: text
      label: Label
      description: The button label
      preview: Submit
    url:
      type: text
      label: URL
      description: The button URL
      preview: http://example.com

On the entity display setting page we access the link field setting by clicking on the gear icon:

../_images/field-template-1.png

Then, after selecting the Pattern field template and the Button pattern, we map the link field columns to the pattern’s fields defined above:

../_images/field-template-2.png

Our multi-valued link field will then be formatted as follow:

../_images/field-template-3.png