<p>Got the solution through Craft support, as well as this similar question: <a href="https://craftcms.stackexchange.com/questions/9186/image-transforms-image-not-processed-until-second-page-refresh">Image Transforms - Image not processed until second page refresh</a></p>

<p>In summary, use the <code>generateTransformsBeforePageLoad</code> settings in Craft CMS.</p>

<p>e.g.
project>config>general.php</p>

<pre><code>&lt;?php
/**
 * General Configuration
 *
 * All of your system's general configuration settings go in here. You can see a
 * list of the available settings in vendor/craftcms/cms/src/config/GeneralConfig.php.
 *
 * @see craft\config\GeneralConfig
 */

return [
    // Global settings
    '*' =&gt; [
        // Default Week Start Day (0 = Sunday, 1 = Monday...)
        'defaultWeekStartDay'  =&gt; 0,

    // Enable CSRF Protection (recommended)
    'enableCsrfProtection' =&gt; true,

    // Whether generated URLs should omit "index.php"
    'omitScriptNameInUrls' =&gt; true,

    // Image variant be created on Asset save (aka BeforePageLoad)
    'generateTransformsBeforePageLoad' =&gt; true,

    // The secure key Craft will use for hashing and encrypting data
    'securityKey'                      =&gt; getenv('SECURITY_KEY'),
],
</code></pre>

<p>To set that in specific environment, e.g. in Live only, copy and paste </p>

<p>'generateTransformsBeforePageLoad' => true, into the desired environment</p>

<p>e.g.</p>

<pre><code>// Live environment settings
    'live' =&gt; [
        'devMode' =&gt; false,
        'generateTransformsBeforePageLoad' =&gt; true,
        'enableTemplateCaching' =&gt; true,
        'allowAutoUpdates' =&gt; false,
    ],
</code></pre>

CC BY-SA 4.0
2019-12-10T02:35:56.663Z
2019-12-12T09:17:20.547Z
2019-12-12T09:17:20.547Z
Ron Lim
<p>For a client site with S3/Cloudfront integration, we are seeing that images will not be able to load for the first time if they have not been generated before. I'm guessing this is because it takes time for the generated thumbnail to be saved to S3 then propagated to Cloudfront, so images will always return nothing the very first time. Is this correct, or are we missing something, or are there workarounds?</p>

<craft3><assets><s3>
Image thumbnail generation (on S3/Cloudfront integration) returns blank when first generated
# Image thumbnail generation (on S3/Cloudfront integration) returns blank when first generated

(Asked by: username_0 on 2019-12-09)

For a client site with S3/Cloudfront integration, we are seeing that images will not be able to load for the first time if they have not been generated before. I'm guessing this is because it takes time for the generated thumbnail to be saved to S3 then propagated to Cloudfront, so images will always return nothing the very first time. Is this correct, or are we missing something, or are there workarounds?

**Tags:** craft3, assets, s3


---

## 1 answers

### Answer by username_0 on 2019-12-10. Score: 2

Got the solution through Craft support, as well as this similar question: Image Transforms - Image not processed until second page refresh
In summary, use the generateTransformsBeforePageLoad settings in Craft CMS.
e.g.
project>config>general.php
 [
        // Default Week Start Day (0 = Sunday, 1 = Monday...)
        'defaultWeekStartDay'  => 0,

    // Enable CSRF Protection (recommended)
    'enableCsrfProtection' => true,

    // Whether generated URLs should omit "index.php"
    'omitScriptNameInUrls' => true,

    // Image variant be created on Asset save (aka BeforePageLoad)
    'generateTransformsBeforePageLoad' => true,

    // The secure key Craft will use for hashing and encrypting data
    'securityKey'                      => getenv('SECURITY_KEY'),
],

To set that in specific environment, e.g. in Live only, copy and paste 
'generateTransformsBeforePageLoad' => true, into the desired environment
e.g.
// Live environment settings
    'live' => [
        'devMode' => false,
        'generateTransformsBeforePageLoad' => true,
        'enableTemplateCaching' => true,
        'allowAutoUpdates' => false,
    ],


---

