I've been playing around with Jekyll for a couple of days, I've got a working site, but on many pages I want to use templates/snippits/shortcuts to make it easy to re-use commonly-typed content.
In MediaWiki, this is what I would have done;
This is a test {{ iconSmileFace }}
Where {{ iconSmileFace }} obviously translates to something like <img src = "resources/images/smile.png" />
I've seen that Jekyll has includes, so I could do {{% include iconSmileFace.html %}} but this syntax seems kinda verbose, and maybe not quite the Jekyll-way of doing things. Is there another better way?
I would create a snippet to hold all of my icons whether they are images or svgs or font icons:
{% case include.icon %}
{% when 'smiley-face' %}
Smiley face
{% when 'heart' %}
Heart
{% when 'close' %}
X
{% when 'next' %}
>
{% endcase %}
Then include it where you need it {% include icon.html icon="smiley-face" %}
A good idea would be to define a liquid tag.
Create the _plugins directory and a file called smile.rb with this content:
module Jekyll
class RenderSmileTag < Liquid::Tag
def render(context)
'<img src = "resources/images/smile.png" />'
end
end
end
Liquid::Template.register_tag('smile', Jekyll::RenderSmileTag)
Then every time you want to render the image just use: {% smile %} and it will generate <img src="resources/images/smile.png" />
If your intent is to output image tags with the shortcut, there's another way with a GitHub Pages supported plugin:
(Though I haven't tested this myself)
From the plugin jemoji's documentation, you can serve custom emojis by pointing to a custom source in your _config.yml:
emoji
src: "/resources/images"
Then reference the emoji in your markdown document:
It's a beautiful day! :smile:
Related
Big thanks to anyone who looks at this! I think the question is straightforward. It is only long because I wanted to be very thorough/ well-documented. I have taken the following example code from the jekyll documentation and edited it only so that I can find it with a permalink:
---
food: Pizza
permalink: "/pizza"
---
<h1>{{ page.food }}</h1>
When I run jekyll serve, the variable is outputted as it should be, but it has no layout. When I try to add a layout that I wrote to the page, the variable no longer outputs, as seen here.
Ultimately, I want to write an archive page that loops through categories, exactly like this code in the documentation:
{% for category in site.categories %}
<h3>{{ category[0] }}</h3>
<ul>
{% for post in category[1] %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
{% endfor %}
But, because the liquid variables are not working, I cannot make the archive without either putting in in the _layouts directory or manually copy-pasting my layout to the archive page.
Sorry if I'm coming across as a jekyll newbie (I am) or if the answer is in the docs somewhere and I could not find it, but here are my questions:
Why is this behavior happening? Is it something about how jekyll works or is it my layout that is causing this?
What would be the best practice for writing the archive/ correcting this error?
The github repository for this entire project is here
It looks like you are using the wrong liquid tag for trying to get the content. When injecting the page content, use {{ content }} not {{ page.content }}. You can see an example in the docs.
Looking at your includes for post_body.html and body.html, you just need to fix the above and it should work.
I have a Jekyll setup that looks like this:
_config.yml
_records
a.html
b.html
c.html
...
I want to create a home page that links to each record. However, I want to render a.html and b.html to /records/, but I don't want to render c.html to /records/, as that HTML will be provided to my server from a different process altogether.
I tried setting the following in _config.yml:
exclude:
_records/c.html
But this also removes c.html from site.records, which is not what I want. The best solution I have right now is to prevent my deploy script from deploying _site/records/c.html, but I'd much rather prevent _site/records/c.html from being generated in the first place.
Is it possible to include c.html in site.records to create the links on the home page but not render /records/c.html? Any help others can offer with this question would be greatly appreciated!
Here's how I did this. Inside _records/c.html, set in the front matter:
permalink: '_'
route: /records/c.html
That will make it so that we render the page's html content to _site/_.html, a route that won't ever get visited.
Then in index.html to create the link to the route attribute of this page, use:
{% for record in site.records %}
{% if record.route %}
{% assign url = record.route %}
{% else %}
{% assign url = record.url %}
{% endif %}
<a href='{{ url }}'>{{ record.title }}</a>
{% endfor %}
I am extremely new to Jekyll/Ruby/Liquid and I would like to create a for loop to display an image for every different tag that I have. However I can't seem to get it to work. I think the problem is nesting the name of each tag inside asset_path and then modifying the name. It keeps throwing the error that I have not properly terminated the variable.
For example, if one of my tags was 'cloud', I would like the 'cloud_logo.png' image to be displayed from my asset directory. I am using the jekyll-assets plugin and am running it all locally through terminal.
{% for tag in site.tags %}
<img src="{% asset_path {{ tag | first }}_logo.png %}"></img>
{% endfor %}
I would be very grateful if anyone could help me with this, thanks in advance!
Thanks so much for your answer JootS! It helped me a lot, you were missing something though, for some reason {{ asset_path }} wasn't getting recognised, but when I replaced it with /assets/ it was a temporary hotfix as my html file is in the root directory. So the solution was:
{% for tag in site.tags %}
<img src="/assets/{{ tag | first }}_logo.png" />
{% endfor %}
This is correct liquid:
{% for tag in site.tags %}
<img src="{{ asset_path }}{{ tag | first }}_logo.png" />
{% endfor %}
Note that you should set your 'asset_path' in your '_config.yml' file like this (for future reference):
asset_path: '/assets/'
Happy Jekylling!
I have a Jekyll website and everything works fine, just it doesn't parse <h2> tags in markdown (I also tried putting the actual HTML and still doesn't work. Example: here or here. When I test it with a local server everything works though.
Source code for the /apps page:
---
layout: page
title: My Apps
---
Here's a list of all my published apps, sorted by platform.
[If you need Support and would like to open a ticket, please go to the Support page.](/support)
Most applications are available in English, Italian and Polish so far.
[Click here to take a look at the Patch Notes](/apps/patchnotes)
{% for member in site.data.apps %}
{% if member.link %}
##{% if member.fontAwesome %}{% for image in member.fontAwesome %}<i class="fa fa-{{ image }}"></i> {% endfor %}{% endif %}{{ member.name }}
<br><br>
{{ member.description }}
{% if member.bundleName %}Included in [{{ member.bundleName }}]({{bundleLink }}) bundle.{% endif %}
{% endif %}
{% endfor %}
[Source for app/patchnotes - Page Layout]
Try this:
## {% if member.fontAwesome %}
I just added a whitespace between ## and {℅
Let me know if it works, yeah?
Your Gemfile includes some dependencies like bourbon or time-to-read. Those are not supported plugins/gems (list of gh-pages supported gems/plugins).
If you leave only github-pages gem in your Gemfile and build or serve locally, it fails.
I think that Github pages is also failing but more gracefully.
If you want to work with "exotics" gems, you will have to generate locally and push the generates site on github.
How can I add multiple images on a page?
I want to have pages with 3-4 paragraphs and under the paragraphs I want to have multiple images like a small photo gallery, I found a extension for the images in bolt lib but it is more photographic oriented and I wander if it is possible to do it simpler then using the plugin... the curiosity is if boltcms can do this with default build.
In your contenttypes.yml setup file, add an imagelist to your fields, something like this:
gallery:
type: imagelist
label: "Gallery Images"
Then in your frontend template you print them out in the style that your gallery plugin needs, here's one that uses magnific as an example:
{% for image in record.gallery %}
<a href="{{ thumbnail(image, 1000, 1000) }}">
<i class="fi-arrows-expand hide"></i>
<img src="{{thumbnail(image,150,100)}}">
</a>
{% endfor %}
If you want to use the lightbox plugin that is included in the default Bolt theme, #Ross' for loop can be a little simpler:
{% for img in record.gallery %}
{{ popup(img, 150, 100) }}
{% endfor %}