Why does asset creation not work for hidden images?

Question

Im creating a gallery for Fancybox and only wish to show the first image. The rest are hidden in a container and only referenced so that Fancybox can call on these latter. I've tried two approaches: anchor tag with and without the image tag.

I am sure that this is a recent change as I have been using this technique on earlier craft versions and gettting good results.

<div class="hide">
  <a title="{{ image.title }}" href="{{ image.getUrl('wide') }}" class="fb" rel="fb-{{ ind }}">
    <img src="{{ image.getUrl('wide') }}" title="{{ image.title }}" style="display: block!important" />
  </a>
</div>

The image is generated but it looks like in a temporary location "...cpresources/transforms..." to which Fancybox doesn't recognise.

Answer 1

Set generateTransformsBeforePageLoad in your config/general.php file.

'generateTransformsBeforePageLoad' => true,

Configures Craft to generate new image transforms right when getUrl() is called, rather than when the browser first requests the image.