Question

I’m working on a static site using middleman and am trying to use mm’s local data functionality.

Currently I have the required data directory within the source directory of my middleman project.

Inside the data directroy is a yaml file (home.yml)

Here’s the structure of the file:

slides:
    - image: "/img/slider/slide1.jpg"
      image_alt: "Slide 1 alt text"
      caption: "Slide 1 caption"

    - image: "/img/slider/slide2.jpg"
      image_alt: "Slide 2 alt text"
      caption: "Slide 2 caption"

I’m then trying to loop through those slides in a html.erb file like so:

<%= data.home.slides.each do |s| %>

    <figure class="slide">

        <%= image_tag(s[:image], alt: s[:image_alt]) %>

        <figcaption><%= s[:caption] %></figcaption>

    </figure>

<% end %>

But middleman spits a NoMethodError on the compiled html file.

undefined method `home’ for #<Middleman::CoreExtensions::Data::DataStore:0x4383918>

I don’t know what I’m doing wrong. I tried moving the data directory up a level outside of the source folder but that did nothing.

It seems like middleman doesn’t recognise the home.yml folder in side the data directory.
Any help with this is much appreciated as I’ve found there’s not much in the way of documentation or support for middleman’s data functionality.

Answer 1

You were pretty close — you just had a minor typo. Note how I removed the equals “=” sign.

Change this line:

<%= data.home.slides.each do |s| %>

to this:

<% data.home.slides.each do |s| %>

The following markup should be generated once this is done:

<figure class="slide">
    <img alt="Slide 1 alt text" src="/img/slider/slide1.jpg">
    <figcaption>Slide 1 caption</figcaption>
</figure>

<figure class="slide">
    <img alt="Slide 2 alt text" src="/img/slider/slide2.jpg">
    <figcaption>Slide 2 caption</figcaption>
</figure>