Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-10-01T03:38:37.500Z
Answers.LastActivityDate: 2017-10-01T03:38:37.500Z
Answers.UserDisplayName: Aaron Waldon
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-07-10T14:44:40.637Z
Answers.LastActivityDate: 2017-07-10T14:44:40.637Z
Answers.UserDisplayName: mention79
Body: <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>
  
Tags: <eager-loading><plugin-focuspoint>
Title: Eager Loading breaking focus point
ThreadText: # 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?
  
  ```html
  {% 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 %}
  
  ```
  
  **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.
  
  
  ---
  
  