<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>

CC BY-SA 4.0
2018-10-18T08:24:36.313Z
Ah okay, I did wonder that. All setup now thanks.
Ian Ebden
CC BY-SA 4.0
2018-10-18T00:59:08.307Z
2018-10-18T02:51:49.313Z
2018-10-18T02:51:49.313Z
andrew.welch
<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>

<plugin-elementapi><plugin-imager>
Element API, VueJs and Imager!
# 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 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:
 [
        '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.  

---

