Retrieve first image from a Wagtail Streamfield for blog_index_page - json

Assume I am following the Your first Wagtail site tutorial, except I want to use a Streamfield, instead of separate RichTextField or BlogPageGalleryImage. For example :
class BlogPage(Page):
date = models.DateField("Post date")
intro = models.CharField(max_length=250)
body = RichTextField(blank=True)
... becomes ...
class BlogPage(Page):
body = StreamField([
('heading', blocks.CharBlock(classname="full title")),
('intro', blocks.RichTextBlock()),
('body', blocks.RichTextBlock()),
('image', ImageChooserBlock()),
], null=True, blank=True,)
How can I (or can I) pull the first image and the beginning of intro (...as I cannot restrict length) from a Streamfield for use in the blog_index_page.html template, and avoid using separate fields and BlogPageGalleryImage Class? Therefore replacing this template :
{% for post in blogpages %}
{% with post=post.specific %}
<h2>{{ post.title }}</h2>
{% with post.main_image as main_image %}
{% if main_image %}{% image main_image fill-160x100 %}{% endif %}
{% endwith %}
<p>{{ post.intro }}<p>
{% endwith %}
{% endfor %}
With something more like this :
{% for post in blogpages %}
{% with post=post.specific %}
<h2>{{ post.title }}</h2>
{{ post.body.image.first() }}
<p>{{ post.intro.get_words(50) }}</p>
{{ post.body|richtext }}
{% endwith %}
{% endfor %}
Many thanks.

Related

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

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

Adding tags to jekyll hyde blog

I am trying to add tags to my blog based on jekyll hyde.
This is what I have in place right now.
_includes/filter_by_tag.html
<div class="message">
Filter by tag:
{% assign all_tags = site.data.tags %}
{% for tag in all_tags %}#{{ tag[1].name }}
{% endfor %}
</div>
_includes/tags_for_page.html
{% assign post = page %}
{% if post.tags.size > 0 %}
{% capture tags_content %}{% if post.tags.size == 1 %}<i class="fa fa-tag"></i>{% else %}<i class="fa fa-tags"></i>{% endif %} {% endcapture %}
{% for post_tag in post.tags %}
{% assign tag = site.data.tags[post_tag] %}
{% if tag %}
{% capture tags_content_temp %}{{ tags_content }}#{{ tag.name }} {% if forloop.last == false %}<!--comma-->{% endif %}{% endcapture %}
{% assign tags_content = tags_content_temp %}
{% endif %}
{% endfor %}
{% else %}
{% assign tags_content = '' %}
{% endif %}
_layouts/blog_by_tag.html
---
layout: default
---
{% assign tag = site.data.tags[page.tag] %}
<div class="page">
<h1 class="page-title">Articles by tag: #{{ tag.name }}</h1>
<div class="message">
All tags:
{% assign all_tags = site.data.tags %}
{% for tag in all_tags %}#{{ tag[1].name }}
{% endfor %}
</div>
<div>
{% if site.tags[page.tag] %}
{% for post in site.tags[page.tag] %}
{{ post.date | date_to_string }} » {{ post.title }}<br>
{% endfor %}
{% else %}
<p>There are no posts for this tag.</p>
{% endif %}
</div>
</div>
_layouts/post.html
comments: true
---
{% include tags_for_page.html %}
<div class="post">
<h1 class="post-title">{{ page.title }}</h1>
<span class="post-date">{{ page.date | date_to_string }} {{ tags_content }}</span>
{% if page.cover_image %}
<img src="{{ page.cover_image }}" alt="{{ page.title }}">
{% endif %}
{{ content }}
</div>
archive.md
title: Blog Archives
{% include filter_by_tag.html %}
{% for post in site.posts %}{{ post.date | date_to_string }} » [ {{ post.title }} ]({{ post.url }})
{% endfor %}
I am not sure where am I going wrong here, I tried following the content from this blog post here, tried replicating the same for my blog but I can't see the tags being generated and displayed.
Not sure where am I going wrong.
Link to my blogs github repo where I am trying to add tags
link to the blog where you can see the blog.
Commit hash where I tried adding the tags
I had missed out the file
_data/tags.yml
whose contents would be like
ansible:
name: ansible
apache:
name: apache
and so on

Liquid markup sorting the output

I am trying to display a list of all articles using liquid markup. I've got this code which displays them properly, however I want to be able to sort by the modified date descending (most recent article on top). How can this be accomplished?
I was thinking that perhaps I need to create a new array with all articles in it and then sort that, but I am not sure how to do that. Also note that I want to sort ALL of my articles by date, not just within each folder.
{% for category in portal.solution_categories %}
{% if category.folders_count > 0 %}
{% for folder in category.folders %}
{% for article in folder.articles %}
{{ article.title }} - {{ article.modified_on | short_day_with_time }} <br>
{% endfor %}
{% endfor %}
{% endif %}
{% endfor %}
Thanks!
You can use a variable to sort the list of articles and then iterate that variable.
{% for category in portal.solution_categories %}
{% if category.folders_count > 0 %}
{% for folder in category.folders %}
{% assign sorted = (folder.articles | sort:date) %}
{% for article in sorted %}
{{ article.title }} - {{ article.modified_on | short_day_with_time }} <br>
{% endfor %}
{% endfor %}
{% endif %}
{% endfor %}

Nested "for" loop inside "if" condition in Liquid/Jekyll

I'm getting syntax error while trying to generate site. Do you have any ideas what can be wrong here?
Error: Liquid syntax error: Unknown tag 'elsif'
{% if page.title == "Tags" %}
{% for tag in site.tags %}
{% elsif page.title == "Categories" %}
{% for tag in site.categories %}
{% endif %}
{{ tag[0] }}
{% endfor %}
You can't start a loop conditionally like that, control blocks must be properly nested. To accomplish what you're trying to do you could do:
{% if page.title == "Tags" %}
{% assign data = site.tags %}
{% elsif page.title == "Categories" %}
{% assign data = site.categories %}
{% endif %}
{% for tag in data %}
{{ tag[0] }}
{% endfor %}
You have got it all wrong. The nested loops does not work this way.
It should start and end inside the same conditional.
if conditional
for loop
endfor
endif
something like this.
So, the correct way to do it should be this
{% if page.title == "Tags" %}
{% for tag in site.tags %}
{{ tag[0] }}
{% endfor %}
{% elsif page.title == "Categories" %}
{% for tag in site.categories %}
{{ tag[0] }}
{% endfor %}
{% endif %}
This code should do exactly what you want correctly but there is a better approach as answered by JJJ

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 !