How to turn indivisual blog page <h1> into <h4> on listing page?

1

I have the following test page for my blog in grav :

---
title: 'My Blog post one'
visible: true
---

#My blog post one

Pellentesque ornare mi nec elementum fringilla. Nam aliquam urna metus, vel convallis leo vulputate ut. Sed ac tempor turpis, ut pellentesque nisi. Nulla in dui sit amet augue iaculis euismod ac a massa. Sed sollicitudin nibh nisi, eu efficitur ligula vulputate a. Nam ullamcorper nisl non elementum dignissim. Mauris at neque sed tellus vestibulum tempor quis ut neque. Pellentesque eu dolor quis augue molestie suscipit. Duis tristique convallis mollis. Aenean eu erat sed mauris congue porta non vel urna. Sed iaculis semper malesuada. Nunc in lectus a augue lacinia dapibus vitae scelerisque mauris. Pellentesque efficitur lacus non dignissim viverra.
@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}

As you can see there is an <h1> and a <p> tag. Now when the indivisual blog page everything is fine, however on the listing page , where a snapshot of each blog post appears , i don’t want the <h1> to render as a <h4> , the part that displays the heading and para tag in the blog listing page is the following:

{% elseif truncate and page.summary != page.content %}
        <div class="p-summary e-content">
            {{ page.summary }}
            <p><a href="{{ page.url }}">{{ 'BLOG.ITEM.CONTINUE_READING'|t }}</a></p>
        </div>

How do i make the <h1>```` into a ````<h4> tag while being displayed in the blog listing page ?

possible solution , make a config file for each blog post page , and have the heading with a key like blogpageheading , in the indivisual blog post make this an h1 and in the listing page , use the heading as text for h4 , will this text show up in the page.summary though ?

2

If your h1 is the same as your page title, as in your example, why not use {{page.title}} instead and wrap it inside h4 tags?

Otherwise, you would have to perform some markdown manipulations to “extract” what is between h1 and output it in another way, but really it is kind of a hack.
Anyway, here is the hacky way do it (not tested):

{% set mytitle = page.summary|regex_replace('~.*<h1>(.*)</h1>.*~s', '$1') %}
<div class="p-summary e-content">
           <h4>{{ mytitle }}</h4>
        {{ page.summary|replace(mytitle : "") }}
        <p><a href="{{ page.url }}">{{ 'BLOG.ITEM.CONTINUE_READING'|t }}</a></p>
    </div>

Hope it helps

1 Like
3

Thanks @paul , i instead just did this:

---
title: 'My Blog post one'
visible: true
summery: 'Pellentesque ornare mi nec elementum fringilla. Nam aliquam urna metus, vel convallis leo vulputate ut. Sed ac tempor turpis, ut pellentesque nisi. Nulla in dui sit amet augue iaculis euismod ac a massa. Sed sollicitudin nibh nisi, eu efficitur ligula vulputate a.'
header_image_file : css-thumb.jpg
---

and refenced it in my template like so:

<div class="p-summary e-content">
            {{ page.header.summery }}
            <p><a href="{{ page.url }}">{{ 'BLOG.ITEM.CONTINUE_READING'|t }}</a></p>
        </div>

Your solution has a more wide use case though , so thanks :slight_smile: