Jekyll > Modular content fields

Note This guide assumes you have a basic knowledge of how Modular content fields work in DatoCMS. If this is not the case, please read this introduction first.

Suppose a blog_post model has a modular-content field called body, which in turn accepts the following blocks:

• Block blog_post_text_block: made of a text field (multi-paragraph text);

• Block blog_post_quote_block: made of a quote field (multi-paragraph text) and author field (single-line string);

• Block blog_post_gallery_block: made of a gallery field (image gallery);

A modular-content field works much like a multiple links field, as it returns an array of the inner records. In your dato.config.rb file you can dump a modular-content field inside the frontmatter of a post like this:

# inside a "_posts" directory...
directory "_posts" do
  # ...iterate over the "Blog post" records...
  dato.blog_posts.each do |article|
    # ...and create a markdown file for each article!
    create_post "#{article.slug}.md" do
      frontmatter(
        :yaml,
        title: article.title,
        author: article.author.name,
        body: article.body.to_hash
      )
    end
  end
end

---
---
<article>
  <header>
    <h1>{{ page.title }}</h1>
    <p>{{ page.author }}</p>
  </header>
  {% for record in page.body %}
    {% if record.item_type == "blog_post_text_block" %}
      <div>
        {{ record.text }}
      </div>
    {% elsif record.item_type == "blog_post_quote_block" %}
      <blockquote>
        {{ record.quote }}
        <footer>
          <cite>{{ record.author }}</cite>
        </footer>
      </blockquote>
    {% elsif record.item_type == "blog_post_gallery_block" %}
      <div class="gallery">
        {% for image in record.gallery %}
          <img src="{{ image.url }}" alt="{{ image.alt }}" title="{{ image.title }}" />
        {% endfor %}
      </div>
    {% endif %}
  {% endfor %}
</article>