Using variables in Jekylls Front Matter - jekyll

I have created a data file with images which I use normally for posts.
ImageKey:
- url: "/assets/logos/Image.png"
title: "Image Title"
Now I want to use this image paths in my post headers.
---
layout: page
image:
- site.data.images.ImageKey
---
And my HTML looks like
{% for image in page.images %}
<div>
<div class="img-thumbnail">
<img class="img-responsive" src="{{site.baseurl}}{{image.url}}" alt="{{image.title}}">
</div>
</div>
{% endfor %}
But anything is wrong here. There will no picture be rendered.
It works if I use values in the fronter matter directly.
---
layout: page
image:
- url: "..."
title: "..."
---

I have the problem / request solved.
My _data\images.yml looks like
Image_Key_Name
url: /assets/file.png
alt: ....
title: ....
copyright: ....
My _posts\postXYZ.md
---
layout: post
author: Ben
titleImages:
- Image_Key_ Name
- Another_Image_Key_Name
abc...
---
And my _layouts\post.html
now iterates over the keys and uses them as array index.
<div class="title-images">
{% for titleImageKey in page.titleImages %}
{% assign titleImage = site.data.images[titleImageKey] %}
<img src="{{site.baseurl}}{{titleImage.url}}" alt="{{titleImage.title}}" />
{% endfor %}
That's it!

Related

In Jekyll, how do I render custom metadata for a collection?

I have the following in my _config.yml file:
collections:
nr_qa:
output: true
permalink: /:collection/:name
title: 'Node-RED Questions and Answers'
descriptions: 'Node-RED is a flow-based (visual) programming tool. These pages have some information that may be currently missing from the documentaiton.'
github_pages:
title: 'GitHub Pages and Jekyll/Liquid'
description: 'Hints and tips on using Jekyll for publishing to GitHub Pages.'
output: true
permalink: /:collection/:name
and I want to create an automatic index for my collections. So I use code like this:
## {{ site.collections.github_pages.title }}
{{ site.collections.github_pages.description }}
<ul>
{% for item in site.github_pages %}
<li>
{{ item.title | replace:'_',' ' }}
<p>{% if item.description %}
{{ item.description }}
{% else %}
{{ item.excerpt | strip_html }}
{% endif %}</p>
</li>
{% endfor %}
</ul>
And yes, I know I've rather mixed up my markdown and html there. Not relevant to this question.
The problem is that {{ site.collections.github_pages.title }} and {{ site.collections.github_pages.description }} don't render anything even though I think they should.
Can anyone point out my mistake please?
The problem is that title and description should be included in each collection, and not in _config.yml.
Check out Accessing Collection AttributesPermalink for further details.
update
title can be present in each collection metadata in _config.yml. The problem is how you are accessing those variables.
One approach is to have a specific layout for each collection, then you can access them like:
{% assign col = site.collections | where: 'label','github_pages' | first%}.
TITLE: {{ col.title }}.
DESCRIPTION: {{ col.description }}.

I can't auto-include a piece of code on all post pages on Jekyll

I'm trying to auto-include a piece of code on all post pages on Jekyll.
For example, after the first <p></p> i want to {% include adsense.html %}.
You can use post excerpt
In _config.yml set excerpt_separator: <!--more-->
In a post you now have :
---
layout: post
title: "Welcome to Jekyll!"
date: 2015-03-07 18:19:51
---
page excerpt
<!--more-->
page content
[...]
And in your _layouts/post.html :
[...]
{{ page.excerpt }}
{% include adsense.html %}
{{ page.content }}
[...]

In jekyll, how to parse a variable as markdown instead of printing it as is?

Given the following file:
_data
slides.yml
which includes
- title: Slide one
desc: |
welcome to the slideshow
This is an open-source slideshow, built with [deck.js](https://github.com/imakewebthings/deck.js), GitHub and [Jekyll](http://jekyllrb.com).
- title: Slide two
desc: |
Second slide with bullet points
* Hello world
* This is a slideshow
In my index.html I have
{% for slide in site.data.slides %}
<section class="slide">
<h2>{{ slide.title }}</h2>
{{ slide.desc }}
</section>
{% endfor %}
How can I get Jekyll to interpret {{ slide.desc }} as markdown? Does something like this exist:
...
{{ slide.desc AS markdown }}
...
Thanks!
Albert
Found the answer!
...
{{ slide.desc | markdownify }}
...
Here is the reference.

jekyll: how do i split the content into two parts?

In my template I want to show a set of images in the middle of the content. So I'd imagine I need one part of the content then some images taken from the yaml, then the rest of the content meaning I'd have to split the content up into two parts.
How do I split the content up like this?
I had exactly the same problem, and I solved it without splitting the content.
I'll show the short version here, but there's a post with a more detailed explanation on my blog.
I'm using include files for the actual work of displaying the gallery:
First of all, I'm using Lightbox2 to display the images, so I need to load some JS and CSS files (and jQuery) first. I want to do this only on the pages where I actually need Lightbox2, so I'm putting it into an include file, not into the layout file:
/_includes/galheader.html :
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<link href="/css/lightbox.css" rel="stylesheet" />
Then, I need another include file that displays the actual gallery:
/_includes/gal.html :
{% for image in page.images %}
{% if include.image == null or include.image == image.name %}
<a href="{{ page.imgfolder }}/{{ image.name }}" data-lightbox="1" title="{{ image.text }}">
<img src="{{ page.imgfolder }}/{{ image.thumb }}" title="{{ image.text }}">
</a>
{% endif %}
{% endfor %}
Note that the {% if include.image == null or ... line allows me to use the include in two different ways:
Show all images:
{% include gal.html %}
Show a single image:
{% include gal.html image="image-1.jpg" %}
With those two includes, I can now do this:
---
layout: default
title: Gallery with text (version 1)
imgfolder: /img/demopage
images:
- name: image-1.jpg
thumb: thumb-1.jpg
text: The first image
- name: image-2.jpg
thumb: thumb-2.jpg
text: The second image
- name: image-3.jpg
thumb: thumb-3.jpg
text: The third image
---
{% include galheader.html %}
Some text here...and then, all the images in one single gallery:
{% include gal.html %}
...and more text after the gallery
The generated HTML:
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<p><link href="/css/lightbox.css" rel="stylesheet" /></p>
<p>Some text here...and then, all the images in one single gallery:</p>
<p><img src="/img/demopage/thumb-1.jpg" title="The first image"></p>
<p><img src="/img/demopage/thumb-2.jpg" title="The second image"></p>
<p><img src="/img/demopage/thumb-3.jpg" title="The third image"></p>
<p>...and more text after the gallery</p>
Or I can spread the images over the whole page:
---
layout: default
title: Gallery with text (version 2)
imgfolder: /img/demopage
images:
- name: image-4.jpg
thumb: thumb-4.jpg
text: The 4th image
- name: image-5.jpg
thumb: thumb-5.jpg
text: The 5th image
- name: image-6.jpg
thumb: thumb-6.jpg
text: The 6th image
---
{% include galheader.html %}
Some text here, then two images:
{% include gal.html image="image-4.jpg" %}
{% include gal.html image="image-5.jpg" %}
...and more text...
Even more text and the last image:
{% include gal.html image="image-6.jpg" %}
Some text at the end
The generated HTML:
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<p><link href="/css/lightbox.css" rel="stylesheet" /></p>
<p>Some text here, then two images:</p>
<p><img src="/img/demopage/thumb-4.jpg" title="The 4th image"></p>
<p><img src="/img/demopage/thumb-5.jpg" title="The 5th image"></p>
<p>...and more text...</p>
<p>Even more text and the last image:</p>
<p><img src="/img/demopage/thumb-6.jpg" title="The 6th image"></p>
<p>Some text at the end</p>

Setting active links in Jekyll not working

I am trying to simply style my active links in Jekyll but have been unsuccessful in getting them working.
Here is the site that I am trying to get them working on: http://concisecss.github.io/concise.css, which you can see the source code for here: https://github.com/ConciseCSS/concise.css/tree/gh-pages.
I am putting this YAML code in my _config.yml to define my top-level navigation:
# Main Navigation
nav:
- text: Welcome
url: /concise.css/
- text: Why Concise
url: /concise.css/why-concise/
- text: Get Started
url: /concise.css/get-started/
- text: Documentation
url: /concise.css/documentation/layout/container/
- text: Add-Ons
url: /concise.css/add-ons/
Then in my header.html include, which is where my navigation is, I have:
{% for link in site.nav %}
<li>
<a {% if link.url == page.url %}class="active"{% endif %} href="{{ link.url }}">{{ link.text }}</a>
</li>
{% endfor %}
However, whenever I am on one of those navigation links, the active class is not added (the link should be pinkish when you are on it.
Everything else is working fine, so I'm assuming it might just be a small issue I'm running into.
Edit: Here is what the front-matter on one of my pages looks like:
---
layout: why-concise
title: Why Concise
permalink: /why-concise/
---
I just did the same thing in my blog project which is not alive yet to show you, but it works like this:
1. create a data file nav.yml file and write your nav text and URLs within a folder _data.
nav.yml
- text: Welcome
url: /concise.css/
- text: Why Concise
url: /concise.css/why-concise/
- text: Get Started
url: /concise.css/get-started/
- text: Documentation
url: /concise.css/documentation/layout/container/
- text: Add-Ons
url: /concise.css/add-ons/
2. In your html page you're going to create a loop through your data menu list from yml file.
{% for nav in site.data.nav %}
<li{% if nav.url == page.url %} class="active"{% endif %}>{{ nav.text }}</li>
{% endfor %}
Just remember to make sure your permalink is the same written in your nav.yml if you have set url:/concise.css/why-concise/ in your nav.yml so your permalink should be the same in the front-matter.
---
layout: why-concise
title: Why Concise
permalink: /concise.css/why-concise/
---
UPDATE:
#Keenan here is an example http://adrianorosa.com, that I told you before.
The source can be found at https://github.com/adrianorsouza/adrianorosa.com