Image transforms

Ad Wizard now supports image transforms, 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...

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