Skip to content

Instantly share code, notes, and snippets.

@profstein
Last active April 4, 2022 22:40
Show Gist options
  • Save profstein/4ae64b38995401e09faa2a8adb5ef1c8 to your computer and use it in GitHub Desktop.
Save profstein/4ae64b38995401e09faa2a8adb5ef1c8 to your computer and use it in GitHub Desktop.
This is an example of how to write Nunjucks loop to display posts as a card. This will show all pages with a tag of design and front matter data variables postImg, postImgAlt, and description.
<main class="design cards">
<h2 class="cards_header">Graphic Design Projects</h2>
{%- for page in collections.design %}
<div class="pjcard">
<div class="card_img">
<a href="{{page.url}}"><img src="/images/{{page.data.postImg}}" alt="{{page.data.postImgAlt}}"></a></div>
<div class="card_text">
<h3><a href="{{page.url}}">{{page.data.title}}</a></h3>
<p>{{page.data.description}}<p>
</div>
</div>
</div>
{%- endfor %}
</main>
title layout tags postImg postImgAlt description
page title
base.njk
work
design
photo.jpg
alt text
Brief Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis expedita fuga molestiae ullam magni. Velit.

page content would go here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment