Slices Templating with Ruby

The Slices field is used to define a dynamic zone for richer page layouts. 

Example 1

Here is a simple example that shows how to add slices to your templates. In this example, we have two slice options: a text slice and an image gallery slice.

Text slice

The "text" slice is simple and only contains one field, which is non-repeatable.

non-repeatable

- A Rich Text field with the API ID of "rich_text"

repeatable

None

The "image_gallery" slice contains both repeatable and non-repeatable fields.

non-repeatable

- A Title field with the API ID of "gallery_title"

repeatable

- An Image field with the API ID of "gallery_image"

Integration

Here is an example of how to integrate these slices into a blog post.

Copy
<div class="blog-content">
  <% @document["blog_post.post_content"].slices.each do |slice| %>
    <% case slice.slice_type
       when "text" %>
          <%= slice.non_repeat["rich_text"].as_html(link_resolver).html_safe %>
    <% when "image_gallery" %>
        <h2><%= slice.non_repeat["gallery_title"].as_text %></h2>
        <% slice.repeat.each do |image| %>
          <img src="<%= image["gallery_image"].url %>">
        <% end %>
    <% end %>
  <% end %>
</div>

Example 2

The following is a more advanced example that shows how to use Slices for a landing page. In this example, the Slice choices are FAQ question/answers, featured items, and text sections.

FAQ slice

The "faq" slice is takes advantage of both the repeatable and non-repeatable slice sections.

non-repeatable

- A Title field with the API ID of "faq_title"

repeatable

- A Title field with the API ID of "question"

- A Rich Text field with the API ID of "answer"

The "featured_items" slice contains a repeatable set of an image, title, and summary fields.

non-repeatable

None

repeatable

- An Image field with the API ID of "image"

- A Title field with the API ID of "title"

- A Rich Text field with the API ID of "summary"

Text slice

The "text" slice contains only a Rich Text field in the non-repeatable section.

non-repeatable

- A Rich Text field with the API ID of "rich_text"

repeatable

None

Integration

Here is an example of how to integrate these slices into a landing page.

Copy
<div class="page-content">
  <% @document["page.body"].slices.each do |slice| %>
    <% case slice.slice_type
  
       when "faq" %>
          <div class="faq">
            <%= slice.non_repeat["faq_title"].as_html(link_resolver).html_safe %>
            <% slice.repeat.each do |faq| %>
              <div>
                <%= faq["question"].as_html(link_resolver).html_safe %>
                <%= faq["answer"].as_html(link_resolver).html_safe %>
              </div>
            <% end %>
          </div>
    
      <% when "featured_items" %>
        <div class="featured-items">
          <% slice.repeat.each do |featured_item| %>
            <% image_url = featured_item["image"].url %>
            <div>
              <img src="<%= image_url %>">
              <%= featured_item["title"].as_html(link_resolver).html_safe %>
              <%= featured_item["summary"].as_html(link_resolver).html_safe %>
            </div>
          <% end %>
        </div>
    
      <% when "text" %>
        <div class="text">
          <%= slice.non_repeat["rich_text"].as_html(link_resolver).html_safe %>
        </div>
      
    <% end %>
  <% end %>
</div>

Old Style Slices (deprecated)

Old Style Example 1

Here’s an example that shows how to integrate the old-style Slices into a blog post. The two available Slice choices in this example are Rich Text fields and Images.

Copy
<div class="blog-main">
  <% @document["blog-post.post-content"].slices.each do |slice| %>
    <% case slice.slice_type
       when "rich-text" %>
          <%= slice.value.as_html(link_resolver).html_safe %>
    <% when "image" %>
        <img src="<%= slice.value.url %>">
    <% end %>
  <% end %>
</div>

Old Style Example 2

The following is a more advanced demonstration of the old-style Slices for a landing page. In this example, the Slice choices are FAQ question/answers, featured items, and text sections.

Copy
<div class="page-content">
  <% @document["page.body"].slices.each do |slice| %>
    <% case slice.slice_type
  
       when "faq" %>
          <div class="faq">
            <% slice.value.each do |faq| %>
              <div>
                <%= faq["question"].as_html(link_resolver).html_safe %>
                <%= faq["answer"].as_html(link_resolver).html_safe %>
              </div>
            <% end %>
          </div>
    
      <% when "featured-items" %>
        <div class="featured-items">
          <% slice.value.each do |featured_item| %>
            <% image_url = featured_item["image"].url %>
            <div>
              <img src="<%= image_url %>">
              <%= featured_item["title"].as_html(link_resolver).html_safe %>
              <%= featured_item["summary"].as_html(link_resolver).html_safe %>
            </div>
          <% end %>
        </div>
    
      <% when "text" %>
        <div class="text">
          <%= slice.value.as_html(link_resolver).html_safe %>
        </div>
        
    <% end %>
  <% end %>
</div>