Custom Shortcode (Include, Tag) in Jekyll with Parameters and Multiline Text - jekyll

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 %}

Related

how do I fix the twig filter from affecting html tags inside?

I'm learning Drupal8 and Twig with Chaz Chumley's book 'Drupal 8 Theming with Twig'.
When I put in the code provided I don't get the desired result. (Chapter 3, Filters)
The book says to add the following to the page.html.twig file:
{% filter upper %}
<p>{{ name }} is the best cms around.</p>
{% endfilter %}
but the page outputs
<P>DRUPAL IS THE BEST CMS AROUND.</P>
(Showing the html tags on the page as shown here)
Is there something I'm missing to have the twig filter not change the HTML tags? or is the only solution to put the filter inside the tag? but this filter is supposed to "wrap sections of HTML and variables" so why is it affecting HTML tags?
You can put the filter around just the text, so it ends up as:
<p>{% filter upper %}{{ name }} is the best cms around.{% endfilter %}</p>
You can test your twig code here: https://twig.stapps.io/
Can you give this a try:
<p>{{ 'your text'|upper }}</p>
Also, check out https://drupal.stackexchange.com/ if you have any more drupal related questions.

Jeykyll, what is the difference between {%- do-someting -%} and {% do-someting %}?

In the Jeykll in documentation to Liquid I found the notation {% … %} but in some plugins or example code snippets I saw also {%- … -%} (with a dash after and before percentage symbol). What is the right usage?
a) {%- include header.html -%}
b) {% include header.html %}
Or is it even dependent from the command / option / function which I am using inside the block?
The dashes give you the ability to control the whitespace around your tags. This often isn’t necessary for HTML generation, but can come in handy for certain uses in pre-formatted text. Or, if you are just picky about what your final HTML looks like ;)
Check out the docs here: https://shopify.github.io/liquid/basics/whitespace/

How to use Liquid include variable within a for loop?

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 %}

Send variable along within include block

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

How to suppress blank line in Jekyll?

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