Eager Loading breaking focus point 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
  }
) %}
&lt;div&gt;
 {% if image | length %}
 &lt;picture&gt;
   &lt;source srcset="{{ craft.imager.srcset(transformedImages) }}"&gt;
   &lt;img class=""
        data-lazy="{{ siteUrl }}assets/placeholder.png"
        src="{{ transformedImages[1].url }}"
        sizes="100vw"
        alt="{{ image.title }}"&gt;
 &lt;/picture&gt;
 {% endif %}
 &lt;div class="overlay-box"&gt;
   &lt;h2&gt;{{ row.heading }}&lt;/h2&gt;
   &lt;p&gt;{{ row.text }}&lt;/p&gt;
   {% set button = row.button %}
   {% if button|length %}&lt;a class="readmore" href="{{ button.getUrl() }}"&gt;View Project&lt;/a&gt;{% endif %}
 &lt;/div&gt;
&lt;/div&gt;
{% endfor %}
It has been answered in another thread here: enter link description here, but basically you have to use another focal point plugin called FocalPointField-Craft which then works with eager loading. And I've found also uses a lot less database queries than the other plugin too.