Image Transforms - Image not processed until second page refresh

Question

I'm new to Craft, and am not sure whether I've got something weird happening or if what I'm experiencing is expected behavior.

I notice that when I add new entries containing image assets that get transformed (using a control panel transform in this case), that the images don't get transformed until the (template) page is loaded a second time. Therefore, each new page contains empty images and alt-text on its first load. Once I refresh the page, the images appear as expected.

Is this expected behavior? Right now this requires me to visit the page of every entry I create, in order to 'seed' it for use.

Not a deal breaker, but I'm just curious whether there's something I'm doing wrong on my end.

Answer 1

In your config file, set generateTransformsBeforePageLoad to true:

general.php:

return array(
    //other configs
    'generateTransformsBeforePageLoad' => true
);

This will trigger craft to generate and save transforms ahead of loading the page, as explained in the documentation here, this is will also work if you're using a plugin to provide the images.

Answer 2

I'm having this problem too. This can't be expected behaviour, can it?

EDIT (SOLVED):

I've learned from MildlyGeeky in the Craft Discord server that this issue is caused by Twig being picky about transforms used in inline CSS styles. It can be resolved by making the transform into a variable and applying the "|raw" filter to it, thus:

{{ transformVariableName|raw }}