Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-03T18:42:55.170Z
Answers.Text: 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?
Answers.UserDisplayName: rjdvsk
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-03T19:15:47.730Z
Answers.Text: All the code in the `{% set %}` bits. So everything before `{% if image | length %}`
Answers.UserDisplayName: mention79
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-02T16:03:58.230Z
Answers.LastActivityDate: 2017-02-02T16:03:58.230Z
Answers.UserDisplayName: mention79
Body: <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>
  
Tags: <templating><plugin-imager>
Title: Preparse responsive images
ThreadText: # Preparse responsive images
  
  (Asked by: username_0 on 2017-02-02)
  
  I'm trying to get [Preparse Field for Craft](https://github.com/aelvan/Preparse-Field-Craft) to work on some responsive images set up with [Imager for Craft](https://github.com/aelvan/Imager-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 %}
  
  ```
  
  **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 %}`  
  
  ---
  
  