Automatic photo-cropp-function cuts off people´s heads

Hi getgrav-forum,

• using Quark-Open-Publishing-theme I have a start-page template "Blog".
• It´s sub-pages are template "Item".
• Start-page shows the sub-pages article-texts in shot version.
• After adding a photo to "Page Media" an automatically cropped middle part of the photo is shown at article-page and at start-page´s short version.
• To avoid this, article´s config under "Blog Item" gives me possibility to select a manually cropped 1500x500px "Hero Image" which is shown correctly at articles page - good until here.
• In start-page´s short-version I didn´t find such an option to define an own manually cropped smal picture and in result people´s heads and legs are automatically cut off at start-page.

Please, how to make start page not to cut off peoples heads?

(sorry as a newbie not yet knowing exact names of all parts and functions - guess that´s also reason why my searches weren`t successful)

@vowi,

Please, how to make start page not to cut off peoples heads?

You can't out-of-the-box because it is hardcoded in template /user/themes/quark-open-publishing/templates/partials/blog-list-item.html.twig line 29

<img src="{{ image.cropZoom(1400,400).url }}" alt="{{ image_alt_text }}">

What you can do:

• Ask the author of the theme to add parameterized cropping of the image used in the blog-list-item.
• Or DIY by overriding the template in your own inheriting/child theme.

@vowi,

What I didn´t think about: the first picture is always the one to be automatically cropped for to be used as header-image. There is no way to select another image.

In themes, you may often see a similar logic like what is being used in Quark:

For the hero of the blog.md page:
Use the image mentioned in the frontmatter/header of the page (variable page.header.hero_image), with the first image in the folder as fallback:

{% set blog_image = page.media.images[page.header.hero_image] ?: page.media.images|first %}

In frontmatter of page blog.md:

---
hero_image: road.jpg
---

For the blog-list-item in the blog.md page:
Get the first image in the folder of the page.

{% set image = page.media.images|first %}
{% if image %}
<div class="card-image">
    <a href="{{ page.url }}">{{ image.cropZoom(800,400).html|raw }}</a>
</div>
{% endif %}

...sometimes web-applications seem to act randomly - good to see it´s just a gap knowing where to look - thanks again pamtbaau!