$49

Ad Wizard

Documentation  •  Changelog

Documentation

Image transforms

Ad Wizard now supports image transforms! This was introduced as part of the larger attribute customization feature.

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.

  • transform: (string|object) Specify the image transform to apply.
  • retina: (bool) Whether to render ad for a retina screen.

Basic Usage

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

Complete Transform Support

Since Ad Wizard utilizes the native transform technology, you can also define a transform in your template...

{{ 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
    }
}) }}