Anatta Documentation

# Common Built In Elements

# UID

This element can only be used once. We use this element to create slug. More about slug in Custom Type

# Richtext

Handling rich text might get little tricky esp. when you want to fetch data with the richtext styles intact.

You can use this snippet to fetch the richtext along with the supported styles.

Add the richtext with following options.

//prismic-richtext.liquid

<div class="richtext">
  {% for block in richtext %}
    {%- assign block_type = block.type -%}
    {%- assign spans = block.spans -%}
    {%- assign text = block.text -%}
    {%- assign text_length = text | size  -%}
    {%- assign formatted_text = '' -%}
    {%- assign text_cursor = 0 -%}
  
    {%- if spans.size > 0 -%}
      {%- for span in spans -%}
        {%- assign span_start = span.start -%}
        {%- assign span_end  = span.end -%}
        {%- assign span_length = span_end | minus: span_start -%}
  
        {%- comment -%}Copy the text from the last span (or start of string) to the start of this span{%- endcomment -%}
        {%- assign cursor_to_span_length = span_start | minus: text_cursor -%}
        {%- assign cursor_to_span = text | slice: text_cursor, cursor_to_span_length -%}
        {%- assign formatted_text = formatted_text | append: cursor_to_span -%}
  
        {%- comment -%}Format and copy span{%- endcomment -%}
        {%- assign span_text = text | slice: span_start, span_length -%}
        {%- assign span_type = span.type -%}
        {%- case span_type -%}
          {%- when 'strong' -%}
            {%- capture formatted_span -%}<strong>{{span_text}}</strong>{%- endcapture -%}
          {%- when 'em' -%}
            {%- capture formatted_span -%}<em>{{span_text}}</em>{%- endcapture -%}
          {%- when 'hyperlink' -%}
            {%- capture formatted_span -%}<a class="richtext__link" href={{span.data.url}} {%- if span.data.target != blank -%}target="{{ span.data.target }}"{%- endif -%}>{{span_text}}</a>{%- endcapture -%}
          {%- when 'label' -%}
            {%- capture formatted_span -%}<span class="richtext__label-{{ span.data.label | handleize }}">{{span_text}}</span>{%- endcapture -%}
          {%- else -%}
            {%- capture formatted_span -%}<span class="richtext__{{ span_type }}">{{span_text}}</span>{%- endcapture -%}
        {%- endcase -%}
  
        {%- assign formatted_text = formatted_text | append: formatted_span -%}
  
        {%- comment -%}Move cursor{%- endcomment -%}
        {%- assign text_cursor = span_end -%}
      {%- endfor -%}
  
      {%- comment -%}Copy remaining text{%- endcomment -%}
      {%- assign cursor_to_end = text | slice: text_cursor, text_length -%}
        {%- assign formatted_text = formatted_text | append: cursor_to_end -%}
      {%- else -%}
        {%- assign formatted_text = text -%}
      {%- endif -%}
  
      {% case block_type %}
          {% when 'paragraph' %}
              <p class="richtext__text">{{formatted_text}}</p>
          {% when 'heading1' %}
              <div class="richtext__heading1" data-richText-heading>{{formatted_text}}</div>
          {% when 'heading2' %}
            <div class="richtext__heading2" data-richText-heading>{{formatted_text}}</div>
          {% when 'heading3' %}
            <div class="richtext__heading3" data-richText-heading>{{formatted_text}}</div>
          {% when 'heading4' %}
            <div class="richtext__heading4" data-richText-heading>{{formatted_text}}</div>
          {% when 'heading5' %}
            <div class="richtext__heading5" data-richText-heading>{{formatted_text}}</div>
          {% when 'heading6' %}
            <div class="richtext__heading6" data-richText-heading>{{formatted_text}}</div>
          {% when 'o-list-item' %}
            <ol class="richtext__ol">
              <li class="richtext__olItem">{{formatted_text}}</li>
            </ol>
          {% when 'list-item' %}
            <ul class="richtext__ul">
              <li class="richtext__ul-item">{{formatted_text}}</li>
            </ul>
          {% when 'image' %}
            <img src="{{block.url}}" alt="{{block.alt}}">
          {% else %}
            <span>{{formatted_text}}</span>
      {% endcase %}
  {% endfor %}
</div>

Common Usage:

<h1 class="section__heading">
 {% render 'prismic-rich-text' richtext: section.richtext %}
</h1>

Supported Feature:

  • Bold
  • Italic
  • Link
  • normal(paragraph)

# Image

Implement image with lazyload snippet. Lazyload Images
Link is used to store the url. It supports both prismic document or any valid website url.

Use this snippet to fetch url.

section['placeholder_id'].url

# Color

Color is used to store color values

Use this snippet to fetch color.

section['placeholder_id']

# Number

Number is used to store numeric values. It Supports fractional number as well.

Use this snippet to fetch number value.

section['placeholder_id']

# Key Text

key text is used to store alphabet values.

Use this snippet to fetch key text value.

section['placeholder_id']

# Select

key text is used to store selected value from provided option. option are shown in documents while filling up the data.

First add up the options in select.

Use this snippet to fetch selected value.

section['placeholder_id']

# Boolean

Boolean is can store either true or false value. You can toggle this value while filling up the data.

Use this snippet to fetch selected value.

section['placeholder_id']

← Code Snippets →