Multiple contents per Jekyll layout

github-pages, jekyll

Solution

Two "content" areas isn't really possible with Jekyll...only with tricks.

The easiest solution (which doesn't use plugins) would be the following:

Put the images into a list in the post's front matter:

---
layout: post
title: App Thing
images:
  - screenshot1.jpg
  - screenshot2.jpg
---

<-- the main content of the post -->
blah blah blah blah blah

In the layout file, replace your `{{ screenshots }}` placeholder by a loop over the list from the front-matter:

---
layout: default
---

{% if page.images %}
    <div>
    {% for image in page.images %}
        <img class="wi5" src="{{ image }}">
    {% endfor %}
    </div>
{% endif %}

<div class="wi-100 mw65 center db ptl">
  <h1 class="">{{ page.title }}</h1>
  <p class=""> {{ page.date | date: "%B %-d, %Y" }}</p>
  <p class="">
    {% if page.author %}
      {{ page.author }}
    {% endif %}
  </p>

  {{ content }}
</div>

The part with the loop will then be rendered to the following HTML:

<div>
    <img class="wi5" src="screenshot1.jpg">
    <img class="wi5" src="screenshot2.jpg">
</div>

Additional information: On my blog, I have two posts about building image galleries with Jekyll, without using plugins. Maybe this will help you:

- Generating an image gallery with Jekyll and Lightbox2

- Jekyll / Lightbox2 image gallery, another approach

The approach used in the second link is similar to the one that I just described here.

EDIT:

But I'm concerned with customizing it for different posts. One post may have a panorama, and another may have 10 images side-by-side. Thats why I liked the idea of having a div with classes I can control however I want...

If it's just about some CSS classes, you can do that with my approach as well.

Change the front-matter so that each image has an additional property, in this example I called it `class`:

---
layout: post
title: App Thing
images:
  - url: screenshot1.jpg
    class: wi5
  - url: screenshot2.jpg
    class: whatever
---

<-- the main content of the post -->
blah blah blah blah blah

Then, change the loop in the layout file like this:

{% if page.images %}
    <div>
    {% for image in page.images %}
        <img class="{{ image.class }}" src="{{ image.url }}">
    {% endfor %}
    </div>
{% endif %}

The generated HTML:

<div>
    <img class="wi5" src="screenshot1.jpg">
    <img class="whatever" src="screenshot2.jpg">
</div>

Does that help?

You can add more properties to each image if you need to do more stuff.

Problem

How can I specify two different renderables within the same post? Here's what I'm going for. I have a post with some screen shots and then the body of the post. ``` --- layout: post title: App Thing --- <-- some screen shots for the top--> <div> <img class="wi5" src=""> <img class="wi5" src=""> <img class="wi5" src=""> <img class="wi5" src=""> <img class="wi5" src=""> </div> <-- the main content of the post --> blah blah blah blah blah ``` I render it in the post layout which will render the title and the date. However, I want the screenshots to go above the time and date and the body of the post below: ``` --- layout: default --- {{ screenshots }} <div class="wi-100 mw65 center db ptl"> <h1 class="">{{ page.title }}</h1> <p class=""> {{ page.date | date: "%B %-d, %Y" }}</p> <p class=""> {% if page.author %} {{ page.author }} {% endif %} </p> {{ content }} </div> ``` Any ideas how to do this? I'm using Github Pages so I'm also limited to the plugins I can use...

Original source