<p>I've managed to get it working via the following steps:</p>

<ol>
<li><p>Create a new field and give it the preparse field type</p></li>
<li><p>Duplicate only the twig variable code from the template into the input box in the field page.</p></li>
<li><p>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).</p></li>
<li><p>The twig template stayed the same.</p></li>
<li><p>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. </p></li>
</ol>

CC BY-SA 3.0
2017-04-03T18:42:55.170Z
At step 2 you say "Duplicate only the twig variable code from the template into the input box in the field page." But which bit exactly in the above code is the twig variable code?
rjdvsk
CC BY-SA 3.0
2017-04-03T19:15:47.730Z
All the code in the `{% set %}` bits. So everything before `{% if image | length %}`
mention79
CC BY-SA 3.0
2017-02-02T16:03:58.230Z
2017-02-02T16:03:58.230Z
mention79
<p>I'm trying to get <a href="https://github.com/aelvan/Preparse-Field-Craft" rel="nofollow noreferrer">Preparse Field for Craft</a> to work on some responsive images set up with <a href="https://github.com/aelvan/Imager-Craft" rel="nofollow noreferrer">Imager for Craft</a>, 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. </p>

<p>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?</p>

<pre><code>{% 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 %}
&lt;img class="img-responsive"
     src="{{ transformedImages[1].url }}"
     sizes="100vw"
     srcset="{{ craft.imager.srcset(transformedImages) }}"
     alt="{{ image.title }}"&gt;
{% endif %}
</code></pre>

<templating><plugin-imager>
Preparse responsive images
# Preparse responsive images

(Asked by: username_0 on 2017-02-02)

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

{% endif %}

**Tags:** templating, plugin-imager

---

## 1 answers

### Answer by username_0 on 2017-02-02. Score: 2 | Accepted answer

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.

> **Comments:**
> **username_1**: At step 2 you say "Duplicate only the twig variable code from the template into the input box in the field page." But which bit exactly in the above code is the twig variable code?  
> **username_0**: All the code in the `{% set %}` bits. So everything before `{% if image | length %}`  

---

