I’m trying to cut down the amount of database queries on the homepage of a site I’m working on, and am attempting to do some eager loading of an asset set in a supertable field. However, although the queries drop, the focus point no longer works when I do, so I think it’s not setup right. Can anyone explain what I’m doing wrong please?
{% set mainCarousel = entry.mainCarousel.find({
with: [
'carouselImage'
]
}) %}
{% for row in mainCarousel %}
{% set image = row.carouselImage[0] ?? null %}
{% set transformedImages = craft.imager.transformImage(image,
[
{ width: 1920, ratio: 3/1, jpegQuality: 60 },
{ width: 1440, ratio: 3/1 },
{ width: 1024, ratio: 3/1 },
{ width: 750, ratio: 4/3, jpegQuality: 60 },
],
{
format: 'jpg',
allowUpscale: false,
mode: 'crop',
jpegQuality: 80,
position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%',
interlace: true
}
) %}
<div>
{% if image | length %}
<picture>
<source srcset="{{ craft.imager.srcset(transformedImages) }}">
<img class=""
data-lazy="{{ siteUrl }}assets/placeholder.png"
src="{{ transformedImages[1].url }}"
sizes="100vw"
alt="{{ image.title }}">
</picture>
{% endif %}
<div class="overlay-box">
<h2>{{ row.heading }}</h2>
<p>{{ row.text }}</p>
{% set button = row.button %}
{% if button|length %}<a class="readmore" href="{{ button.getUrl() }}">View Project</a>{% endif %}
</div>
</div>
{% endfor %}