I'm sure this is simple but cant find the answer.
There is a standard Jekyll/Liquid post iterator. How do i use the {% if %} statement below to put the <hr> element for each post except the last?
<ul class="post-list">
{% for post in site.posts %}
{% if post.url %}
<br>
<li>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
</li>
**** {% if post != $last %} ***** How do i do this??
<hr>
{% endif %}
{% endif %}
{% endfor %}
</ul>
Yep, there's an easy solution for this.
Liquid has the forloop object, which can be used inside a loop to access some of its properties.
One of those properties is forloop.last:
Returns true if it's the last iteration of the for loop. Returns false if it is not the last iteration.
In other words, you can just do this:
{% if forloop.last == false %}
<hr>
{% endif %}
Related
In the following code, I have a category by the name "ml" defined in my yml file frontmatter. For some reason, the {% unless cat == "ml" %} is not working properly. See this html, and the output image below. Clearly, the category is ml (I have tried to remove any whitespace with the strip filter, which did not work), but it is not working (the unless statement, that is).
Please help!
<div class="posts">
<h1>Recent Posts: </h1>
{% for post in paginator.posts %}
{% assign cat = post.categories %}
{% unless cat == "ml" %}
<div class="post">
<h1 class="post-title">
<a href="{{ post.url }}">
{{ post.title }}: {{ cat }}
</a>
{% if post.image %}
<img src={{post.image}}>
{% endif %}
</h1>
<span class="post-date">{{ post.date | date_to_string }}</span>
</div>
{% endunless %}
{% endfor %}
</div>
I still am not completely sure on the why here, but I found that using contains rather than == solved my issue.
I'm trying to filter results of the loop based on hashtags included in titles. If done manually it works perfectly:
<article class="post-preview">
<a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
{% if post.title contains "#hashtag" %}
<br>
<div class="float-left">
{% include read-time.html %}
</div>
<h2 class="post-title">{{ post.title }}</h2>
{% if post.subtitle %}
<h3 class="post-subtitle">{{ post.subtitle }}</h3>
{% else %}
<h3 class="post-subtitle">{{ post.excerpt | strip_html | truncatewords: 15 }}</h3>
{% endif %}
</a>
<p class="post-meta float-right">Posted by
{% if post.author %}
{{ post.author }}
{% else %}
{{ site.author }}
{% endif %}
on {{ post.date | date: '%B %d, %Y' }}</p><br>
{% endif %}
</article>
what I'd like to achieve is to be able to use variable instead of string:
e.g.
{% if post.title contains "{{ content }}" %} - (this way it doesn't work)
instead of
{% if post.title contains "#hashtag" %}
Is there a way to pass variable to post.title contains, or any other way to achieve my goal i.e. filtering results of for loop based on the hashtag in the title ?
Simply write the variable name after contains. Example:
{% assign a = "Sample text" %}
{% assign b = "text" %}
{% if a contains b %}
Variable 'a' contains the value of variable 'b'! :)
{% endif %}
In your case, a will be post.title and b will be content.
I've got the following code in my index.html for Jekyll. I'm trying to find a way to link the categories associated with each post to the actual post themselves. So, if a post contains the category "travel" I want to click on a link that says "travel" which will bring me to all posts categorized as such.
<ul class="post-list" style="list-style-type: none;">
{% for post in paginator.posts %}
{% unless post.categories contains 'portfolio' %}
<li>
<h3>{{ post.title }}</h3>
<span class="post-meta">{{ post.date | date: "%c" }}</span>
Filed In:
{% unless p.categories == empty %}
{% for categories in post.categories %}
{{ categories }} //problem area
{% endfor %}
{% endunless %}
{{ post.excerpt }} Find out more...<br><br>
</li>
{% endunless %}
{% endfor %}
</ul>
Figured it out. For anyone else wondering how to do the same, first setup a categories.html page in your root directory. This page will list all posts that meet a specific category. It does by turning the category names into named anchor slugs as such <a href="#{{ category | first | remove:' ' }}" and then the preceding code creates the actual named anchor div which displays the post associated with that category. Finally, under the page or section where you want to display the list of categories, you present the final bit of code which links to the named anchor section in your categories.html page.
First piece of code to go into Categories.html:
<h2>Posts by Category</h2>
<ul>
{% for category in site.categories %}
<li><strong>{{ category | first }}</strong></li>
{% if forloop.last %}
{% else %}
{% endif %}
{% endfor %}
</ul>
Second piece of code to go into Categories.html:
{% for category in site.categories %}
<div class="catbloc" id="{{ category | first | remove:' ' }}">
<h2>{{ category | first }}</h2>
<ul>
{% for posts in category %}
{% for post in posts %}
{% if post.url %}
<li>
<a href="{{ post.url }}">
<time>{{ post.date | date: "%B %d, %Y" }}</time> -
{{ post.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
{% endfor %}
Third piece of code to go where you want to display your named anchor linked categories:
Filed In:
{% unless p.categories == empty %}
{% for categories in post.categories %}
{{ categories }}
{% endfor %}
{% endunless %}
Use the following CSS to prevent the sections from displaying prematurely before you click on them:
.catbloc:not(:target){
display: none;
}
Hope this helps!
In my index of blog posts I'd like to grab the first image from the post to display it in the index using just liquid so it works on github pages.
I have a feeling split is the way to go, but I'm not good with liquid.
I'd like to be able to get the image url and put it in a variable to style it.
The ideal solution would be something like:
{% for post in site.posts %}
<li>
{{post.content | first_image}}
</li>
{% endfor %}
Any ideas?
You can define a custom variable to your Front Matter called "image", so it's going to work like Wordpress's posts Featured Image:
---
image: featured-image.jpg
---
Note to remember where is your image saved. In my case, I created a directory called "imagens" (PT-BR here). Then, go to your index.html and add the image to your template, wherever you want. In my site it looks like this:
<ul class="post-list">
{% for post in site.posts %}
<li>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }},</span>
<span class="post-meta">por</span>
<span class="post-meta">{{ post.author }}</span>
</li>
//IMAGE
<img src="{{ site.baseurl }}/imagens/{{ post.image }}">
//IMAGE
{{ post.excerpt }}
<a class="btn btn-default" href="{{ post.url | prepend: site.baseurl }}">Continuar lendo</a>
{% endfor %}
</ul>
That's it.
Some solutions to your problem :
1 - Use the Post Excerpt tag Documentation is here
Your post :
---
layout: post
title: Testing images
---
## Title
Intro Text
More intro text
Some more text blah !
Your template :
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
As your image tag appears before the excerpt_separator (\n\n = two newlines) it will be in the post excerpt.
2 - Use your post's Yaml front matter to store your image's datas
Post :
---
layout: post
title: Testing images
images:
- url: /assets/img/cypripedium-calceolum.jpg
alt: Cypripedium Calceolum
title: Cypripedium Calceolum
- url: /assets/img/hello-bumblebee.jpg
alt: Hello bumblebee !
title: Hello bumblebee !
---
Intro here yo ! <-- THIS IS THE EXCERPT
Post body begin, and first image not in excerpt
{% assign image = page.images[0] %} <-- first element of the array is zero
{% include image.html image=image %}
Some more text blah !
{% assign image = page.images[1] %}
{% include image.html image=image %}
_includes/image.html (centralized in an include for standardization, but can be in the template) :
<img src="{{ site.baseurl }}{{ include.image.url }}" alt="{{ include.image.alt }}" title="{{ include.image.title }}">
The index page :
<ul class="posts">
{% for post in site.posts %}
<li>
<span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
{{ post.excerpt }}
{% assign image = post.images[0] %}
{% include image.html image=image %}
</li>
{% endfor %}
</ul>
Got it to work. Not sure how it will scale, but this liquid code loops through all the posts and grabs the source for the first image from a post and displays that post. I tested it with multiple images and it works as expected.
<ul>
{% for post in site.posts %}
<li>
{% assign foundImage = 0 %}
{% assign images = post.content | split:"<img " %}
{% for image in images %}
{% if image contains 'src' %}
{% if foundImage == 0 %}
{% assign html = image | split:"/>" | first %}
<img {{ html }} />
{% assign foundImage = 1 %}
{% endif %}
{% endif %}
{% endfor %}
{{ post.title }}
</li>
{% endfor %}
</ul>
If you just need the image URL instead of the whole thing in img tag, you can use the following method.
Install Liquid filter match_regex:
gem install match_regex
Then add it to your Jekyll config:
plugins:
- match_regex
Create a capture snippet in your template:
{% capture post_first_image %}
{% assign hero_image = page.content | match_regex: '<img .*?src="([^"]+)"' %}
{% if hero_image == nil %}
{% assign hero_image = "/placeholder-image.png" | prepend: site_base %}
{% endif %}
{{ hero_image }}
{% endcapture %}
Template:
<meta property="og:image" content="{{ post_first_image | strip }}">
You can simply remove the if condition if you don't need placeholder image.
I've taken David's answer and found a way to get just the src attribute from the img tag.
{% assign foundImage = 0 %}
{% assign images = post.content | split:"<img " %}
{% for image in images %}
{% if image contains 'src' %}
{% if foundImage == 0 %}
{% assign html = image | split:"/>" | first %}
{% assign tags = html | split:" " %}
{% for tag in tags %}
{% if tag contains 'src' %}
<img {{ tag }} />
{% endif %}
{% endfor %}
{% assign foundImage = 1 %}
{% endif %}
{% endif %}
{% endfor %}
This is my markup for the list view of posts:
<ul class="eventlist">
{% for post in site.posts reversed %}
<li class="eventlist-element">
{% if post.href %}
<a class="eventlist-element__link" href="{{ post.href }}">
{% else %}
<a class="eventlist-element__link" href="{{ post.url | prepend: site.baseurl }}">
{% endif %}
<time datetime="{{ post.date | date: "%Y-%m-%d" }}"class="eventlist-element__date">
<span class="eventlist-element__date-day">{{ post.date | date: "%d" }}</span>
<span class="eventlist-element__date-day-name">{{ post.date | date: "%a" }}</span>
</time>
<div class="eventlist-elemnt-infowrap">
<span class="eventlist-element__title">{{ post.title }}</span>
<span class="eventlist-element__venue">{{ post.venue }}</span><span class="eventlist-element__time">{{ post.time }}</span><span class="eventlist-element__ticket">{{ post.ticket }}</span>
</div>
<span class="eventlist-element__bullets"></span>
</a>
</li>
{% endfor %}
</ul>
I want to iterate over all posts and want to compare the post.date. If we have let's say 3 posts on the same day I want markup a for post 1 and for post 2 and 3 markup b. I've tried a few things but nothing worked so far.
Try something along these lines:
{% assign previousDate = site.date %}
{% for post in site.posts %}
{% if post.date == previousDate %}
// some other class
{% endif %}
{% assign previousDate = post.date %}
{% endfor %}
Basically you assign the date of the previous post to some variable and compare it with the current posts date. If they are the same you apply a different style. Not sure if you can use date as is, does it also contain hours, minutes,..? If so you will want to filter it to get out only the year, month, day.
Some code :
{% assign defaultStyle = 'defaultStyle' %}
{% assign alternateStyle = 'alternateStyle' %}
{% assign counter = 1 %}
{% for post in site.posts %}
{% if previousPostDate %}
{% if previousPostDate == post.date %}
{% capture counter %}{{ counter | plus: 1 }}{% endcapture %}
{% else %}
{% assign counter = 1 %}
{% endif %}
{% endif %}
{% if counter | to_number > 1 %}
{% assign defaultStyle = alternateStyle %}
{% endif %}
<div class="{{ defaultStyle }}">
<h3>{{ post.title }}</h3>
<p>{{ post.date }}</p>
</div>
{% assign previousPostDate = post.date %}
{% endfor %}
The code implements :
If I'm not the first post in a date group my style is different.
Your logic was
If I'm not the first post in a date group of three posts (or more) my style is different.
The part date group of three posts or more implies that you already know how many "same date posts" you have and makes the code more complex.