Answers.Body: <p>So the problem is that you're using an example from my older article, which was written for Craft 2.x. This line:</p>
  
  <pre><code>craft()-&gt;config-&gt;set('generateTransformsBeforePageLoad', true);
  </code></pre>
  
  <p>...and also these lines:</p>
  
  <pre><code>if (craft()-&gt;plugins-&gt;getPlugin('Imager')) {
      $image = craft()-&gt;imager-&gt;transformImage($srcImage, [
  </code></pre>
  
  <p>...are specific to Craft 2.x; anything <code>craft()</code> is Craft 2.x; you can see some of the changes here: <a href="https://docs.craftcms.com/v3/extend/updating-plugins.html#high-level-notes" rel="nofollow noreferrer">https://docs.craftcms.com/v3/extend/updating-plugins.html#high-level-notes</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-10-18T08:24:36.313Z
Answers.Text: Ah okay, I did wonder that. All setup now thanks.
Answers.UserDisplayName: Ian Ebden
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-10-18T00:59:08.307Z
Answers.LastActivityDate: 2018-10-18T02:51:49.313Z
Answers.LastEditDate: 2018-10-18T02:51:49.313Z
Answers.UserDisplayName: andrew.welch
Body: <p>I'm trying to do something akin to Andrew's excellent <a href="https://nystudio107.com/blog/lazy-loading-with-the-element-api-vuejs" rel="nofollow noreferrer">article</a> whereby I have a 'more' button that spits out 6 more entries at a time. I'm nearly there, but running into some issues. I don't get past the spinner, and looks like I have some syntax issues lines 17 and/or 24 (because it works if I comment those out). Pretty new to Element API and working this way, and can't Google up anything that makes sense to me as a fix. Anyone help me out?</p>
  
  <p>Here's my element-api.php:</p>
  
  <pre><code>&lt;?php
  
  use craft\elements\Entry;
  use craft\helpers\UrlHelper;
  
  return [
      'endpoints' =&gt; [
          'api/news.json' =&gt; function() {
              return [
                  'elementType' =&gt; Entry::class,
                  'criteria' =&gt; ['section' =&gt; 'news'],
                  'elementsPerPage' =&gt; 6,
                  'transformer' =&gt; function(Entry $entry) {
                      // Generate new image transforms right away
                      craft()-&gt;config-&gt;set('generateTransformsBeforePageLoad', true);
                      // Get card image
                      $srcImage = $entry-&gt;cardImage-&gt;one();
  
                      if ($srcImage) {
                          $imageUrl = $srcImage-&gt;getUrl();
                          // Check if Imager plugin installed
                          if (craft()-&gt;plugins-&gt;getPlugin('Imager')) {
                              $image = craft()-&gt;imager-&gt;transformImage($srcImage, [
                                  'width' =&gt; 800,
                                  'format' =&gt; 'jpg',
                                  'ratio' =&gt; 3/2,
                                  'allowUpscale' =&gt; false,
                                  'mode' =&gt; 'crop',
                                  'jpegQuality' =&gt; 60,
                                  'position' =&gt; $srcImage-&gt;focusPctX() . '% ' . $srcImage-&gt;focusPctY() . '%',
                                  'interlace' =&gt; true
                              ], null, null);
                              $imageUrl = $image-&gt;url;
                          } else {
                              $imageUrl = $srcImage-&gt;getUrl(['width' =&gt; 800, 'height' =&gt; 533]);
                          }
                      } else {
                          $imageUrl = null;
                      }
  
                      return [
                          'title' =&gt; $entry-&gt;title,
                          'url' =&gt; $entry-&gt;url,
                          'jsonUrl' =&gt; UrlHelper::url("news/{$entry-&gt;slug}.json"),
                          'postDate' =&gt; $entry-&gt;postDate-&gt;format(\DateTime::ATOM),
                          'author' =&gt; ['name' =&gt; $entry-&gt;author-&gt;name],
                          'cardImageUrl' =&gt; $imageUrl,
                          'summary' =&gt; $entry-&gt;summary,
                      ];
                  },
                  'meta' =&gt; [
                      'description' =&gt; 'Latest news',
                  ],
                  'pretty' =&gt; true,
              ];
          },
      ]
  ];
  </code></pre>
  
Tags: <plugin-elementapi><plugin-imager>
Title: Element API, VueJs and Imager!
ThreadText: # Element API, VueJs and Imager!
  
  (Asked by: username_0 on 2018-10-17)
  
  I'm trying to do something akin to Andrew's excellent [article](https://nystudio107.com/blog/lazy-loading-with-the-element-api-vuejs) whereby I have a 'more' button that spits out 6 more entries at a time. I'm nearly there, but running into some issues. I don't get past the spinner, and looks like I have some syntax issues lines 17 and/or 24 (because it works if I comment those out). Pretty new to Element API and working this way, and can't Google up anything that makes sense to me as a fix. Anyone help me out?
  
  Here's my element-api.php:
  
  ```
  <?php
  
  use craft\elements\Entry;
  use craft\helpers\UrlHelper;
  
  return [
      'endpoints' => [
          'api/news.json' => function() {
              return [
                  'elementType' => Entry::class,
                  'criteria' => ['section' => 'news'],
                  'elementsPerPage' => 6,
                  'transformer' => function(Entry $entry) {
                      // Generate new image transforms right away
                      craft()->config->set('generateTransformsBeforePageLoad', true);
                      // Get card image
                      $srcImage = $entry->cardImage->one();
  
                      if ($srcImage) {
                          $imageUrl = $srcImage->getUrl();
                          // Check if Imager plugin installed
                          if (craft()->plugins->getPlugin('Imager')) {
                              $image = craft()->imager->transformImage($srcImage, [
                                  'width' => 800,
                                  'format' => 'jpg',
                                  'ratio' => 3/2,
                                  'allowUpscale' => false,
                                  'mode' => 'crop',
                                  'jpegQuality' => 60,
                                  'position' => $srcImage->focusPctX() . '% ' . $srcImage->focusPctY() . '%',
                                  'interlace' => true
                              ], null, null);
                              $imageUrl = $image->url;
                          } else {
                              $imageUrl = $srcImage->getUrl(['width' => 800, 'height' => 533]);
                          }
                      } else {
                          $imageUrl = null;
                      }
  
                      return [
                          'title' => $entry->title,
                          'url' => $entry->url,
                          'jsonUrl' => UrlHelper::url("news/{$entry->slug}.json"),
                          'postDate' => $entry->postDate->format(\DateTime::ATOM),
                          'author' => ['name' => $entry->author->name],
                          'cardImageUrl' => $imageUrl,
                          'summary' => $entry->summary,
                      ];
                  },
                  'meta' => [
                      'description' => 'Latest news',
                  ],
                  'pretty' => true,
              ];
          },
      ]
  ];
  
  ```
  
  **Tags:** plugin-elementapi, plugin-imager
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2018-10-18. Score: 1 | Accepted answer
  
  So the problem is that you're using an example from my older article, which was written for Craft 2.x. This line:
  
  ```
  craft()->config->set('generateTransformsBeforePageLoad', true);
  
  ```
  
  ...and also these lines:
  
  ```
  if (craft()->plugins->getPlugin('Imager')) {
      $image = craft()->imager->transformImage($srcImage, [
  
  ```
  
  ...are specific to Craft 2.x; anything `craft()` is Craft 2.x; you can see some of the changes here: <https://docs.craftcms.com/v3/extend/updating-plugins.html#high-level-notes>
  
  > **Comments:**
  > **username_0**: Ah okay, I did wonder that. All setup now thanks.  
  
  ---
  
  