I have this Liquid template which looks like this:
# /_includes/slideshow.html
{% for image in {{ include.images }} %}
...
{% endfor %}
which I'm trying to use with a YAML file (for my Jekyll site) like this:
# /index.md
{% include slideshow.html images='site.data.homepage_images' %}
The reason I see this failing is because my include variable {{ include.images }} resolves to a string within the for loop. Is there a different way to accomplish this? I'm still rather new to Liquid, YAML, Jekyll, and well, web development altogether, so any help in doing this is much appreciated!
(Note: the problem goes away if I replace {{ include.images }} with site.data.homepage_images.)
Additionally, the reason why I'm doing this (and why that crude fix isn't the solution I'm looking for) is for the ability to inject my image slideshow elsewhere around my site. It'd save a lot of code to abuse my include variable in this way.
Correct syntax in for loop is : {% for image in include.images %}
Related
I'd like to create something like a shortcode for a blockquote in Jekyll. It should include the quote source in a nicely formatted way.
The shortcode could look like this:
{% quote author="My Author" %}
This is the quoted content
spanning multiple lines
And paragraphs
{% endquote %}
What's the best way to achieve this in Jekyll? Can it be that there is no way to provide multiple arguments to a Jekyll tag plugin?
I have found a blog post that provides multiple attributes using string concatenation or JSON.
My Research
I have found two systems in Jekyll that can be used similar to shortcodes:
HTML Includes
Custom Tags
To summarize, both methods only provide a single attribute to the Ruby code, the content. Below, you will find the limitations of both solutions.
HTML Includes limiations
https://jekyllrb.com/docs/includes/
An include in use looks like this:
{% include note.html content=download_note %}
It is possible to use content from captures for parameters, so we could create the following include file:
<blockquote>
{{ include.quote | markdownify }}
<p><em>{{ include.author }}</em></p>
</blockquote>
And use it in a blog post like this:
{% capture quote %}
This is the quote content
spanning multiple lines
And paragraphs
{% endcapture %}
{% include quote.html quote=quote author="My Author" %}
It works, but in my opinion, it's not really a nice approach to use when writing blog posts.
Custom Tags limiations
https://jekyllrb.com/docs/plugins/tags/
Sounds promising, but the documentation only shows two ways to use them:
{% render_time page rendered at: %}
and
{% render_time %}
page rendered at:
{% endrender_time %}
Hi I'm new to Jekyll and have a basic blog set up. Now my idea is to loop through a collection per blog post to get some fancy HTML going on. Because as far as I'm aware you can't simply add HTML to the markdown.
// config.yml
collections:
- hollowknight
So I've set up a collection named hollowknight and I got a blog post about Hollow Knight.
In the Front Matter of the blog post I have collectionid: 'hollowknight'. And in the Layout I use for blog posts I tried the following:
// post.html
{% capture collection %}site.{{ page.collectionid }}{% endcapture %}
{% for section in collection %}
{{ section.title }}
{% endfor %}
So the idea was to set the collection variable to site.hollowknight as configured in the config and the Front Matter. I set up a single article inside the collection, but it isn't showing up.
Is there any way to realise this?
Edit: https://talk.jekyllrb.com/t/list-collection-with-name-from-front-matter/3619/6
Or is there a way to use paragraphs in the Front Matter, because then I could just use arrays and objects in the Front Matter of the posts to do my magic?
Edit: https://github.com/jekyll/jekyll/issues/246#issuecomment-1639375
Or am I just stretching to far from what Jekyll is supposed to be?
Edit
So I found out I was getting the collection the wrong way, https://talk.jekyllrb.com/t/list-collection-with-name-from-front-matter/3619/6.
{% for section in site.[page.collectionid] %}
{{ section.content | textilize }}
{% endfor %}
The only weird part is, everywhere I see | textilize being used but can't get it to work.
This is the final solutions:
{% for section in site.[page.collectionid] %}
{{ section.content | markdownify }}
{% endfor %}
It's markdownify instead of textilize.
Also I ended up using a Front Matter array with objects to loop through instead of a collection to keep it more organized.
My Jekyll website has two kinds of content: personal, and professional.
I would like to emphasize which kind of content a visitor is currently reading with dynamic CSS classes:
If the visitor is on a page tagged as "personal", my <main> element's class should be "personal-content".
If the visitor is on a page tagged as "professional", my <main> element's class should be "professional-content".
Otherwise, the class should be "site-content".
In the front-matter of each page, I'm creating an output statement that I set either at "personal" or "professional", for example:
---
content: "personal"
----
Then I'm using this output statement in my tag like this: (indented for reading purposes)
<main
{% if page.content %}
class="{{ page.content }}-content"
{% else %}
class="site-content"
{% endif %}
>
However I'm only seeing styling from my site-content class. What did I do wrong?
Thanks to the comments above, I fixed it!
The problem was that I was not using a custom output statement as I thought I was: {{ content }} is already used by Jekyll to include markdown articles into HTML layouts.
So I switched {{ page.content }} to {{ page.contenttype }} and it works fine!
Caveat:
I also had to change the values I was giving my output statement. professional was working fine, but for some reason personal was returning nil. So I simply switched them for pro and perso and voilà.
I'm working on a personal Django project where my plan is to make some sort of function in my site in form of a CSS Marquee (scrolling text).
I was able to make a marquee.html file with the code from here, and use it on several pages on my site using {% include "marquee.html" %} blocks, but the displayed string in the marquee is within the HTML file itself (marquee.html) between <p>-tags
Is there any way to send a variable/string along with a {%include "" %} block that replaces/adds to the <p> tags at the end of the marquee code?
(e.g. {% include "marquee.html" {{ stringToDisplay }} %} )
The current context is available for the included template. You can use the "with" option to send any additional context.
{% include "marquee.html" with message="Hello" %}
and in your marquee.html template
<div>{{ message }}</div>
The include documentation is here
I use GitHub Pages for my blog, and am running into a problem with Jekyll. My post.html has a block like this:
{% for testpost in site.posts %}
{% four %}
{% lines of %}
{% processing %}
{% goes here %}
{% endfor %}
The part in the middle doesn't matter. The important part is the end of the line which is outside of the {% %} markup, and is therefore rendered into the html. Since this is in a loop, it's putting about 1000 blank lines into the middle of by HTML page. It doesn't affect the display, but it make a View/Source troublesome.
Any ideas on how to avoid those extra blank lines?
Since Liquid v4 (included in Jekyll from v3.5) there is a Whitespace control, which finally resolved case with blank line, white space, etc.
Link to documentation: https://shopify.github.io/liquid/basics/whitespace/
There's a nice workaround, that I found out in https://github.com/plusjade/jekyll-bootstrap/blob/master/_includes/JB/setup, and which is compatible with github pages.
Just enclose your loop in a capture statement, and assign nil to the resulting var.
{% capture cache %}
{% for p in site.posts %}
do stuff here
{% endfor %}
{% endcapture %}{% assign cache = nil %}
How about
{{ page.content | escape | strip_newlines }}
There is Jekyll plugin that strips the whitespace.
Jekyll plugins by Aucor: Plugins for eg. trimming unwanted
newlines/whitespace and sorting pages by weight attribute.
You can get it directly from its Github repository. So basically you wrap your code with {% strip %}{% endstrip %}. Even if this doesn't suit you needs, you can easily change the ruby script.
For example:
{% strip %}
{% for testpost in site.posts %}
{% four %}
{% lines of %}
{% processing %}
{% goes here %}
{% endfor %}
{% endstrip %}
However, please remember the nature of Jekyll plugins, you can't run them on the Github Pages server.
Quote from Jekyll Doccumentation:
GitHub Pages is powered by Jekyll, however all Pages sites are generated using the --safe option to disable custom plugins for security reasons. Unfortunately, this means your plugins won’t work if you’re deploying to GitHub Pages.
You can still use GitHub Pages to publish your site, but you'll need to convert the site locally and push the generated static files to your GitHub repository instead of the Jekyll source files.
Actually there is a new solution for this problem which works without any plugin.
A Jekyll layout that compresses HTML. At a glance:
removes unnecessary whitespace;
removes optional end tags;
removes optional start tags;
removes comments;
preserves whitespace within <pre>;
GitHub Pages compatible;
ignores development environments;
configurable affected elements;
profile mode;
automatically tested.
http://jch.penibelst.de/
If you - for some reason - do not want to use this here is a nice article, which describes some workarounds:
Compressing Liquid generated code - sylvain durand