Customizing Blog Post Layout Using "Summary Size and Separator"

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?

Forum already has multiple topics about this and also there's a whole recipe in the docs dedicated just for that
https://learn.getgrav.org/17/cookbook/twig-recipes#displaying-page-content-without-summary

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.

What's the "trimmed string of characters"?

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.

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

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.

You're still explicitly saying that the page has summary

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

By default, this value is 300 characters.

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 ===.

Did you try

summary:
  enabled: false

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

Hey @q3d, bumping this because thanks to @paulhibbitts we have a solution.

@b.da:
Great snippet for splitting page content.

Headed in this direction in my project, but ended up with a custom variable as a simpler solution. Feel free to mark as solved if it’s what you were looking for.