<p>Craft will make the image transform the first time the template is loaded in the browser and the <code>getUrl()</code> is called. The image will at first be saved in a temporary directory, then moved into a sub-directory in your assets folder. The subdirectory will be descriptively named according to the type of transform. For example, if my template calls for a 500 x 500 center-center crop at 75% quality, it will be saved in <code>/uploads/_500x500_crop_center-center_75/img.jpg</code>.</p>

<p>This works similarly when using a CDN like S3 or Google Cloud. </p>

CC BY-SA 3.0
2015-10-06T18:03:21.230Z
ok, that makes sense, but when I load the template in the browser the transform subfolder is not created.

I have tried updating my image assets index.
seth
CC BY-SA 3.0
2015-10-06T18:04:49.527Z
Do you have your transform defined in the template or in the control panel?  If it is in the template, you should not add quotes around the transform name: `{{ asset.getUrl(teamImage) }}`
Aaron Berkowitz
CC BY-SA 3.0
2015-10-06T18:07:09.767Z
I have it defined in the CP.
seth
CC BY-SA 3.0
2015-10-06T18:11:13.397Z
Ok! When you inspect the element in the browser, is it showing the original image url or does it look different? Make sure you have [devMode](http://buildwithcraft.com/docs/config-settings#devMode) on too to see if there are any other errors happening.
Aaron Berkowitz
CC BY-SA 3.0
2015-10-06T18:16:51.393Z
ok, got it sorted. my intended `entry` variable was actually `teamMember`. doh.
seth
CC BY-SA 3.0
2015-10-06T18:17:20.773Z
Ah. Glad you got it sorted out!
Aaron Berkowitz
CC BY-SA 3.0
2015-10-06T19:40:47.913Z
Also see this for reference: http://buildwithcraft.com/docs/config-settings#generateTransformsBeforePageLoad
Rick
CC BY-SA 4.0
2018-09-08T21:18:51.463Z
@AaronBerkowitz Your valuable explanation should go into the [docs](https://docs.craftcms.com/v3/image-transforms.html).
Crafty Cat
CC BY-SA 3.0
2015-10-06T17:59:36.057Z
2015-10-06T17:59:36.057Z
Aaron Berkowitz
<p>I created an image transform called <code>teamImage</code>. My template code is below. </p>

<p>I want this transform to be created when I upload an image within a <code>Team</code> entry. </p>

<p><em><code>Team</code> has it's own asset folder.</em></p>

<p>My questions is how does craft know when to create this transform and where in the directory does it create it?</p>

<pre><code>{% for asset in entry.teamImage %}
    &lt;a href="{{ entry.url }}"&gt;
         &lt;img src="{{ asset.getUrl('teamImage') }}" alt="{{ asset.title }}" /&gt;
    &lt;/a&gt;
{% endfor %}
</code></pre>

<image-transforms>
How does Craft know when to generate an Image Transform
# How does Craft know when to generate an Image Transform

(Asked by: username_0 on 2015-10-06)

I created an image transform called teamImage. My template code is below. 
I want this transform to be created when I upload an image within a Team entry. 
Team has it's own asset folder.
My questions is how does craft know when to create this transform and where in the directory does it create it?
{% for asset in entry.teamImage %}
    
         
    
{% endfor %}

**Tags:** image-transforms

---

## 1 answers

### Answer by username_1 on 2015-10-06. Score: 4 | Accepted answer

Craft will make the image transform the first time the template is loaded in the browser and the `getUrl()` is called. The image will at first be saved in a temporary directory, then moved into a sub-directory in your assets folder. The subdirectory will be descriptively named according to the type of transform. For example, if my template calls for a 500 x 500 center-center crop at 75% quality, it will be saved in `/uploads/_500x500_crop_center-center_75/img.jpg`.

This works similarly when using a CDN like S3 or Google Cloud.

> **Comments:**
> **username_0**: ok, that makes sense, but when I load the template in the browser the transform subfolder is not created.  I have tried updating my image assets index.  
> **username_1**: Do you have your transform defined in the template or in the control panel?  If it is in the template, you should not add quotes around the transform name: `{{ asset.getUrl(teamImage) }}`  
> **username_0**: I have it defined in the CP.  
> **username_1**: Ok! When you inspect the element in the browser, is it showing the original image url or does it look different? Make sure you have [devMode](http://buildwithcraft.com/docs/config-settings#devMode) on too to see if there are any other errors happening.  
> **username_0**: ok, got it sorted. my intended `entry` variable was actually `teamMember`. doh.  
> **username_1**: Ah. Glad you got it sorted out!  
> **username_2**: Also see this for reference: http://buildwithcraft.com/docs/config-settings#generateTransformsBeforePageLoad  
> **username_3**: @AaronBerkowitz Your valuable explanation should go into the [docs](https://docs.craftcms.com/v3/image-transforms.html).  

---

