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

Support Themes & Styling
1

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)

2

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

3

thank you pamtbaau for your help! At least I don´t have to search any more for an elaborated cropping-configuration :slight_smile: Good to know also, there´s a channel to ask the autor. DIY might be a chance - started searching for a sample.

Until then I found a workaround:

  • first upload an image manually cropped to 1500x500px-stripe as header
  • second upload other image(s), which to be displayed at page´s body

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. When started with an unsuitable image, you have to delete all images and upload the desired one first.

4

@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 %}
5

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