9

In Craft you can do two types of image transforms:

1. Control Panel Transforms:

Via: Settings → Assets → Image Transforms

2. Inline Transforms in your Templates

I’m currently using 100% inline transforms as they can be version controlled and seem to work better across different dev environments.

Are there any benefits of using Control Panel Transforms over using Inline Template Transforms in your Templates?

9

Both methods essentially do exactly the same thing to the image however there are two advantages to pre-defining them in the control panel:

  1. You can just call a transform handle in your templates instead of having to define the whole transform model
  2. They are then available to be used in supported field types e.g. in the Rich Text field type you can select an existing image transform when inserting an image

As you already mentioned the advantages that I can see to defining them in the templates are version control and the lack of needing a database.

I've started defining them all in the templates for the development phase and then when we move to staging I go and add all the ones we're using to the control panel.

|improve this answer|||||
  • The Rich Text Field benefit is a very valid point! – jnowland Jun 13 '14 at 13:28
  • 1
    I've yet to find a client who will use it but still, its a lovely feature! – Josh Angell Jun 13 '14 at 13:29
6

Technical:

The only technical difference is, that predefined-transforms have a different directory structure:

/asset-folder/_transform-name/image.jpg

whereas inline-transforms use dimensions:

/asset-folder/_300x100/image.jpg

Personally I like the first one more.

.

Users:

The difference for users is, that only predefined-transforms can be selected in RichText-fields.

.

Development:

I often use just a few transforms on my projects, so I find maintaining them from the backend easier.

But you could just as well create yourself an include-file to have everything in one place:

/_includes/image_transforms.html:

{% set transform_1 = {
    mode: 'crop',
    width: 100,
    height: 100,
    quality: 100,
    position: 'top-center'
} %}

{% set transform_2 = {
    mode: 'crop',
    width: 50,
    height: 50,
    quality: 75,
    position: 'center-center'
} %}

/some_template.html:

{% include "_includes/image_transforms" %}

<img src="{{ asset.getUrl(transform_1) }}">

<img src="{{ asset.getUrl(transform_2) }}">
|improve this answer|||||
  • The development section here is a little wrong - you can't set variables in an include and have them available in the template that includes the include (includes receive a copy of the context, not the actual context, to work in) – Jeremy Daalder Feb 11 '16 at 4:26
3

If you need the image transforms in Rich Text fields, you have to define them in the control panel, as Josh said. Apart from that, I feel that it's much more flexible to define them at the template level.

The main advantage is that you can then make the transform dynamic, based on the current template or the current content that is displayed. One example is being able to do transforms based on the users device/screen size. Another is being able to give the client the ability to define crop positions on a per image basis.

|improve this answer|||||
2

They should effectively be doing the same thing. Control Panel Transforms are simply predefined transforms. In both cases, they should perform equally after the first render because Craft stores the transformed image for later reuse.

|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.