Preparse responsive images

Question

I'm trying to get Preparse Field for Craft to work on some responsive images set up with Imager for Craft, but I'm not having much luck, as it's still only generating the cached images on page load and not when the client saves the image.

This is my image code in the twig template. Can someone explain how to setup the preparse plugin with it as the explanation on the plugin page is a bit too brief?

{% set image = category.countyHero.first() %}
{% set transformedImages = craft.imager.transformImage(image,
    [
            { width: 1920, ratio: 3/1, jpegQuality: 75 },
            { width: 1366, ratio: 3/1 },
            { width: 1024, ratio: 3/1.5 },
            { 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 %}
<img class="img-responsive"
     src="{{ transformedImages[1].url }}"
     sizes="100vw"
     srcset="{{ craft.imager.srcset(transformedImages) }}"
     alt="{{ image.title }}">
{% endif %}

Answer 1

I've managed to get it working via the following steps:

1. Create a new field and give it the preparse field type

2. Duplicate only the twig variable code from the template into the input box in the field page.

3. In Craft Settings, go to the page template, and add the new preparse field to the available fields (this doesn't show up in the content editor).

4. The twig template stayed the same.

5. The responsive images are then generated when the user saves the entry in Craft instead of when the page is loaded by the end user.