Getting the image dimensions in Smarty

  Previous article Next article  

Getting the image dimensions in Smarty

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.6
  Last updated: 18-11-2017
  Comments: 0
  http://cms.ms/OUCX

Using the height and width of the images and thumbnails in your Gallery templates should be pretty straightforward, not? Well I guess it wasn't... Until now!

The method described here originates from the IDT blog and was written in 2011 by Manuel. The tutorial there doesn't work anymore with the latest CMS Made Simple™ releases due to the Smarty security settings.

  How to use

1. How can we get the image sizes?

We use the getimagesize PHP function for this!

But in the latest Smarty releases due to security settings PHP functions aren't available by default...
If you do want to use PHP functions, you have to enable them by adding this line to your CMSMS config.php file:

$config['permissive_smarty'] = 1;

This config variable loosens some of the security configuration for smarty templates. Particularly enabling this option allows the use of any PHP function as a Smarty plugin. You better not use this option if you are allowing content to be submitted for display on your website from untrusted sources! If the function works without this line, you better not add it!


We now can use the getimagesize function with the foreach loop!

{foreach from=$images item=image}

  {getimagesize($image->file)}

{/foreach}

As this outputs an array, we need to use the print_r modifier to see the output the PHP function generates.

<pre>{getimagesize($image->file)|print_r}</pre>

Using the print_r modifier, we get to see the Array content:

Array (
  [0] => 385
  [1] => 100
  [2] => 2
  [3] => width="385" height="100"
  [bits] => 8
  [channels] => 3
  [mime] => image/jpeg
)
1

2. Storing the getimagesize output in an array

Seeing the output using print_r is all fine and dandy but we can't use the values yet in our template just yet!
We need to store the values generated by the getimagesize modifier in an array so we can use them later on.
To achieve this, we assign the output of the getimagesize to a variable (actually it's an array but PHP takes care of this for you automatically)

{$imagesize=getimagesize($image->file)}

Note: You can change $image->file to $image->thumb if you are after the thumbnail sizes.


3. Using the values we need in our template

All the values are now stored in the $imagesize array.
To use the values in our template we can now simply call $imagesize[##THE VALUE YOU WANT TO USE##]

Width in pixels: {$imagesize[0]}
Height in pixels: {$imagesize[1]}
Image type: {$imagesize[2]}
width="xxx" height="yyy": {$imagesize[3]}
etc...


4. Lets use it!!

Now we can add $imagesize[#] in the Gallery template like:

<img src={$image->file} {$imagesize[3]} alt="" />

The HTML output should be:

<img src="uploads/Gallery/image.jpg" width="385" height="100" alt="" />

  Working example

We take this image:

And do:

{$image_test = 'path/to/image.jpg'}
{$imagesize = getimagesize($image_test)}
<pre>{getimagesize($image_test)|print_r}</pre>

The output is:

Array
(
    [0] => 400
    [1] => 320
    [2] => 2
    [3] => width="400" height="320"
    [bits] => 8
    [channels] => 3
    [mime] => image/jpeg
)
1




CMS Made Simple 2.2.5 - Tutorials, tips and tricks - CMSMS 2.2.5

Getting the image dimensions in Smarty

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.6
  Last updated: 18-11-2017
  Comments: 0
  http://cms.ms/OUCX