chocoBRAIN

Appearance

Objects ​

The following objects are part of the App's Liquid API and available inside the appropriate contexts. The five main objects brand, website, page, section and form are available directly in their corresponding Template, and all other objects are available via these.

brand ​

brand.colors ​

  • Type: array of objects
  • Description: Returns all colors of brand.
  • Typical Usage:
    • Iteratation of all colors of a brand, e.g. to create color classes in css.
    HTML
    {% for color in brand.colors %}
  .cb-border-{{color.css_class}} {
    border-color: {{color.hex6_fallback}};
  }
  .cb-border-{{color.css_class}}--hover:hover {
    border-color: {{color.hex6_fallback}};
  }
{% endfor %}

color ​

color.uuid ​

  • Type: string
  • Description: Every color has ist own Universally Unique Identifier (uuid).

color.css_class ​

  • Type: string
  • Description: Contains a concatenation of the string 'color' and the color.uuid. Properly defined in layout, see brand.colors, it can be used to style a special state of an element, that is not reachable with inline styling, but with pseudoclasses.
  • Typical usage:
    • Use of color classes in html.
    HTML
    <div style="border: 1px solid rgb({{color.rgb}});" class="cb-border-{{color_hover.css_class}}--hover">
  This is border text.
</div>

color.rgb ​

  • Type: string
  • Description: Contains the three color channels separated by a comma.
  • Format: RRR, GGG, BBB
  • Typical usage:
    • As background-color of a section, e.g. color with name 'my_bg_color'.
    HTML
    <div style="background-color: rgb({{section.settings.my_bg_color.rgb}});">
    <!-- HTML content -->
</div>
    • As font color of a section with certain 'alpha' value (opacity), e.g. color with name 'my_font_color'.
    HTML
    <div style="color: rgb({{section.settings.my_font_color.rgb}}, {{alpha_value}});">
    <!-- HTML content -->
</div>

color.hex6_fallback ​

  • Type: string
  • Description: Contains the three color channels as a hexadecimal value with a leading #.
  • Format: #RRGGBB

color.red ​

  • Type: integer
  • Description: Contains the three red color channel.
  • Values: Integer between 0 and 255.

color.green ​

  • Type: integer
  • Description: Contains the three green color channel.
  • Values: Integer between 0 and 255.

color.blue ​

  • Type: integer
  • Description: Contains the three blue color channel.
  • Values: Integer between 0 and 255.

color.lighten_1 ​

  • Type: object
  • Description: Contains a lightened version of the color. There are further flavors called by lighten_2, lighten_3, lighten_4 and lighten_5.

color.lighten_1.rgb ​

  • Type: string
  • Description: Contains the three color channels separated by a comma.
  • Format: RRR, GGG, BBB

color.lighten_1.hex6_fallback ​

  • Type: string
  • Description: Contains the three color channels as a hexadecimal value with a leading #.
  • Format: #RRGGBB

color.lighten_1.red ​

  • Type: integer
  • Description: Contains the red color channel.
  • Values: Integer between 0 and 255.

color.lighten_1.green ​

  • Type: integer
  • Description: Contains the green color channel.
  • Values: Integer between 0 and 255.

color.lighten_1.blue ​

  • Type: integer
  • Description: Contains the blue color channel.
  • Values: Integer between 0 and 255.

color.darken_1 ​

  • Type: object
  • Description: Contains a darkened version of the color. There are further flavors called by darken_2, darken_3, darken_4 and darken_5.

color.darken_1.rgb ​

  • Type: string
  • Description: Contains the three color channels separated by a comma.
  • Format: RRR, GGG, BBB

color.darken_1.hex6_fallback ​

  • Type: string
  • Description: Contains the three color channels as a hexadecimal value with a leading #.
  • Format: #RRGGBB

color.darken_1.red ​

  • Type: integer
  • Description: Contains the red color channel.
  • Values: Integer between 0 and 255.

color.darken_1.green ​

  • Type: integer
  • Description: Contains the green color channel.
  • Values: Integer between 0 and 255.

color.darken_1.blue ​

  • Type: integer
  • Description: Contains the blue color channel.
  • Values: Integer between 0 and 255.

color.luma601 ​

  • Type: float
  • Description: Returns the brightness of the color.
  • Values: float between 0 and 1.

faq_item ​

  • Type: object
  • Available inside SectionTemplate.
  • Description: Contains a faq created from a Content Manager.
  • Typical Usage:
  • Save a faq inside of the faq_item, that later can be used on the website to answer customers questions.
HTML
{%- for faq_item in website.faq_items -%}
  <p>
      {{faq_item.question_plain}}
  </p>
{%- endfor -%}

faq_item.position ​

  • Type: integer
  • Description: Contains the position of the faq_item inside the faq_items array.
  • Values: Integer between 0 and 65536.

faq_item.question_plain ​

  • Type: string
  • Description: Returns only the plaintext without HTML tags and Quill editor styling.
  • Typical Usage:
    • Render a styled question, e.g. a rich_text named question_sample.
    HTML
    {%- for faq_item in website.faq_items -%}
  <p>
      {{faq_item.question_plain}}
  </p>
{%- endfor -%}

faq_item.answer_plain ​

  • Type: string
  • Description: Returns only the plaintext without HTML tags and Quill editor styling.
  • Typical Usage:
    • Render a styled answer, e.g. a rich_text named answer_sample.
    HTML
    {%- for faq_item in website.faq_items -%}
  <p>
      {{faq_item.answer_plain}}
  </p>
{%- endfor -%}

faq_item.answer_html ​

  • Type: string
  • Description: Returns full content with HTML tags and Quill editor styling.
  • Typical Usage:
    • Render answer styled by Content Managers, e.g. a rich_text named answer_sample.
    HTML
    {%- for faq_item in website.faq_items -%}
  <div>
      {{faq_item.answer_html}}
  </div>
{%- endfor -%}

faq_item.image ​

  • Type: object
  • Description: Contains the image object.
  • Typical Usage:
    • Render an image.
    HTML
    {%- for faq_item in website.faq_items -%}
  <div>
     <img src="{{faq_item.image.src}}" alt="{{faq_item.image.alt}}">
  </div>
{%- endfor -%}
  • Type: object
  • Description: Contains specific faq link.
  • Typical Usage:
    • Render a link for further information.
    HTML
    {%- for faq_item in website.faq_items -%}
  <a href="{{faq_item_link.url}}">
    {{ faq_item_link.text }}
  </a>
{%- endfor -%}

faq_item.tags ​

  • Type: array of strings
  • Description: Contains all tags of one faq_item.
  • Typical Usage:
    • Render all tags.
    HTML
    {%- for faq_item in website.faq_items -%}
  <div>
      ...
    {%- for tag in faq_item.tags -%}
      <span>
        {{ tag }}
      </span>
    {%- endfor -%}
  </div>
{%- endfor -%}

form (inside section template) ​

  • Type: object
  • Available inside SectionTemplate.
  • Description: Used by Theme designers to include a separately rendered form inside a SectionTemplate. The form is called after the name given by Content Managers when they built it on basis of a FormTemplate. Colors are defined and named on the brand screen. Content managers

form.name ​

  • Type: string
  • Description: Contains the name of the form.

form.form ​

  • Type: string
  • Description: Contains the rendered form.
  • Typical Usage inside of SectionTemplate:
    HTML
    {{section.settings.my_form.form}}
    • Renders the form of a form-block into a section.
    HTML
    {{block.settings.form}}

form (inside form template) ​

  • Type: object
  • Available inside FormTemplate.
  • Description: Contains all content the Content Managers have inserted when building a specific form on the basis of a FormTemplate.

form.name ​

  • Type: string
  • Description: Contains the name of the form.
  • Typical Usage:
    • Use for HTML class to give individual forms specific styling.
    HTML
    <form class="my-form-template-name form-{{form.name}}" action="{{form_action}}" method="post" enctype="multipart/form-data">
    <!-- FormTemplate render logic -->
</form>

form.form_fields ​

  • Type: array of objects
  • Description: Returns all form-fields of a form.
  • Typical Usage:
    • Render HTML for all form-fields of a form inside a FormTemplate.
    Liquid
    {%- for form_field in form.form_fields -%}
    <!-- Specific HTML depending on type of `form field` -->
{%- endfor -%}

form_field ​

form_field.name ​

  • Type: string
  • Description: Contains the name of the form field.
  • Typical Usage:
    • Use as name attribute on form HTML elements like input, select and textarea for backend identification.
    HTML
    <input type="{{form_field.input_type}}" name="{{form_field.name}}">

form_field.field_type ​

  • Type: string
  • Description: Contains the field type of the form field, which is one of predefined values.
  • Values:
    • input
    • select_tag
    • textarea
    • submit
  • Typical Usage:
    • Determine the specific HTML depending on the type of the form field.
    Liquid
    {%- if form_field.field_type == 'input' -%}
    <!-- HTML for `input` tag -->
{%- elsif form_field.field_type == 'select_tag' -%}
    <!-- HTML for `select` tag -->
{%- elsif form_field.field_type == 'textarea' -%}
    <!-- HTML for `textarea` tag -->
{%- elsif form_field.field_type == 'submit' -%}
    <!-- HTML for submit button -->
{%- endif -%}

form_field.input_type ​

  • Type: string
  • Description: Contains the field type of the form field, which is one of predefined values.
  • Values:
    • checkbox
    • date
    • email
    • radio
    • number
    • range
    • tel
    • text
    • time
    • url
    • file
  • Typical Usage:
    • Use as type attribute on form HTML element input.
    HTML
    <input type="{{form_field.input_type}}" name="{{form_field.name}}">

form_field.label ​

  • Type: string
  • Description: Contains the label of a form field. The format is HTML, but to have flexible line breaks inside a label HTML tag, every line is enclosed in an i HTML tag, which should be reconfigured to have normal (not italic) font-style and an line break after each i tag except the last one.
  • Typical Usage:
    • Use as type attribute on form HTML element input.
    HTML
    <label for="{{form_field_id}}" id="{{form_field_label_id}}">
    {{form_field.label}}
</label>
<input type="{{form_field.input_type}}"  name="{{form_field.name}}"
    id="{{form_field_id}}" aria-describedby="{{form_field_label_id}}">

form_field.required ​

  • Type: string
  • Description: Contains required or is nil.
  • Typical Usage:
    • Use to make a form field required inside an HTML form.
    HTML
    <input type="{{form_field.input_type}}" name="{{form_field.name}}" {{form_field.required}}>

html snippet ​

  • Description: HTML snippets can be used to insert freestyle HTML code for arbitrary content. Currently it is also used to insert code for Buttons, Map-Elements and Videos. Caution: Not closed HTML tags can have severe consequences on the pages layout.

html.html ​

  • Type: string
  • Description: Contains the content of the HTML field.
  • Typical usage:
    • Renders the html of a HTML snippet block into a section.
    HTML
    {{block.settings.html}}

image ​

  • Type: object
  • Available via SectionTemplate.
  • Description: The properties of the contained object are called by block.settings.PROPERTY_NAME, or by section.settings.MY_TDSL_NAME.PROPERTY_NAME respectively.

image.height ​

  • Type: integer
  • Description: Contains the height of the image in pixel.
  • Values: Integer between 0 and 65536.

image.width ​

  • Type: integer
  • Description: Contains the width of the image in pixel.
  • Values: Integer between 0 and 65536.

image.alt ​

  • Type: string
  • Description: Contains the content of the Alt-Attibute field.
  • Typical Usage:
    • For alt attribute of an image tag, e.g. an image called 'my_image'.
    HTML
      <img alt="{{section.settings.my_image.alt}}" src="{{section.settings.my_image.fallback_big}}" srcset="{{section.settings.my_image.srcset}}">

image.title ​

  • Type: string
  • Description: Contains the content of the description field.
  • Typical Usage:
    • For title attribute of an image tag, e.g. an image called 'my_image'.
    HTML
      <img title="{{section.settings.my_image.title}}" alt="{{section.settings.my_image.alt}}" src="{{section.settings.my_image.fallback_big}}" srcset="{{section.settings.my_image.srcset}}">

image.format ​

  • Type: string
  • Description: Returns the format of the uploaded image or PDF respectively, which is one of predefined values. Our image service Cloudinary delivers the image format the used browser prefers automatically. Hence, there is usually no need to know the uploaded format. But since it is possible to use the image upload fields for PDF upload, format information can be used to display a PDF inside a special container (e.g. iframe, embed, object), empowering browsers to use their built-in PDF-viewer feature.
  • Values:
    • jpg
    • svg
    • png
    • webp
    • ico
    • bmp
    • gif
    • ai
    • tiff
    • pdf
    • psd
    • heic
  • Typical Usage:
    • If uploaded file type is PDF-document show it as such, else display it as an image, e.g. a file called 'my_file'.
    HTML
        {%- if my_file.format == 'pdf' -%}
        {%- assign image_params = '{"src": "src", "fetch_format": "pdf"}' -%}
        <iframe src="{{my_image[image_params]}}" style="width:300; height: 400;" type="application/pdf" allowfullscreen ></iframe>
    {%- else -%}
        <img src="{{my_image.fallback_big}}" srcset="{{my_image.srcset}}">
    {%- endif -%}

image.vector? ​

  • Type: boolean
  • Description: Returns true if the image contains a vector graphic like SVG.
  • Typical Usage:
    • If image is a vector graphic we do not need a srcset and do not want typical image resizing, e.g. an image called 'my_image'.
    HTML
        {%- if my_image.vector? -%}
        <img src="{{my_image.src_svg}}.svg">
    {%- else -%}
        <img src="{{my_image.fallback_big}}" srcset="{{my_image.srcset}}">
    {%- endif -%}

image.src_svg ​

  • Type: string
  • Description: Contains the url of the image without special cloudinary manipulations.
  • Typical Usage:
    • If image is a vector graphic we do not need a srcset and do not want typical image resizing, e.g. an image called 'my_image'.
    HTML
        {%- if my_image.vector? -%}
        <img src="{{my_image.src_svg}}.svg">
    {%- else -%}
        <img src="{{my_image.fallback_big}}" srcset="{{my_image.srcset}}">
    {%- endif -%}

image.fallback deprecated ​

  • Type: string
  • Description: Contains the url of the image, where the image is manipulated to have a width of 50 pixel.
  • Typical Usage:
    • For src attribute of an image tag in case srcset is not supported by a Browser, e.g. an image called 'my_image'.
    HTML
      <img src="{{section.settings.my_image.fallback}}" srcset="{{section.settings.my_image.srcset}}">

image.fallback_big deprecated ​

  • Type: string
  • Description: Contains the url of the image, where the image is manipulated to have a width of 100 pixel.

image.fallback_small deprecated ​

  • Type: string
  • Description: Contains the url of the image, where the image is manipulated to have a width of 25 pixel.

image.srcset ​

  • Type: string
  • Description: Contains a whole srcset with 15 width descriptors, where the image is manipulated appropiately.
  • Typical Usage:
    • For srcset attribute of an image tag, e.g. an image called 'my_image'.
    HTML
      <img title="{{section.settings.my_image.title}}" alt="{{section.settings.my_image.alt}}" src="{{section.settings.my_image.fallback_big}}" srcset="{{section.settings.my_image.srcset}}">

image.src ​

  • Type: string
  • Description: Contains the url of the image with only fundamental cloudinary manipulators.

image[commands_object] ​

  • Type: string
  • Description: Contains url of the image with only basic cloudinary security manipulators and gives the Theme designer the possibility to use every command combination our mighty cloud-based image and video management service Cloudinary offers. For a complete reference of possible commands seeCloudinary transformation reference.
  • Caution: Because of unfavorable Liquid rendering rules the parameters object enclosed in curly braces cannot be enclosed in Liquid's double curly braces and square brackets. Simply assign parameters variable with a seperate Liquid command as shown in examples.
  • Typical Usage:
    • Get url of image with exact width of 500px.
    HTML
    {%- assign img_src_params = '{"src": "src", "width": "500"}' -%}
<img src="{{section.settings.my_img[img_src_params]}}">
    • Get urls of image for srcset with exact aspect ratio.
    HTML
    {%- assign img_src_params_as_fallback = '{"src": "src", "width": "50"}' -%}
{%- assign img_srcset_params = '{"src": "srcset", "crop": "crop", "aspect_ratio": "4:3"}' -%}
<img src="{{section.settings.my_img[img_src_params_as_fallback]}}" srcset="{{section.settings.my_img[img_srcset_params]}}">

image.src_best deprecated ​

  • Type: string
  • Description: Contains a the url of the image whith only fundamental cloudinary manipulators and quality: eco.

image.src_eco deprecated ​

  • Type: string
  • Description: Contains a the url of the image whith only fundamental cloudinary manipulators and quality: best.

link.text ​

  • Type: string
  • Description: Contains the text of the link, e.g. the text on a button.
  • Typical Usage:
    • Content of text on a button.
    HTML
    <a class="btn" href="{{link.url}}" title="{{link.title}}">
    {{link.text}}
</a>
  • Type: string
  • Description: Contains the content for title attribute of the link.
  • Typical Usage:
    • Content of title on a button.
    HTML
    <a class="btn" href="{{link.url}}" title="{{link.title}}">
    {{link.text}}
</a>
  • Type: string
  • Description: Contains the url of the link. This can be an extern link starting with "http://" or "https:// or an intern link starting with a slash "/".
  • Typical Usage:
    • Content of text on a button.
    HTML
    <a class="btn" href="{{link.url}}" title="{{link.title}}">
    {{link.text}}
</a>

link.target_page ​

  • Type: Page

  • Description: Contains the Page object targeted by an intern link. The existance of the intern link is validated.

  • Typical Usage:

    • Used to determine if link is internal.
    HTML
    
  <a class="btn" href="{{link.url}}" href="{{link.title}}"
      {%- if link.target_page == false -%}
          target="_blank" rel="noopener noreferrer"
      {%- endif -%}
      >
      {{link.text}}
  </a>
  • Type: Array of links
  • Description: A link inside a link_list can alternatively be a link or an array of links (link_list). This can be used for nested menus with several levels.
  • Type: integer
  • Description: Contains the position of the link inside a link_list.
  • Values: Integer between 0 and 65536.
  • Type: string
  • Description: Contains the name of the link_list, which is the same as the handle, e.g. for a link_list with name my_link_list the string returned by my_link_list.name_ is my_link_list!
  • Type: Array of links
  • Description: Each element can be a link or a link_list. This can be used for nested menus with several levels.
  • Type: integer
  • Description: Contains the position of a nested link_list inside the link_list one level higher.
  • Values: Integer between 0 and 65536.
  • Type: array of objects
  • Description: Contains the Page object targeted by an intern link. The existance of the intern link is validated.
  • Typical Usage:
    • Used to render all links inside a link_list, e.g. a link_list called 'my_link_list' and not nested.
    HTML
    <ul>
    {%- for link in section.settings.my_link_list.links -%}
        <li>
            <a href="{{link.url}}" title="{{link.title}}">
                {{link.text}}
            </a>
        </li>
    {%- endfor -%}
</ul>
    • Used to render all links inside a link_list, e.g. a nested link_list called 'my_link_list' with depth 1 .
    HTML
    <ul>
  {%- for link_level_1 in section.settings.my_link_list.links -%}
    {%- if link_level_1.url -%}
      <li>
        <a href="{{link_level_1.url}}" title="{{link_level_1.title}}">
          {{link_level_1.text}}
        </a>
      </li>
    {%- else -%}
      <li>
        <ul>
          {%- for link_level_2 in link_level_1.links -%}
            {%- if link_level_2.url -%}
              <li>
                <a href="{{link_level_2.url}}" title="{{link_level_2.title}}">
                  {{link_level_2.text}}
                </a>
              </li>
            {%- endif -%}
          {%- endfor -%}
        </ul>
      </li>
    {%- endif -%}
  {%- endfor -%}
</ul>

page ​

  • Type: object
  • Description: Contains informations entered into page fields and sections build by Content Mangagers of the specific page.
  • Available inside PageTemplate and SectionTemplate via page, and via website.pages.

page.uuid ​

  • Type: string
  • Description: Every page has ist own Universally Unique Identifier (uuid).

page.published ​

  • Type: string
  • Description: Returns the published state of a page. There are four possible values:
    1. default_no
    2. no
    3. yes_unlisted
    4. yes
  • Typical Usage:
    • Prevent that the page is listed in the sitemap.
    HTML
      {%- if page.published == 'yes_unlisted' -%}
    <meta name="robots" content="noindex">
  {%- endif -%}

page.title ​

  • Type: string
  • Description: Returns the title field of page.
  • Typical Usage:
    • Content of title HTML tag inside Layout.
    HTML
    <title>{{page.title | default: website.title }</title>
    HTML
    <meta property="og:title" content="{{page.title | default: website.title}}">

page.description ​

  • Type: string
  • Description: Returns the description field of page.
  • Typical Usage:
    • Content of meta HTML tag inside Layout.
    HTML
    <meta name="description" content="{{page.description | default: website.description}}">
    HTML
    <meta property="og:description" content="{{page.description | default: website.description}}">

page.path ​

  • Type: string
  • Description: Contains the path of a page.
  • Typical Usage:
    • Use inside PageTemplate for HTML class to give individual pages or its sections specific styling.
    HTML
    {%- if page.path == '/' -%}
    {%- assign pageclass = 'start' -%}
{%- else -%}
    {%- assign pageclass = page.path | replace: '/','' -%}
{%- endif -%}
<main class="{{pageclass}}">
    {{main_content_for_page}}
</main>
    • Check if a link (e.g. inside a link_list) references the current page.
    HTML
    {%- if link.target_page == page.path -%}
    <!-- Specific actions -->
{%- endif -%}
<main class="{{pageclass}}">
    {{main_content_for_page}}
</main>

page.start_page ​

  • Type: boolean
  • Description: Returns true if a page is the start-page.

page.kind ​

  • Type: string
  • Description: Contains the kind of the page, which is one of predefined values.
  • Values:
    • page
    • start_page
    • blog_article
    • blog_overview
    • support_article
    • support_overview
    • customer_reference
    • press_release
    • landing_page
    • job_posting
    • event
    • 404
  • Typical Usage:
    • Find all pages of a given kind, e.g. blog_article.
    HTML
    {%- assign blog_article_pages = website.pages | where: 'kind', 'blog_article' -%}

page.sections ​

  • Type: array of objects
  • Description: Returns sections of the page-sections area of a specific page.

page.threads ​

  • Type: array of objects

  • Description: Contains all comment threads of a specific page. See thread object.

  • Typical Usage:

    HTML
    {%- for section in page.sections -%}
    {%- if section.template.schema_name == 'hero-27' -%}

        {%- assign blogposting_image = section.blocks[0].settings.src_best | strip -%}
        {%- assign blogposting_genre = section.settings.blogposting_genre -%}
        {%- assign blogposting_headline = section.settings.blogposting_headline -%}
        {%- assign blogposting_alternativeheadline = section.settings.blogposting_alternativeheadline -%}
        {%- assign blogposting_datepublished = section.settings.blogposting_datepublished -%}
        {%- assign blogposting_datemodified = section.settings.blogposting_datemodified -%}
        {%- assign blogposting_author_name = section.settings.blogposting_author_givenname | append: ' ' | append: blogposting_author_familyname -%}
        {%- assign blogposting_datemodified = section.settings.blogposting_datemodified -%}

        <script type="application/ld+json">
            {
            "@context": "https://schema.org/",
            "@type": "BlogPosting",
            "genre": "{{blogposting_genre}}",
            "headline": "{{blogposting_headline}}",
            "alternativeHeadline": "{{blogposting_alternativeheadline}}",
            "image": "{{blogposting_image}}",
            "datePublished": "{{blogposting_datepublished}}",
            "dateModified": "{{blogposting_datemodified}}",
            "publisher": {
                "@id": "#organization"
            },
            "author": {
                "@context": "https://schema.org/",
                "@type": "Person",
                "name": "{{blogposting_author_name}}"
            }{%- if page.threads.size > 0 -%},
            "comment": [
                {%- for thread in page.threads -%}
                {
                    "@context": "https://schema.org/",
                    "@type": "Comment",
                    "text": "{{thread.content}}",
                    "datePublished": "{{thread.created_at}}",
                    "author": {
                    "@context": "https://schema.org/",
                    "@type": "Person",
                    "name": "{{thread.author_name}}"
                    }{%- if thread.replies.size > 0 -%},
                    "comment": [
                    {%- for reply in thread.replies -%}
                        {
                        "@context": "https://schema.org/",
                        "@type": "Comment",
                        "text": "{{reply.content}}",
                        "datePublished": "{{reply.created_at}}",
                        "author": {
                            "@context": "https://schema.org/",
                            "@type": "Person",
                            "name": "{{reply.author_name}}"
                        }
                        }{%- unless forloop.last -%},{%- endunless -%}
                    {%- endfor -%}
                    ]
                    {%- endif -%}
                }{%- unless forloop.last -%},{%- endunless -%}
                {%- endfor -%}
            ]
            {%- endif -%}
            }
        </script>
        {%- break -%}

    {%- endif -%}
{%- endfor -%}

page.create_thread ​

  • Type: object
  • Description: Provides required form attributes and security form tags for add comment form.
  • Typical Usage:
    HTML
        <form class="cb-form cb-form-comment cb-comments-form_thread" {{page.create_thread.required_form_attributes}}>
        {{page.create_thread.security_form_tags}}
        <!-- HTML for form-fields -->
    </form>

page.create_thread.required_form_attributes ​

  • Type: string
  • Description: Provides required form attributes for HTML tag form.

page.create_thread.security_form_tags ​

  • Type: string
  • Description: Provides required form tags which are needed inside HTML tag form to add comment.

page.topic.article_groups ​

  • Type: array of objects
  • Description: Contains several article groups, each containing article pages, making this page a topic page, which can be accessed from associated article pages.
  • Typical Usage:
    • Render all article groups with contained article pages of a topic page.
    Liquid
        {%- for article_group in page.topic.article_groups -%}
        <h3> {{ article_group.label }} </h3>
        ...
      {%- for article_page in article_group.article_pages -%}
        ...
      {%- endfor -%}
    {%- endfor -%}

article_group ​

article_group.article_pages ​
  • Type: array of objects
  • Description: Contains several article_pages.
article_group.topic_page ​
  • Type: object
  • Description: Reference to parent topic page containing this article group.
article_group.label ​

page.article.article_group ​

page.article.topic_page ​

  • Type: object
  • Description: Reference to parent topic pages containing this article's parent article groups.
  • Typical Usage:
    • Render link to topic page.
    Liquid
      <a href="{{page.article.topic_page.path}}"> Thema </a>

page.article.next_article_page ​

page.article.previous_article_page ​

page_template ​

page_template.name ​

  • Type: string
  • Description: Returns the name field of page template.
  • Values:
    • page
    • start_page
    • landing_page
    • blog_article
    • blog_overview
    • support_article
    • support_overview
    • 404
    • customer_reference
    • press_release
    • event
    • job_posting
  • Typical Usage:
    • Used as class on body HTML tag inside Layout.
    HTML
    <body class="{{page_template.name}}">

reply ​

  • Available via thread.replies.
  • Description: A reply is a comment on a thread comment, which is on the content of a page. Every thread can have multiple replies.

reply.author_name ​

  • Type: string
  • Description: Contains the author name of a thread.
  • Typical Usage:
    • Render author name of a comment on a page.
    Liquid
        {%- for reply in thread.replies -%}
        ...
        {{reply.author_name}}
        ...
    {%- endfor -%}

reply.author_email ​

  • Type: string
  • Description: Contains the author email of a thread.
  • Typical Usage:
    • Render author email of a comment on a page.
    Liquid
        {%- for reply in thread.replies -%}
        ...
        {{reply.author_email}}
        ...
    {%- endfor -%}

reply.content ​

  • Type: string
  • Description: Contains the comment's text of a thread.
  • Typical Usage:
    • Render content of a comment on a page.
    Liquid
        {%- for reply in thread.replies -%}
        ...
        {{reply.content}}
        ...
    {%- endfor -%}

reply.created_at ​

  • Type: string
  • Description: Contains the comment's create date of a thread in ISO format.
  • Typical Usage:
    • Render create date of a comment on a page.
    Liquid
        {%- for reply in thread.replies -%}
        ...
        {{reply.created_at | date: "%e.%m.%Y, %H:%M"}}
        ...
    {%- endfor -%}

reply.uuid ​

  • Type: string
  • Every reply has ist own Universally Unique Identifier (uuid).

reply.required_comment_wrapper_attributes ​

  • Type: string
  • Description: Provides required wrapper attributes for the enclosing HTML tag of a reply section.

rich_text ​

  • Type: object
  • Description: Contains properties for styled text (html) and unstyled version (plain). For blocks the block type is text and for a TDSL-object the kind is rich_text.

rich_text.html ​

  • Type: string
  • Description: Returns full content with HTML tags and Quill editor styling.
  • Typical Usage:
    • Render text styled by Content Managers, e.g. a rich_text named my_richtext.
    HTML
    <div>
    {{section.settings.my_richtext.html}}
</div>

rich_text.plain ​

  • Type: string
  • Description: Returns only the plaintext without HTML tags and Quill editor styling.
  • Typical Usage:
    • Render styled text, e.g. a rich_text named my_richtext.
    HTML
    <p>
    {{section.settings.my_richtext.plain}}
</p>

section ​

  • Type: object
  • Description: Contains informations entered into section fields and content inserted by Content Mangagers of the specific section.
  • Available inside SectionTemplate via section, and via page.sections.

section.published ​

  • Type: string
  • Description: Returns the published state of a section. There are four possible values:
    1. default_no
    2. no
    3. yes_unlisted
    4. yes
  • Typical Usage:
    • the section can be edited, but it will not be displayed on the page. No action by the Theme Designer is necessary for this.

section.settings ​

  • Type: object
  • Description: Contains all informations entered into section fields inserted by Content Mangagers. The available fields depend on the used SectionTemplate and involve only the fields the ThemeDesigner has built into it.
  • Available inside SectionTemplate.
  • See TDSL-Objects / schema

section.template ​

section.style ​

  • Type: string
  • Description: Contains the content of the field Style (CSS). Content managers can insert specific CSS commands for this element which can be used as inline style on an appropriate HTML tag. Be aware that this input is of very limited use despite the richness of possible CSS commands that can be put here by Content managers, since usually it is placed on only one specific HTML tag which it exclusivly manipulates. To avoid Content Managers destroying alternative styling by using wrong CSS-Syntax and to make it possible to overwrite styles inside SectionTemplate, put it at the end of the style attribute.
  • Typical Usage:
    • Render the styles inserted by Content Managers on outermost SectionTemplate.
    HTML
    <section style="color: #123; {{section.style}}">
  ...
</section>

section.position ​

  • Type: integer
  • Description: Contains position of the section.
  • Values: Integer between 0 and 65536.
  • Typical Usage:
    • Construct specific ids for each column inside a section on a page. See column.position

section.kind ​

  • Type: string
  • Description: Contains kind of the section, which is one of predefined values.
  • Values:
    • header
    • main
    • footer
  • Typical Usage:
    • Construct specific ids for each column inside a section on a page. See column.position

section.blocks deprecated ​

  • Type: array of blocks
  • Description: Contains the blocks of section, which are directly bound to it, but not _ blocks_ which are inside a column of this section.
  • Typical Usage:
    • Render all blocks of a section.
    HTML
    {%- for block in section.blocks -%}
    <!-- Specific HTML depending on type of `block` -->
{%- endfor -%}

section.columns deprecated ​

  • Type: array of columns
  • Description: Contains the columns of section, which contain blocks.
  • Typical Usage:
    • Render all blocks of a section.
    HTML
    {%- for column in section.columns -%}
    <!-- HTML to render the blocks of `column` -->
{%- endfor -%}

section_template ​

section_template.name ​

  • Type: string
  • Description: Contains the name of the SectionTemplate used in the section, as named inside the App.

section_template.schema_name ​

section_template.css_class ​

  • Type: string
  • Description: Contains the CSS classes as defined inside the schema and rendered onto the outmost HTML tag of each section added by the App.

thread ​

  • Available via page.threads.
  • Description: A thread is a comment on the content of a page. Every thread can have replies, which are comments on the original thread comment.
  • Typical Usage:
    • Render all comments of a page.
    HTML
        {%- for thread in page.threads -%}
        <div {{thread.required_comment_wrapper_attributes}}>
            <p>
                {{thread.author_name}}
            </p>
            <p>
                {{thread.created_at | date: "%e.%m.%Y, %H:%MUhr"}}
            </p>
            <p>
                {{thread.content}}
            </p>
        </div>
    {%- endfor -%}

thread.author_name ​

  • Type: string
  • Description: Contains the author name of a thread.
  • Typical Usage:
    • Render author name of a comment on a page.
    HTML
        {%- for thread in page.threads -%}
        ...
        {{thread.author_name}}
        ...
    {%- endfor -%}

thread.author_email ​

  • Type: string
  • Description: Contains the author email of a thread.
  • Typical Usage:
    • Render author email of a comment on a page.
    HTML
        {%- for thread in page.threads -%}
        ...
        {{thread.author_email}}
        ...
    {%- endfor -%}

thread.content ​

  • Type: string
  • Description: Contains the comment's text of a thread.
  • Typical Usage:
    • Render content of a comment on a page.
    HTML
        {%- for thread in page.threads -%}
        ...
        {{thread.content}}
        ...
    {%- endfor -%}

thread.created_at ​

  • Type: string
  • Description: Contains the comment's create date of a thread in ISO format.
  • Typical Usage:
    • Render create date of a comment on a page.
    HTML
        {%- for thread in page.threads -%}
        ...
        {{thread.created_at | date: "%e.%m.%Y, %H:%M"}}
        ...
    {%- endfor -%}

thread.uuid ​

  • Type: string
  • Every thread has ist own Universally Unique Identifier (uuid).

thread.security_form_tags ​

  • Type: string

  • Description: Provides required form tags which are needed inside the form to add a reply to a thread.

  • Form to enable input of a reply on a thread, which is a page comment.

    HTML
        <form {{thread.required_form_attributes}}>
        {{thread.security_form_tags}}

            <div class="form-group">
                <label for="cb-comments-thread-form_reply-content-input_id-{{thread_no}}" id="cb-comments-thread-form_reply-content-label_id-{{thread_no}}">
                    Comment text
                </label>
                <textarea aria-describedby="cb-comments-thread-form_reply-content-label_id-{{thread_no}}" id="cb-comments-thread-form_reply-content-input_id-{{thread_no}}" name="content" required></textarea>
            </div>

            <div class="form-group">
                <label for="cb-comments-thread-form_reply-author_name-input_id-{{thread_no}}" id="cb-comments-thread-form_reply-author_name-label_id-{{thread_no}}">
                    Author name
                </label>
                <input aria-describedby="cb-comments-thread-form_reply-author_name-label_id-{{thread_no}}" id="cb-comments-thread-form_reply-author_name-input_id-{{thread_no}}" name="author_name" required type="text">
            </div>

            <div class="form-group">
                <label for="cb-comments-thread-form_reply-author_email-input_id-{{thread_no}}" id="cb-comments-thread-form_reply-author_email-label_id-{{thread_no}}">
                    Author email
                </label>
                <input aria-describedby="cb-comments-thread-form_reply-author_email-label_id-{{thread_no}}" id="cb-comments-thread-form_reply-author_email-input_id-{{thread_no}}" name="author_email" required type="text">
            </div>

            <button type="submit">
                Submit comment
            </button>

        </div>
    </form>

thread.required_form_attributes ​

  • Type: string
  • Description: Provides required form attributes for HTML tag form.

thread.required_comment_wrapper_attributes ​

  • Type: string
  • Description: Provides required wrapper attributes for an enclosing HTML tag of a thread section, containing the comment itself, all replies to it and the reply form.

thread.replies ​

  • Type: array of objects
  • Description: Contains all replies, which are comments to a thread, which is a comment on a page. See reply object for available fields.
  • Typical Usage:
    • Render alle replies to a page's comment.
    HTML
        {%- for reply in thread.replies -%}
        ...
    {%- endfor -%}

website ​

  • Type: object
  • Description: Contains informations entered into website fields by Content Managers.
  • Available inside Layout, PageTemplate and SectionTemplate via website.

website.title ​

  • Type: string
  • Description: Returns the title field of website.
  • Typical Usage:
    HTML
    <title>{{page.title | default: website.title}}</title>
    HTML
    <meta property="og:site_name" content="{{website.title}}">

website.description ​

  • Type: string
  • Description: Returns the description field of website.
  • Typical Usage:
    HTML
    <meta name="description" content="{{page.description | default: website.description}}">
    HTML
    <meta property="og:description" content="{{page.description | default: website.description}}">

website.lang ​

  • Type: string
  • Description: Returns the ISO Language Code of the language field of website.
  • Typical Usage:
    • lang attribute of html HTML tag.
    HTML
    <html lang="{{website.lang}}">
    • Find language of current website.
    HTML
    {%- if website.lang == 'de' -%}
    <!-- Specific HTML for german language -->
{%- endif -%}

website.subscription ​

  • Type: string
  • Description: Returns the name of the tariff plan field of website.
  • Values:
    • Free
    • Basic
    • Professional
    • Enterprise
  • Typical Usage:
    • Special design for customers on certain tariff plans.
    HTML
    {%- if website.subscription == 'Enterprise' -%}
    <!-- Specific HTML for customers on tariff plan `Enterprise` -->
{%- endif -%}

website.primary_domain ​

  • Type: string
  • Description: Returns the URL (without protocol) inside the name field of the primary domain of the website. The primary domain is the domain with the gold-filled star.
  • Typical Usage:
    • Canonical link when website has multiple domains.
    HTML
    <link rel="canonical" href="https://{{website.primary_domain}}{{page.path}}">
    • Page link for structured data like 'Opengraph'.
    HTML
    <meta property="og:url" content="https://{{website.primary_domain}}{{page.path}}">

website.pages ​

  • Type: array of objects
  • Description: Returns all pages of website.
  • Typical Usage:
    • Find all pages of a given kind, e.g. blog_article.
    HTML
    {%- assign blog_article_pages = website.pages | where: 'kind', 'blog_article' -%}

website.settings ​

website.faq_items ​

  • Type: array of objects
  • Description: Returns all faq_items of a website.
  • Typical Usage:
HTML
{%- for faq_item in website.faq_items -%}
  <p>
      {{faq_item.position}}
  </p>
{%- endfor -%}
  • Type: object
  • Description: Reference to specialized link list for learning_center containg all topic pages with article groups containg article_pages.
  • Typical Usage: Used to render all links of learning center link_list.
    HTML
    <ul>
  {%- for link in website.learning_center_link_list.links -%}
    ...
  {%- endfor -%}
</ul>

block deprecated ​

block.string ​

  • Type: integer
  • Every block has ist own Universally Unique Identifier (uuid).

block.position ​

  • Type: integer
  • Description: Contains the position of the block.
  • Values: Integer between 0 and 65536.

block.block_type ​

  • Type: string
  • Description: Contains the object type of the block`s content.
  • Values:
  • Typical Usage:
    • Used to render unknown block-content appropiately.
    Liquid
    {%- case block.block_type -%}
{%- when 'image' -%}
    <!-- HTML for rendering an image object -->
{%- when 'text' -%}
    <!-- HTML for rendering a text object -->
{%- when 'form' -%}
    <!-- HTML for rendering a form object -->
{%- when 'html' -%}
    <!-- HTML for rendering a html snippet object -->
{%- endcase -%}

block.settings ​

  • Type: object
  • Description: The fields on this object depend on the block_type of the block, which constitute the API's lowest level objects. The properties of the contained object are called by block.settings.PROPERTY_NAME. For further information see the specific block types:

block.style ​

  • Type: string
  • Description: Contains the content of the field Style (CSS). Content managers can insert specific CSS commands for this element which can be used as inline style on an appropriate HTML tag.

column deprecated ​

column.position ​

  • Type: integer
  • Description: Contains the position of the column.
  • Values: Integer between 0 and 65536.
  • Typical Usage:
    • Construct specific ids for each column inside a section on a page.
    HTML
    {%- assign section_id = 'section-' | append: section.kind | append: '-' | append: section.position -%}
{%- assign column_id = section_id | append: '-column-' | append: col.position -%}
<div class="section-column" id="{{column_id}}">
    ...
</div>

column.width ​

  • Type: string
  • Description: Contains the width of the column.
  • Values: 1, 3/4, 2/3, 1/2, 1/3, 1/4, 1/6, 1/12, 5/12, 7/12.
  • Typical Usage:
    • Let each column have its specific widt as determined by Content managers.
    HTML
    <!-- HTML outside columns here -->
{%- for column in section.columns -%}
    {%- case column.width -%}
    {%- when 'auto' -%}
        {%- assign column_width_class = 'col' -%}
    {%- when '1' -%}
        {%- assign column_width_class = 'col-12' -%}
    {%- when '3/4' -%}
        {%- assign column_width_class = 'col-12 col-md-9' -%}
    {%- when '2/3' -%}
        {%- assign column_width_class = 'col-12 col-md-8' -%}
    {%- when '1/2' -%}
        {%- assign column_width_class = 'col-12 col-md-6' -%}
    {%- when '1/3' -%}
        {%- assign column_width_class = 'col-12 col-md-4' -%}
    {%- when '1/4' -%}
        {%- assign column_width_class = 'col-6 col-md-3' -%}
    {%- when '1/6' -%}
        {%- assign column_width_class = 'col-6 col-md-2' -%}
    {%- when '1/12' -%}
        {%- assign column_width_class = 'col-4 col-md-1' -%}
    {%- endcase -%}
    ...
    <div class="section-column {{column_width_class}}">
        <!-- HTML inside columns here -->
    </div>
{%- endfor -%}

column.style ​

  • Type: string
  • Description: Contains content of field Style (CSS). Content managers can insert specific CSS commands which can be used as inline style on an appropriate HTML tag.

column.blocks ​

  • Type: array of blocks
  • Description: Contains blocks of column.
  • Typical Usage:
    • Render all blocks of columns of a section.
    HTML
    {%- for column in section.columns -%}
    <!-- HTML for outer `column` -->
  {%- for block in column.blocks -%}
      <!-- HTML for `column` contents. Specific HTML depending on type of `block` -->
  {%- endfor -%}
{%- endfor -%}

linklists deprecated ​

  • Available inside Layout, PageTemplate and SectionTemplate via linklists.
  • Description: Contains an object with all link_list objects created on a website as properties.
  • Typical Usage:
    • Automatically use a link_list called "navigation" as default navigation link_list without Content managers having to set a specific link_list explicitly.
    HTML
    <ul>
  {%- for menuitem in linklists.navigation.links -%}
    <li>
      <a href="{{menuitem.url}}" title="{{menuitem.title}}">
        {{menuitem.text}}
      </a>
    </li>
  {%- endfor -%}
</ul>