Combining Jekyll post data with data from YAML to make a new blog feed - jekyll

I think I'm not even sure what I should be searching for. On my Jekyll Blog I currently have just blog posts that have been written and listed with their full content on the main page and using pagination. I want to follow more Indie Web standards and follow a PESOS (Publish Elsewhere, Syndicate (to your) Own Site) method. I've figured out a way to get data from my Twitter (e.g. post_date, embed code, etc) into a YAML data file automatically. What I want to do is take the data from my posts and combine the data from Twitter and include those posts as if they were also blog posts (the plan is to do the same with Instagram as well).
I've tried a lot of things, but I'm not even sure what is the best way to go about doing this. I'm assuming that it will use something similar to Using Jekyll, how do you alter an array's contents using a for loop?, but I can't seem to make it work. My code for the blog posts is as follows currently:
{% for post in paginator.posts %}
{% if post.header.teaser %}
{% capture teaser %}{{ post.header.teaser }}{% endcapture %}
{% else %}
{% assign teaser = site.teaser %}
{% endif %}
{% if post.id %}
{% assign title = post.title | markdownify | remove: "<p>" | remove: "</p>" %}
{% else %}
{% assign title = post.title %}
{% endif %}
<div class="list__item">
<article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
<h1 class="archive__item-title" itemprop="headline">
{% if post.link %}
{{ title }} <i class="fas fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span>
{% else %}
{{ title }}
{% endif %}
</h1>
<p>Posted on {{ post.date | date: "%A %B %-d, %Y" }} by Jacob Campbell.</p>
{{ post.content }}
</article>
</div>
{% endfor %}
{% include paginator.html %}

Maybe, if your posts and tweets do have the same structure in terms of fields you could concat the two:
{% comment %} Given that you make the tweets accessible from site, as a collection, for example {% endcomment %}
{% assign posts = paginator.posts | concat: site.tweets | sort: "date" %}
{% for post in posts %}
<h2>{{ post.title }}</h2>
<div>{{ post.content }}</div>
{% endfor %}
Mind that, here I am also resorting the list after the concat, via the sort filter, so the tweets do appear in the normal time series of the posts.
And if your structures are not the same, you can always resort to the collection in which your post is:
{% assign posts = paginator.posts | concat: site.tweets | concat: site.instagram | sort: "date" %}
{% for post in posts %}
{% if post.collection == 'posts' %}
<h2>{{ post.title }}</h2>
<div>{{ post.content }}</div>
{% elsif post.collection == 'tweets' %}
{% comment %} If I am not mistaken, twitter have no title concept {% endcomment %}
<h2>There was a bird singing about:</h2>
<div>{{ post.content }}</div>
{% elsif post.collection == 'instagram' %}
{% comment %} So, now, it can fit any social media of your choice {% endcomment %}
{% endif %}
{% endfor %}

Related

Jekyll/Liquid Templating Capture Category Name of a Post

I am creating an archive by date and using this solution.
I want to add the category of the post next to the post and am having trouble capturing the category name of a post since categories are indexed through the site
{% else %}
<li>{{ post.title }}
{% capture category_names %}{{ ## need to capture category }}{% endcapture %}
{% if category_name %} - {% for category in category_names %}
{{category}}
{% unless forloop.last %} {% endunless %}
{% endfor %}
{% endif %}
{% if post.date %} - {{ post.date | date: "%m/%d/%Y" }}{% endif %}</li>
{% endif %}
Currently the code above creates {post name } - - mm/dd/YYYY as I want without the category name in between the 2 '-'.
Any idea how to capture the category name of a post? Thank you.

How get ints in Jekyll?

I am trying to make a blog and I want to make id tags that correspond with each time a for loop runs (e.g. #section_1, #section_2,#section_(insert variable) ).
Is there some way to do that in Jekyll?
This should produce what you're looking for:
{% assign indices = "1|2|3" | split: "|" %}
{% for index in indices %}
<div id="{{ index }}">This is div {{ index }}</div>
{% endfor %}
You'll have to know in advance how many sections that you want created, and add each ID to the 1|2|3 bit in the first line.
Use the forloop.index
The menu part :
<ul>
{% for posts in site.posts %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
Content part :
{% for posts in site.posts %}
<h2 id="section_{{ forloop.index }}">{{ post.title }}</h2>
{{ post.content }}
{% endfor %}

How to link post categories in Jekyll

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!

include.param as the Foo in site.tags.Foo

I use the following code in _includes/last_two_foo_posts.html to display the title of the last two Jekyll posts which have the tag "Foo":
{% assign posts = site.tags.Foo %}
{% for post in posts limit:2 %}
{{ post.title }}
{% endfor %}
I'd like to refactor the code so that I can call the include with a
{% include last_two_posts.html param="Foo" %}
Is there a way in Liquid to use something like {{ include.param }} for the Foo in the site.tags.Foo code?
_includes/post_by_tag.html
{% assign posts = site.tags.[include.tag] %}
{% for post in posts limit: include.number %}
<p>{{ post.title }}</p>
{% endfor %}
using it
{% include post_by_tag.html tag='Rails' number=3 %}
Et hop !

In my Jekyll include file how do I get the markdown for a post?

Is there a way to get ahold of a posts markdown in an include file?
My include file has this code: {{workingPost.content}}
When I include this in a markdown file I get the HTML. I pass that to another include that expects markdown and instead this is passing HTML.
Is there a way to access the markdown instead of the HTML for the post?
As requested here are the code files. What they do is get a featured post for the right hand side of the site like this. In that link the code is static HTML. I want to update it to make it dynamic via the following code. I already have the first image grabbing code working when it receives markdown. I'd like to use that code to grab the first image from the post here too, but by the time the code gets it the markdown has been turned into HTML.
Include file timely.html
{% assign workingPost = nil %}
{% for page in site.posts %}
{% if page.title == 'We Convert All Dollars To Bitcoin' %}
{% assign workingPost = page %}
{% endif %}
{% endfor %}
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">Popular</h3>
</div>
<div class="panel-body">
<a href="{{workingPost.url}}">
{% assign workingPostContent = workingPost.content %}
{% include first-post-image-src2.html param=workingPostContent %}
<img src="{% include first-post-image-src2.html param=workingPostContent %}" alt="{{workingPost.title}}">
<p>{{workingPost.excerpt}}</p>
<p class="btn btn-md btn-success" role="button">READ POST</p>
<br>
<br>
</a>
</div>
</div>
include file first-post-image-src2.html
{% capture result %}
{% assign htmlAgain= 'empty' %}
{% assign foundImageAgain = 0 %}
{% assign imagesAgain = include.param | split:"![" %}
{% for imageAgain in imagesAgain %}
{% if imageAgain contains '](' %}
{% if foundImageAgain == 0 %}
{% assign htmlAgain = imageAgain | split:"](" %}
{% assign htmlAgain = htmlAgain[1] %}
{% assign htmlAgain = htmlAgain | split:")" | first %}
{% assign foundImageAgain = 1 %}
{% endif %}
{% endif %}
{% endfor %}
{%endcapture%}{{site.url}}{{htmlAgain|strip}}
Yes translating from markdown to html is one of the first thinks made when Jekyll build. So, no way to grab the markdown in an include. The only way to bypass this limitation is to do it with a plugin. But it's not the subject.
Now back to you code. It's to complicated and fragile.
Jekyll has all the needed functionalities to do what you want to do. Don't try to do data processing with liquid. Use the tags and filters and you will not have to fear a Gem upgrade that will break your site and bring you to a really difficult debugging.
eg : somewhere in your code, you're processing a string with a | split:"/>" filter that rely on how kramdown is rendering ìmg tag. If one day they decide to remove this useless closing slash, your code will break.
The way you can go : put all the datas in your post, in the simplest form possible, and then use them with simple Jekyll tags and filter.
The idea is to use yaml Front Matter custom variables and Jekyll post or page excerpt functionalities.
In your _config.yml, define a new excerpt separator :
excerpt_separator: "<!-- excerpt end -->" # default is "\n\n" = two new lines
In all your posts :
---
excerpt_image_src: "/images/dollarsToBitcoins.jpg"
excerpt_image_alt: "Bitcoin Bulls converts dollars to bitcoins."
popular : true # I'll explain that latter
---
Bitcoin Bulls customers pay in USD but those dollars are all converted to bitcoin.
<!-- excerpt end -->
Bulls, I'm excited to announce...
In default.html
{% if page.is_post %}
<link rel="alternate" type="application/atom+xml" title="{{ site.name }} — Atom" href="{{ site.url }}/blog/feed.atom" />
<meta property="og:image" content="{{ site.url }}{{ page.excerpt_image_src | strip_newlines }}" />
<meta property="og:description" content="{{page.excerpt}}" />
{% else %}
In _includes/timely.html :
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">Popular</h3>
</div>
{% for p in site.posts %}{% if p.popular == true %}
<div class="panel-body">
<a href="{{p.url}}">
<img src="{{p.excerpt_image_src}}" alt="{{excerpt_image_alt}}">
<p>{{p.excerpt}}</p>
<p class="btn btn-md btn-success" role="button">READ POST</p><br><br>
</a>
</div>
{% endif %}{% endfor %}
</div>
Note the {% if p.popular == true %} that filter posts with a front matter variable popular: true.
In _includes/blog-post.html :
<li>
<a href="{{ post.url }}">
<p>{{post.date | date: "%B %d, %Y" }}</p>
<img src="{{post.excerpt_image_src}}" alt="{{post.excerpt_image_alt}}">
<!-- No need to wrap excerpt in <p> tag, Jekyll does it.
If you want to put your own tag :
<div>{{ post.excerpt | strip_html }}</div> -->
{{ post.excerpt }}
<p class="btn btn-md btn-success" role="button">READ POST</p><br><br>
</a>
</li>
In _layouts/post.html :
<h1>{{page.title}}</h1>
<div style="color:#666;">by David Smith on {{page.date | date: "%B %d, %Y" }}</div>
{% if page.excerpt_image_src %}
<p><img src="{{page.excerpt_image_src}}" alt="{{page.excerpt_image_alt}}"></p>
{% endif %}
{{ page.content | remove: page.excerpt | markdownify }}
<br>
As you're not actually displaying post excerpt in post page, it's {{ page.content | remove: page.excerpt | markdownify }}. If you want to display excerpt it's : {{ page.content | markdownify }}
I don't know why but page.content return mardown and not html, so the filter | markdownify to transform markdown to html.
Et voila ! Long live Bitcoinbulls !
The markdown isn't available. It is rendered earlier and not available.
From this answer it sounds like the markdown isn't available.
In my case I made my first-post-image-src2.html include handle the case where it gets markdown or HTML like this:
{% capture result %}
{% assign htmlAgain= 'empty' %}
{% assign foundImageAgain = 0 %}
{% if include.param contains '![' %}
{% assign imagesAgain = include.param | split:"![" %}
{% for imageAgain in imagesAgain %}
{% if imageAgain contains '](' %}
{% if foundImageAgain == 0 %}
{% assign htmlAgain = imageAgain | split:"](" %}
{% assign htmlAgain = htmlAgain[1] %}
{% assign htmlAgain = htmlAgain | split:")" | first %}
{% assign foundImageAgain = 1 %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% if foundImageAgain ==0 %}
{% assign imagesAgain = include.param | split:"<img" %}
{% for imageAgain in imagesAgain %}
{% if imageAgain contains 'src="' %}
{% if foundImageAgain == 0 %}
{% assign htmlAgain = imageAgain | split:'src="' %}
{% assign htmlAgain = htmlAgain[1] %}
{% assign htmlAgain = htmlAgain | split:'"' | first %}
{% assign foundImageAgain = 1 %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{%endcapture%}{{site.url}}{{htmlAgain|strip}}