Element API, VueJs and Imager!

Question

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:

<?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,
            ];
        },
    ]
];

Answer 1

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