Image transforms

Ad Wizard now supports image transforms (opens new window), as part of the larger attribute customization functionality.

Within the options parameter of each function, you can specify an image object with something similar to this...

{
    'image': {
        'transform': 'myTransform',
        'retina': true
    }
}

These are your image options:

Options	Type	Description
transform	string or array	Specify the image transform to apply.
retina	bool	Whether to render Ad for a retina screen.

Basic Usage

A specific Ad...

{{ craft.adWizard.displayAd(99, {
    'image': {
        'transform': 'myTransform',
        'retina': true
    }
}) }}

Randomly selected Ad from a specified group...

{{ craft.adWizard.randomizeAdGroup('myGroup', {
    'image': {
        'transform': 'myTransform',
        'retina': true
    }
}) }}

Complete Transform Support

Internally, Ad Wizard is using Craft's native transform technology. This means it's also possible to define a transform in your template... (opens new window)

{{ craft.adWizard.randomizeAdGroup('myGroup', {
    'image': {
        'transform': {
            mode: 'crop',
            width: 100,
            height: 100,
            quality: 75,
            position: 'top-center'
        }
    }
}) }}

Retina Support

When using an image transform, it's also possible to specify a retina output.

{{ craft.adWizard.randomizeAdGroup('myGroup', {
    'image': {
        'transform': 'myTransform',
        'retina': true
    }
}) }}

If your image is using retina, you'll want to double the Image Transform size. For example, these two snippets will render the exact same image:

As a normal asset (without Ad Wizard)

<img
  src="{{ asset.url('myTransform') }}"
  width="{{ asset.width('myTransform')/2 }}"
  height="{{ asset.height('myTransform')/2 }}"
/>

As a retina Ad (with Ad Wizard)

{{ craft.adWizard.displayAd(99, {
    'image': {
        'transform': 'myTransform',
        'retina': true
    }
}) }}