Image

Extends Object.

Instantiation

You can instantiate a new Image object by supplying a string of the image url:

<?ev
    // new Image() using a url
    var logo = new Image('/portal/web/gateway/content/images/logo.png');
?>

Note: The image must be relative to the site. The image can be within your theme, or in your content media library.

When you instantiate a new Image object you can also pass in the width and/or height by supplying a number:

<?ev
    // new Image() with a width
    var logo = new Image('/portal/web/gateway/content/images/logo.png', 100);
    
    // new Image() with a height
    var logo = new Image('/portal/web/gateway/content/images/logo.png', '', 100);
    
    // new Image() with a width and height
    var logo = new Image('/portal/web/gateway/content/images/logo.png', 100 100);
?>

Construct parameters
urlPath String | Url

If the image supplied is a valid image path, the Image object will return the image object.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png');
?>
width Number (optional)

If you supply a width along with the image, the Image object will return a resized image object.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png', 100);
?>
height Number (optional)

If you supply a height along with the image, the Image object will return a resized image object.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png', '', 100);
?>
maxWidth Number (optional)

If you supply a max-width along with the image, the Image object will return a resized image object.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png', '', '', 100);
?>
maxHeight Number (optional)

If you supply a max-height along with the image, the Image object will return a resized image object.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png', '', '', '', 100);
?>


Properties
width Number

Width property is null if no width is set, otherwise returns the Number object.

height Number

Height property is null if no height is set, otherwise returns the Number object.

maxwidth Number

Max-width property is null if no max-width is set, otherwise returns the Number object.

maxheight Number

Max-height property is null if no max-height is set, otherwise returns the Number object.



Methods
width(Number:value) Image

Set the width you wish to resize your image too.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png');
    logo.width(100);
?>
height(Number:value) Image

Set the height you wish to resize your image too.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png');
    logo.height(100);
?>
maxwidth(Number:value) Image

Set the max-width you wish to resize your image too.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png');
    logo.maxwidth(100);
?>
maxheight(Number:value) Image

Set the max-height you wish to resize your image too.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png');
    logo.maxheight(100);
?>
size(String:dimensions) Image

Set the width and height you wish to resize your image too.

The string is expected to contain two numbers split by a 'x'.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png');
    logo.size('100x100');
?>
src(String:urlPath) Image

Set the source image of the image you wish to resize.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png');
    logo.src('/portal/web/gateway/content/images/logo-new.png');
?>
toString() String

This method returns the relative path to the resized image as a string.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png');
    logo.size('100x100');
    echo(logo.toString());
    // /portal/web/1/content/images/100x100/logo.png
?>
toUrl() Url

This method returns the url object of the image.

<?ev
    var logo = new Image('/portal/web/gateway/content/images/logo.png');
    echo(logo.toUrl().toCdn());
    // //cdn.evance.it/portal/web/1/content/images/100x100/logo.png
?>