<p>I ran into this issue too and had landed on this thread. I was able to piece together a solution using the modify elements query method. I wrote a pull request that got merged, so lazy-loading works with this plugin as of version <a href="https://github.com/smcyr/Craft-FocusPoint/commit/5b5f2c0bf416cfe98ae2332d1c0a62334ae4b69f" rel="nofollow noreferrer">1.1.4</a>.</p>

CC BY-SA 3.0
2017-10-01T03:38:37.500Z
2017-10-01T03:38:37.500Z
Aaron Waldon
<p>It has been answered in another thread here: <a href="https://craftcms.stackexchange.com/questions/18608/using-focuspoint-with-eager-loading?noredirect=1#comment29323_18608">enter link description here</a>, but basically you have to use another focal point plugin called <a href="https://github.com/aelvan/FocalPointField-Craft" rel="nofollow noreferrer">FocalPointField-Craft</a> which then works with eager loading. And I've found also uses a lot less database queries than the other plugin too.</p>

CC BY-SA 3.0
2017-07-10T14:44:40.637Z
2017-07-10T14:44:40.637Z
mention79
<p>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?</p>

<pre class="lang-html prettyprint-override"><code>{% 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 %}
</code></pre>

<eager-loading><plugin-focuspoint>
Eager Loading breaking focus point
# Eager Loading breaking focus point

(Asked by: username_0 on 2017-07-10)

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
  }
) %}

 {% if image | length %}
 
   
   
 
 {% endif %}
 
   {{ row.heading }}
   {{ row.text }}
   {% set button = row.button %}
   {% if button|length %}View Project{% endif %}
 

{% endfor %}

**Tags:** eager-loading, plugin-focuspoint

---

## 2 answers

### Answer by username_1 on 2017-10-01. Score: 1

I ran into this issue too and had landed on this thread. I was able to piece together a solution using the modify elements query method. I wrote a pull request that got merged, so lazy-loading works with this plugin as of version [1.1.4](https://github.com/smcyr/Craft-FocusPoint/commit/5b5f2c0bf416cfe98ae2332d1c0a62334ae4b69f).


---

### Answer by username_0 on 2017-07-10. Score: 1

It has been answered in another thread here: [enter link description here](https://craftcms.stackexchange.com/questions/18608/using-focuspoint-with-eager-loading?noredirect=1#comment29323_18608), but basically you have to use another focal point plugin called [FocalPointField-Craft](https://github.com/aelvan/FocalPointField-Craft) which then works with eager loading. And I've found also uses a lot less database queries than the other plugin too.


---

