Getting the image dimensions in smarty

[manuel]

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!

Note: the codes below are supposed to be located inside the main "foreach" in your gallery template!

Code: Select all

{foreach from=$images item=image}

1. How can we get the image sizes using a php modifier?

We use the getimagesize modifier for this:

Code: Select all

{$image->file|getimagesize}

This returns an Array containing all necessary information:

Code: Select all

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

ps: you can see the contents of the array generated by the "getimagesize modifier" by using:

Code: Select all

{$image->file|getimagesize|@print_r}

2. Getting the values out of the array and storing them in variables.

Below you will find the "cut and paste" code that will provide you with separate variables for the height and width of your full size images in the gallery module.
(change the "i" variable, the "getimagesizeval" and change "$image->file" to "$image->thumb" for the thumbnail sizes)

Code: Select all

{assign var="i" value=0}
{foreach from=$image->file|getimagesize item="image"}
{assign var="i" value=$i+1}
{capture assign="getimagesizeval"}getimagesizeval{$i}{/capture}{capture assign="$getimagesizeval"}{$image}{/capture}
{/foreach}

If you have correctly placed the code above inside of the main foreach loop in your gallery template, this will result in the following variables being available to use in your templates:

Code: Select all

getimagesizeval1 = 385
getimagesizeval2 = 100
getimagesizeval3 = 2
getimagesizeval4 = width="385" height="100"
getimagesizeval5 = 8
getimagesizeval6 = 3
getimagesizeval7 = image/jpeg

If you have something to share, please don't hold back!
You can also find this article on the i-do-this blog:
http://www.i-do-this.com/blog/49/Gettin ... -in-smarty

Greetings,
Manuel

[FletcherT]

I'm slowly picking up the language. I've been trying to figure out how to store the in variables, until now! Hah. Thanks so much.

[manuel]

Hi FletcherT,

Glad it helped you out!
You can find the official documentation on "assign" here:
http://www.smarty.net/docs/en/language. ... assign.tpl

The most important tips for someone new to smarty (i can think of) is to use {$yourvariable|@print_r} to find out the contents of the various variables and to use {get_template_vars} on your pages to find out the full list of available variables.

Greetings,
Manuel

[manuel]

To use this with custom Field Definitions in the News module you have to capture the full URL first as the custom Field Definitions are "Files", not "Images"...

(ps: "achtergrond_afbeelding" is the name of the custom Field Definition, replace that with your own...)

Code: Select all

{capture assign="bgimg"}{$entry->file_location}/{$entry->achtergrond_afbeelding}{/capture}
{assign var="i" value=0}
{foreach from=$bgimg|getimagesize item="image"}
{assign var="i" value=$i+1}
{capture assign="getimagesizeval"}getimagesizeval{$i}{/capture}
{capture assign="$getimagesizeval"}{$image}{/capture} {/foreach}

Greetings,
Manuel

[brutusmaximus]

The tutorial is nice, but it didn't work out for me. It only outputted the the names of the vars instead of the values. Below the code that worked out for me. I added extra comments for (smarty beginners).

Code: Select all

{capture assign="bgimg"}uploads/{$item->imgSrc}{/capture}
            
// Start 'counter' var with value 0
{assign var="i" value=0}

// Start loop 
{foreach from=$bgimg|getimagesize item="image_attr"}

    // Increment var i + 1 (value of i is now: 1)
    {assign var="i" value=$i+1}

    // capture image attribute values
    {capture assign="imgAttrValue"}{$image_attr}{/capture}

    // assign values to imgAttrName$i 
    //($i will be replaced with number of i)
    {assign var="imgAttrName$i" value="$imgAttrValue"}

{/foreach}

// use following vars
{$imgAttrName1}
{$imgAttrName2}
{$imgAttrName3}
{$imgAttrName4}
{$imgAttrName5}
{$imgAttrName6}
{$imgAttrName7}

[manuel]

Dear brutusmaximus,

Please take a look at the article, Calguy1000 pointed out we could use php functions instead of php modifiers so i've made some serious changes to the article:
http://www.i-do-this.com/blog/49/Gettin ... -in-smarty

(might need to hit Ctrl+F5 to refresh)

Greetings,
Manuel