I've got a design for my post page that is made up of text and images, more specifically, galleries. Take a look at the illustration below:
I've got these galleries set up my front matter like so:
---
gallery-1:
rows:
- images:
- { url: '1.jpg'}
- images:
- { url: '2.jpg'}
- { url: '3.jpg'}
gallery-2:
rows:
- images:
- { url: '4.jpg'}
- { url: '5.jpg'}
---
Is there a way to print these galleries to the page on my .md file. I know the code below won't work, but something similar?
This is my markdown
[gallery-1]
This is more markdown
[gallery-2]
Is something like this possible with Jekyll?
Any help with this is appreciated. Thanks in advance!
First, let's simplify your yaml front matter :
---
galleries:
# gallery number one
1:
# row one in gallery one
-
- { url: '1.jpg', alt: 'alt 1'}
# row two in gallery one
-
- { url: '2.jpg', alt: 'alt 2'}
- { url: '3.jpg', alt: 'alt 3'}
# gallery number two
2:
# row one in gallery two
-
- { url: '4.jpg', alt: 'alt 4'}
- { url: '5.jpg', alt: 'alt 5'}
other front matter like title, ...
---
Your .md file :
Markdown
{% include gallery.html gallery=1 %}
Other markdown
{% include gallery.html gallery=2 %}
And then the _includes/gallery.html file :
{% comment %}-----------------
- This page receives a gallery index (include.gallery)
- It then assign the gallery[include.gallery] to the rows variable
%}-----------------{% endcomment %}
{% assign rows = page.galleries[include.gallery] %}
{% comment %}%}-----------------
We now loop over rows
%}-----------------{% endcomment %}
{% for row in rows %}
<div class="row">
{% comment %}%}-----------------
and then loop over images in row
%}-----------------{% endcomment %}
{% for img in row %}
<p>src="{{ site.baseurl }}{{ img.url }}" alt="{{ img.alt }}"</p>
{% endfor %}
</div>
{% endfor %}
See yaml documentation And Jekyll template documentation
Related
On my website, I want to show a list of collection items on pages corresponding to each collection. For example on the Games page, I want to show a list of all game related articles, on the Politics page, I want to show a list of all politics related articles, etc.
What I have right now is one Nunjucks template file for each such page, which I don't particularly like since they are the same except for the collection to show. Here is two of my templates, for my politics articles and for my games articles, where I extend a common boilerplate (base.njk) and in the main block, I first print some Markdown content and then comes the list of collection items:
{# politics.njk #}
{% extends "base.njk" %}
{% block main %}
<main>
{{ content | safe }}
<ul class="postlist no-bullets">
{% for item in collections.politics %}
{% include "partials/collection-list-item.njk" %}
{% endfor %}
</ul>
</main>
{% endblock %}
{# games.njk #}
{% extends "base.njk" %}
{% block main %}
<main>
{{ content | safe }}
<ul class="postlist no-bullets">
{% for item in collections.games %}
{% include "partials/collection-list-item.njk" %}
{% endfor %}
</ul>
</main>
{% endblock %}
As you can see, the only difference between these two files is collections.politics and collections.games. I would want to use one template, and in the frontmatter specify which collection I want. Since I'm already having one Markdown file per page the template used (for writing stuff before I begin listing articles), it would have been nice if it was possible. For example:
<!-- politics.md -->
---
layout: articles-list.njk
title: Politics
listCollection: collections.politics
---
# Politics
Below is a list of all politics articles I've written.
<!-- games.md -->
---
layout: articles-list.njk
title: Games
listCollection: collections.games
---
# Games
I think about games a lot. Below is a list of articles I've written on the topic.
{# articles-list.njk #}
{% extends "base.njk" %}
{% block main %}
<main>
{{ content | safe }}
<ul class="postlist no-bullets">
{% for item in listCollection %}
{% include "partials/collection-list-item.njk" %}
{% endfor %}
</ul>
</main>
{% endblock %}
Is it possible to do what I want to do in some other way than to have multiple template files?
You might be able to get to the collection using computed data, though I'm not sure if you have access to the collections there.
A simpler approach: Set your frontmatter field to the name of the colletion you want to display as a string, then use that to get the collection in the template:
<!-- politics.md -->
---
layout: articles-list.njk
title: Politics
listCollection: 'politics'
---
{# articles-list.njk #}
{% extends "base.njk" %}
{% block main %}
<main>
{{ content | safe }}
<ul class="postlist no-bullets">
{% for item in collections[listCollection] %}
{% include "partials/collection-list-item.njk" %}
{% endfor %}
</ul>
</main>
{% endblock %}
The way I handled this on my blog (https://github.com/cfjedimaster/raymondcamden2020) was like so:
I create a collection of my categories. I do this by using .eleventy.js and eleventyConfig.addCollection. I use some JavaScript to get all of my posts, iterate over each ones list of categories, and creating a unique list. At the end, I've got a collection called categories.
eleventyConfig.addCollection("categories", collection => {
let cats = new Set();
let posts = collection.getFilteredByGlob("_posts/**/*.md");
for(let i=0;i<posts.length;i++) {
for(let x=0;x<posts[i].data.categories.length;x++) {
cats.add(posts[i].data.categories[x].toLowerCase());
}
}
return Array.from(cats).sort();
});
I then made one page, categories.liquid, that is reponsible for generating my category pages. It's rather simple:
---
pagination:
data: collections.categories
size: 1
alias: cat
permalink: "categories/{{ cat | myEscape }}/"
layout: category
renderData:
title: "{{ cat }}"
---
Notice I use cat for each item in the category and notice I've got nothing else in here. All the layout is done in the category layout page.
Here's the top portion of my category page:
---
layout: default
---
{% assign posts = collections.posts | getByCategory: cat %}
So given I've got a collection of posts where each post has N categories assigned to it, I wrote a custom filter that just reduces this down to a post that has cat as one of it's categories.
S the end result is N category pages filled posts assigned to that category.
I have a YAML array in a file called navigation.yml as follows:
docs:
- title: Home
url: index.md
id: index
- title: Support
url: support.html
id: support
- title: About
url: about.md
id: about
I am creating a navigation bar as follows:
<section id="navigation" class="clearfix">
{% for item in site.data.navigation.docs %}
<span>{{ item.title }}</span>
{% endfor %}
</section>
What should I put in place of index.md to get the item.url that I want from the YAML file.
I am totally new to GitHub Pages, YAML, and Jekyll.
At the moment, the link tag doesn't seem to support variables.
There's a pull request trying to change this, but it has not been merged into the main Jekyll repo yet.
So if you want to do this now, you need to use some tricks.
The solution suggested by flyx in his comment (replace {% link index.md %} by {{ item.url }}) basically works, but shows the original filename written in the data file.
⇒ If index.md is automatically renamed to index.html while rendering the site, your link won't work anymore.
(or if support.html becomes support/index.html)
That's probably why you wanted to use the link tag instead.
Without using the link tag, you need to loop your data file, loop through all pages to find the respective page, and show that page's actual URL in your link:
<section id="navigation" class="clearfix">
{% for item in site.data.navigation.docs %}
{% for page in site.pages %}
{% if page.path == item.url %}
<span>{{ item.title }}</span>
{% endif %}
{% endfor %}
{% endfor %}
</section>
This even takes stuff like explicitly set permalinks (permalink: /whatever/ in the page's front matter) into account.
I have a YAML file in my _data folder that contains a list of links I have in my main nav.
_data/nav.yml:
main:
- title: Link A
- url: "/path/to/linkA"
- title: Link B
- url: "/path/to/linkB"
- title: Link C
- url: "#"
I then use liquid to dynamically generate the links. Here's the relevant portion of my header file.
_includes/header.html:
<nav class="quick-links">
{% for item in site.data.nav.main %}
{{ item.title }}
{% if forloop.last == false %} :: {% endif %}
{% endfor %}
</nav>
The nav outputs as:
Link A :: Link B :: Link C
I'd like the output to look like the following
Link A :: Link B
since Link C is a placeholder.
How can I dynamically hide placeholder links, i.e. links with "#" as the href?
First you need to group correctly nav items in yaml file as:
main:
-
title: Link A
url: "/path/to/linkA"
-
title: Link B
url: "/path/to/linkB"
-
title: Link C
url: "#"
Then you can avoid the link c using the unless tag:
<nav class="quick-links">
{% for item in site.data.nav.main %}
{% unless item.url contains "#" %}
<a href="{{ item.url }}">
{{ item.title }}
</a>
{% if forloop.last == false %} :: {% endif %}
{% endunless%}
{% endfor %}
</nav>
I have an Octopress webpage in place and I want to block certain posts (some that only my family should be able to see) using a password (or something else) that I disseminate through email.
What's the best way to achieve this and also ensure that the posts don't show up in the archive?
For family posts you could put them in a separate directory and use .htaccess to password protect that directory.
For them not to show up in archives you would need to edit the theme.
The following is based on the classic theme:
Edit archives/index.html
---
layout: page
title: Blog Archive
footer: false
---
<div id="blog-archives">
{% for post in site.posts reverse %}
{% if post.categories contains 'noarchive' %}
{% else %}
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% unless year == this_year %}
{% assign year = this_year %}
<h2>{{ year }}</h2>
{% endunless %}
<article>
{% include archive_post.html %}
</article>
{% endif %}
{% endfor %}
</div>
In the posts you don't want to show up in the archive the yaml section would look something like this:
---
layout: post
title: "Welcome"
date: 2013-02-07 00:00
comments: true
categories:
- site
- noarchive
---
In my Jekyll blog, I would like some posts not to have a title. How could I modify the Jekyll codebase to make it so that posts do not require a title?
You don't need to alter the jekyll codebase to remove titles. That can be done using different layouts with appropriate liquid filters and tags.
For individual post pages, simply make a new layout file (e.g. "_layouts/no-title-post.html") that doesn't have the {{ page.title }} liquid tag. In your _posts source file, set the YAML front matter to call it. For example:
---
layout: no-title-post
---
Note here that "title:" isn't required in the YAML front matter. If jekyll needs it, the value will be automatically crated from the filename. For example, "_posts/2012-04-29-a-new-post.md" would have its title variable set to "A New Post" automatically. If your templates don't call the title tags, it won't matter. You could include a "title:" in the front matter and it simply wouldn't be displayed.
You can also display the page without the title in your listing/index pages. Check the posts layout to determine if the title should be displayed. For example, to show titles on all your pages except ones that have the 'no-title-post' layout, you would do something like this:
{% for post in paginator.posts %}
{% if post.layout != 'no-title-post' %}
<h1>{{ post.title }}</h1>
{% endif %}
<div class="postContent">
{{ post.content }}
</div>
{% endfor %}
In that case, the link to the page itself is also removed. If the page needs to be addressable, you would have to add the link back in somewhere else.
edemundo's solution doesn't work anymore in all cases with Jekyll 3.
I use an empty title as default:
defaults:
-
scope:
type: "posts"
values:
layout: "post"
title: ""
Then you can compare titles against the empty string in your layouts, for example:
{% if post.title == "" %}
{{ post.content | strip_html | truncatewords:5 }}
{% else %}
{{ post.title }}
{% endif %}
If you like the automatic title generation you can use as frontmatter:
---
title: ""
---
I was having the same doubt, then I stumbled on this really simple solution:
{% if post.title %}
<h1>{{ post.title }}</h1>
{% endif %}
And then in the post file itself you would leave the title variable empty:
---
layout: post
title:
---
This way, the h1 will not print if the title is empty. I found this method particularly useful for post types like quotes, which most of the time doesn't have titles.