Version:

    Twig template

    A twig file can be used to render a custom component. All field values defined in the custom component form are accessible via the field variable and all dropzones via the dropzones variable.

    Field names will be converted to all underscore to be compatible with Twig. Ex: plain-text-area will be
    {{ field.plain_text_area }}

    Dropzones names will follow the pattern dropzone_[uuid-of-the-dropzone]. You can find the UUID of a dropzone in the canvas property of the form json.
    For the example bellow, to render to dropzone, use
    {{ dropzones['dropzone_f05eff15_335f_4a16_8cdf_e84c8601e345'] }}

    {
      "canvas": [
         {
          "type": "item",
          "uid": "component-drop-zone-placeholder",
          "title": "Component drop zone",
          "status": {
              "collapsed": true
          },
          "iconColor": "content",
          "uuid": "f05eff15-335f-4a16-8cdf-e84c8601e345",
          "parentUid": "root"
        }
      ],
      "disabledNodes": []
    }

     

    To add a Twig template to your custom component, add a `template` property to the YAML file and specify the path to the Twig file.

    Only one Twig template is allowed per custom component. 
    Twig template cannot be used in conjunction with the html property.

    Various twig functions are available to render field type: 

    • format_wysiwyg
      {{ format_wysiwyg(field.wysiwyg['#text'], field.wysiwyg['#textFormat'], '') }}
    • renderInlineStyle(string styles)
      {% set styles %}
        <style>
          .twig-component .inline-style {
            color: {{ field.color_picker }};
          }
        </style>
      {% endset %}
      
      {{ renderInlineStyle(styles) }}
    • renderContent(string entity_type, string view_mode, string entity_id)
      <div class="twig-entity-reference">
        {{  renderContent(field.entity_reference['#entity_type'], field.entity_reference['#view_mode'], field.entity_reference['#entity']) }}
      </div>

    You can find the complete list of all twig functions defined by Site Studio in modules/cohesion_templates/src/TwigExtension/TwigExtension.php

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.