Multiple contents per Jekyll layout

Question

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...

Acrobatic

Answer 1

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

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

1. 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
   

2. 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.

Sparry

Hmmm. I like this. 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... – Acrobatic

Answer 2

When the content in your content area has the same structure on every page you should define them as structured data like @christian-specht suggested. If you have several content areas in your page or post layout, that you want to contain any kind of generic html-content, you can define a specific page-variable for each content area and assign multiline html content to them.

In my case I was looking for a way to render individual content to the header section of my page layout and flow the regular content in the designated main content area.

---
layout: default
title: My page title
header_content: >-
    <img src="images/keyvisual.svg" class="key-visual" alt="alt text">
    <h1>
    <span class="main-cause">...</span>
    ...
    </h1>
    <p class="p-important--alternate">
    ...
    </p>
---
# regular content goes here

The corresponding tags in the layout file looked like this:

<body>
<header class="main-header content-flow">
    {{ page.header_content }}
</header>
<div class="content-flow">
    {{ content }}
</div>

Garpike