Customizing Blog Post Layout Using "Summary Size and Separator"

Support Themes & Styling
1

I’m working on a blog in GRAV CMS and aiming for a specific layout for my blog posts. I plan to include a header, an introductory paragraph, followed by the first image in the folder, and then the rest of the content. I’ve tried using the following code to manipulate the layout:

{{ page.summary|raw }}
<img ... />
{{ page.content|raw }}

However, this results in the text summary appearing both above and below the image within the full text block. Is there a way to configure the “Summary Size and Separator” or adjust my code to display the first paragraph above the first image from the folder, without repeating the summary text?

2

Forum already has multiple topics about this and also there’s a whole recipe in the docs dedicated just for that

1 Like
3

I will not have added summary text for every entry.

In this case, with the standard configuration:

summary:
  enabled: true
  format: short
  size: 300
  delimiter: '==='

and the code in the template:

{{ page.summary|raw }}
<img ... />
{{ page.content|slice(page.summary|length)|bettertypo()|raw }}

breaks the text into two parts.

Simple check

{% if page.summary %}
   {{ page.content|slice(page.summary|length)|bettertypo()|raw }}
{% else %}
   {{ page.content|bettertypo()|raw }}
{% endif %}

does not work because the property contains a trimmed string of characters and the condition is always true.

I would like to avoid adding specific properties in page.header and only use standard capabilities.

4

What’s the “trimmed string of characters”?

5

If there is === in the page file, everything works and page.summary contains text with “===” above it.

Text summary
<img ... />
Text

However, if there is no === in the file, page.summary is not empty but contains a string of characters from the beginning trimmed to the value from the configuration file:

summary:
   size: 300

For this second example, I would like the content to look like this:

<img ... />
Text

not:

Text trimmed to 300 characters...
<img />
text from 300 characters to the end.
6

But by defining

summary:
   size: 300

You’re explicitly telling Grav that this page has a summary of 300 chars, aren’t you? If you remove that and there’s no === in the content, then there’s no summary and it should work as expected

7

I removed it and now the configuration looks like this:

summary:
  enabled: true
  format: short
  delimiter: '==='

However, it still creates a summary from the 300 character main text if there is no === in the text, which results in:

Text trimmed to 300 characters...
<img />
text from 300 characters to the end.
8

You’re still explicitly saying that the page has summary

9

@q3d, Have you had a chance to read the docs about the summary?

By default, this value is 300 characters.

10

Maybe I’ll ask in a different way. Is it possible to configure it so that in the absence of ===
page.summary() returned false or empty string?

However, if it is, return all the contents before ===.

11

Did you try

summary:
  enabled: false

? At least based on the docs, it should disable summary if there’s no ===