How to display blog list in modular page?

Support
1

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.

Screenshot_20190624_215835
Screenshot_20190624_215835.png516×606 10.7 KB

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

What is the best solution here?

2

Have you read the material on page collections?

3

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.

4

You’ve got two items.

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

5

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

6

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

7

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

Screenshot_20190626_223112

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?

8

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

9

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 :slight_smile:

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

10

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

11

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