1

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?

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

<?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
    '*' => [
        // 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,
    ],
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.