How to use SuperSizer with module images

Postdate: April 9 2012
Category: Created Modules
Applies to: 2.0x

This is about using the great plugin SuperSizer with your images to scale, crop, manipulate and intergrate them into your templates to use with your modules.


1. Get the plugin

Get the plugin SuperSizer from the dev page.
Copy the plugin to /plugins/

2. Integrate it into the detail template

At first we determine if an uploaded image exists.
Note this in your template:

{if $item->foto ne ''}
...
{/if}

Between the if statment, we call Supersizer inside an img tag:

<img src="{supersizer path=$item->foto strip_tags='true' width='150' url='1'}" />

Note that we use strip_tags=true to get rid of the HTML attributes of the IMG tag, and our image would have the dimensions width:150px.

Another approach

First we initialize the image field to get access to the full properties like url, width, height...

{if $item->foto ne ''}{$item->foto->fileobject->load_file_info()}{/if}

Then we call the image with the path only, but we have to prepend uploads/ first (with assign):

{assign var=imgpath value="uploads/´$item->foto->fileobject->url´"}
<img src="{supersizer path=$imgpath width='150' url='1'}" />

Note that those are backticks ´´ not apostrophs!

With all properties loaded you have access to properties like width: $item->foto->fileobject->width or  $item->foto->fileobject->get_thumb_url() ... 

Words in strong green are values that need be adjusted according to the fieldnames of your module!