Forums / Developer / Image Conversion on the fly

Image Conversion on the fly

Author Message

Raghu Rao

Wednesday 27 October 2010 7:31:20 pm

Hi there, I am very much new to using ez publish and to the community. Learning and enjoying though :-). Following is the scenario and questions.

Scenario:

 

I created separate siteaccess for one of the sites to serve content for mobile handsets. Problem is with images. Not all handsets are of the same width and height. So i built an interface to get the handset width and height. Now i need a way to resize the images on the fly based on the handset width and height so that they can be rendered properly.

 

If this was in PHP i have used imagemagick convert command to resize the image and dropped the resized file in a DIR. But using EZPUb how can i achieve this. Reason i ask, the place where my clients site is hosted does not have imagemagick.

 

Ideally, this is what i would like to happen.

 

1. Create a custom php template operator

 

2. Pass source path, file name, width, height, destination path

 

3. Now, the operator should take care of converting the image based on the image processing lib available (GD/ImageMagick)

 

4. Drop the resized/converted image in a destination folder provided

 

5. Return true/false

 

My understanding is, ez publish (ezimage) has a process of finding out what library is available for image manipulation and uses it accordingly.

 

Questions

 

1. Is it possible for me to mimic/simulate the same functionality as ezimage, in a way, that my template operator finds out what lib is available and use it accordingly?

 

2. If its possible HOW?

 

3. If its NOT possible then how can i dynamically resize/convert the images on the fly. Can’t use Filters here as we don’t know the sizes of screen until the request comes in.

 

4. Is there any better approach than what i mentioned above

Thanks in advance guys

Cheers

RD

Romeo Antony

Thursday 28 October 2010 12:13:59 am

Hi Raghu , Warm welcome to ez community.

for image manipulation you can use GD or image magic. Try searcgin on ez forums about image magic .

try to read this file ezdir/settings/image.ini.php file.

Also read explore ezdir/settings/siteaccess/yourmobsite/image.ini.append.php

An example to resize images are

like below

{attribute_view_gui attribute=$node.data_map.image image_class="mobile_handset"}

/* configure the alias array in image.ini in your mobile site accesss */

AliasList[]=mobile_handset

/* define the configuaration block *

[mobile_handset]
Reference=
Filters[]
Filters[]=geometry/scaledownonly=210;190
Filters[]=geometry/crop=200;180;0;0

so in above you wll see the the ezimage property scale into width, height 210px,190px.

and crop the image to 200,180.

u can define any properties that image magic support in your site access image.ini or global override.

read on read on about ezp.

Regards

Romeo

Nicolas Pastorino

Thursday 28 October 2010 1:44:23 am

Hi Raghu,

Building off what Romeo explained, eZ Publish is able to use both imagemagick and GD for processing images. This needs to be configured in image.ini, and can be done per siteaccess. This also applies to the various image sizes and filters (called 'aliases' in the eZ Publish terminology).

One can imagine that one siteaccess is created per mobile handset type, where the content of image.ini slightly varies to match the handset's screen capabilities.
Another option would be to have one single siteaccess for all types of mobile devices, but place the discriminating logic within the templates themselves : when displaying an image, and provided you have at disposal the type of device currently requesting the page, you can pass different values for the image_class parameter (synonym of 'alias' here ):

{switch match=$deviceType}     
    {case match='iphone'}        
        {attribute_view_gui attribute=$node.data_map.image image_class="small_iphone"}    
    {/case}     
    {case match='htcdesire'}
        {attribute_view_gui attribute=$node.data_map.image image_class="small_htcdesire"}    
    {/case}
    {case}
        {attribute_view_gui attribute=$node.data_map.image image_class="small_mobile"}    
    {/case}
{/switch}

Which could be simplified into (just occured to me), in case $deviceType information is properly normallized :

{attribute_view_gui attribute=$node.data_map.image image_class=concat( "small_", $deviceType )}

Let us know how you are grasping this part of eZ,
Cheers,

PS : You may find this useful : http://doc.ez.no/eZ-Publish/Technical-manual/4.x/Reference/Configuration-files/image.ini

--
Nicolas Pastorino
Director Community - eZ
Member of the Community Project Board

eZ Publish Community on twitter: http://twitter.com/ezcommunity

t : http://twitter.com/jeanvoye
G+ : http://plus.tl/jeanvoye

Raghu Rao

Monday 01 November 2010 2:52:27 pm

Thanks guys, will look into it and i guess come back with more questions :-)

Cheers

R