How to display blog list in modular page?

Hi,

my Blog is reachable under
/info

Now I want to display the latest 5(10) blog items on my modular (hero, features) index page.

plugin:page-inject does not work and plugin:content-inject displays only the title of the blog.

What is the best solution here?

Have you read the material on page collections?

Just read it and tried this on the modular.md

content:
items: '@self.modular'
items:
'@taxonomy':
  category: infoarticle
  order:
    by: date
    dir: desc
limit: 5
pagination: true

But nothing happens.

You've got two items.

Have you tried to rename the second one ?
Check this article on multiple collection.

Thanks for your reply!

It seems that I do not understand the concept behind page collections at all?!

---
title: Test Multi-Collection
hide_git_sync_repo_link: false

items: '@self.children'
fruit:
items:
   '@taxonomy.tag': [fruit]
---

Test for Multi-Collection

{% set default_collection = page.collection %}
{% set fruit_collection = page.collection('fruit') %}

I have now 3 articles tagged with "fruit", but none of them show up at the collections page.

Is there ( in a theme/skeleton) a working example of page collections? It would be very helpful for me to see a working one to understand the concept behind it better

The Build a Blog section references a skeleton plus an explanation of how things work. Hopefully that will make things clearer.

Thanks!

I am very close now

_blog (default.md) look like

---
title: Test Collection
hide_git_sync_repo_link: false

content:
order:
    by: date
    dir: desc
items:
    - '@taxonomy.tag': [fruit]
limit: 6
pagination: true
url_taxonomy_filters: true
---

{% set default_collection = page.collection %}

{% for p in page.collection %}
<h2>{{ p.title }}</h2>
{{ p.summary }}
<a href="{{ p.url }}">{{ p.title }}</a>
{% endfor %}

{% for p in page.collection %}
<div class="card">
<div class="card-header">
    <div class="card-title">
    <a href="{{ p.url }}">{{ p.title }}</a>
    </div>
</div>
<div class="card-body">
    {{ p.summary }}
</div>
</div>
{% endfor %}

Okay, it puts all the content in the page as I want it.

BUT: There is an issue with {{ p.url }}

As soons as I put an tag (div or h3) around that line the output is alway /{{ p.url }}

Is there a way to fix this?

Hi @amihoro,

I ran into the same issue of broken links when using html tags within twig... more than a year later as you did, but I also don't have a clue to solve that.

It's weird, especially because within the learning-section https://learn.getgrav.org/16/content/collections#collection-object-methods there are divs in use...

Wrapping the repeating items into a block also did not work. My code is quite similar to yours:

{% for p in page.collection %}
{% block content %}
<div class="news_item">
<h2>{{ p.title|e }}</h2>
{{ p.summary|raw }}
<a href="{{ p.url|e }}">Read it!</a>
</div>
{% endblock %}
{% endfor %}

Next question is, how to use the h1 of the linked page to be displayed within h2 (instead of {{ p.title|e }}). It seems, only

• title
• menu
• summary
  are accessible.

Greetings

Markus

Sometimes a solution just appears quickly after asking the question...

You only have the problem of broken links, wenn the a-tag is surrounded by a div. A standalone div does not affect the link.

If you want to surround your link with a div or presumable even a paragraph, you have to process twig first (have a look at the "advanced" card of your page). Now it works properly 🙂

So, that one is done, searching for adding new options to p.menu, p.title and p.summary continues - any suggestions welcome...

@Markus:
s - any suggestions welcome

It looks as though it has been 3 years . Did you ever get an answer ?

Have you seen some themes with modular blog template?. For example, Editorial