skip to Main Content

I am new to using jekyll and I faced a weird problem for a while that I can’t figure out.
so I have a moviesingle.html like this.


<div class="grid__item2">
  <div class="card">
    <div class="card_left">
      <img src="{{ movie.poster }}" alt="{{ movie.title }}" />
    </div>
    <div class="card_right">
      <h1>{{ movie.title }}</h1>
      <div class="card_right__details">
        <ul>
          <li>{{ movie.year }}</li>
          <li>{{ movie.director }}</li>
          <li>{{movie.rating}} / 10</li>
        </ul>
        <div class="card_right__review">
          <p>{{ movie.description }}</p>
          <a href="{{movie.link}}" target='_blank'>Read more</a>
        </div>

      </div>
      </div>
    </div>
  </div>
</div>
</div>

and I also have a movielist.html like this


{% for movie in site.movies %} {% include moviesingle.html %} {% endfor %}

and I have a movies.html like this

---
layout: default
title: "Movies"
permalink: /movies/
author_profile: true
---

<div id="wrapper">{% include movielist.html %}</div>

Here’s my problem I expect that all my moviesingle.html created be inside the div with id="wrapper" but only the first two elements are included and the rest are outside the . this is the end result:

      <div id="wrapper"> 
<div class="grid__item2">
  <div class="card">
    <div class="card_left">
      <img src="..." alt="...">
    </div>
    <div class="card_right">
      <h1>...</h1>
      <div class="card_right__details">
        <ul>
          <li>...</li>
          <li>...</li>
          <li>... / 10</li>
        </ul>
        <div class="card_right__review">
          <p></p>
          <a href="..." target="_blank">Read more</a>
        </div>

      </div>
      </div>
    </div>
  </div>
</div>
  
<div class="grid__item2">
  <div class="card">
    <div class="card_left">
      <img src="..." alt="...">
    </div>
    <div class="card_right">
      <h1>Arcane Season 1</h1>
      <div class="card_right__details">
        <ul>
          <li>...</li>
          <li>...</li>
          <li>... / 10</li>
        </ul>
        <div class="card_right__review">
          <p></p>
          <a href=...">Read more</a>
        </div>

      </div>
      </div>
    </div>
  </div>

If I don’t loop through contents (like putting empty s) this does not happen. if I put any other elements in the wrapper still only first two iterations of the loop are contained there. I would really appreciate if anyone knows what’s going on

2

Answers


  1. change moviesingle like this:

    <div class="grid__item2">
      <div class="card">
        <div class="card_left">
          <img src="{{ movie.poster }}" alt="{{ movie.title }}" />
        </div>
        <div class="card_right">
          <h1>{{ movie.title }}</h1>
          <div class="card_right__details">
            <ul>
              <li>{{ movie.year }}</li>
              <li>{{ movie.director }}</li>
              <li>{{movie.rating}} / 10</li>
            </ul>
            <div class="card_right__review">
              <p>{{ movie.description }}</p>
              <a href="{{movie.link}}" target='_blank'>Read more</a>
            </div>
    
          </div>
          </div>
        </div>
      </div>
    

    You had two too much at the end

    Login or Signup to reply.
  2. {% for movie in site.movies %} {% include moviesingle.html %} {% endfor %}
    

    looks good.

    Yet, in moviesingle.html you close two additional divs. If you write your code in a structured manner, like this:

            <div class="grid__item2">
                <div class="card">
                    <div class="card_left">
                        <img src="{{ movie.poster }}" alt="{{ movie.title }}" />
                    </div>
                    <div class="card_right">
                        <h1>{{ movie.title }}</h1>
                        <div class="card_right__details">
                            <ul>
                                <li>{{ movie.year }}</li>
                                <li>{{ movie.director }}</li>
                                <li>{{movie.rating}} / 10</li>
                            </ul>
                            <div class="card_right__review">
                                <p>{{ movie.description }}</p>
                                <a href="{{movie.link}}" target='_blank'>Read more</a>
                            </div>
    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    then it will be immediately clear once you look at the code.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search