Using IMM with existing Xataface install

[aidan]

Hello,
I have already installed Xataface and built a simple application with it. In my database application I am storing images in the db table (using method 2 - images stored in file system). I want to add automatic image resizing functionality to this application so that's how I came across IMM. But I haven't figured out how to integrate the IMM functionality with my existing Xataface application. The way I'd like it to work is like this: the user uploads an image file using the standard file upload widget , it gets resized automatically so there is a thumbnail image in addition to the original size image. On the individual record display I would show the thumbnail images that have been added to that particular record in the left column. The thumbnail images would link to the full size images.

Any pointers would be very helpful indeed.
Regards,
Aidan Curran

[shannah]

Hi Aidan,

You only need to use a subset of IMM. Copy only the "files" directory into your application directory.

Make sure that the files/photos directory is writable by the webserver (this is where you'll store your images. Also make sure that the files/cache directory is writable by the webserver. This is where the cached resized images are stored.

Make a small change to the files/.htaccess file :
Change
RewriteBase /files
to the path to the files directory in the web server.
e.g.
if the files directory is at http://example.com/myapp/files, then you would change it to
RewriteBase /myapp/files

Now to test if it is working. Copy some images into your files/photos directory. And point your webbrowser to the files directory.
e.g. http://example.com/myapp/files

This should give you a bare-bones gallery that allows you to resize your images.

All this gallery does is gives you an interactive way to resize your images. But you can also get a resized version of any image in the photos directory by appending get parameters to the path. e.g.
http://example.com/myapp/files/photos/m ... x_width=50


Finally, you need to tell Xataface that you want to use the files/photos directory to store your images.

In your fields.ini file, for your image field add:

savepath=files/photos
url=files/photos

Now in your templates you'll be able to show resized versions of any image:

<img src="{$record->val('image')}?max_width=50" />

This is a bit rushed but hopefully it puts you on the right path.

-Steve

[aidan]

Thank you Steve - I will give this a go.

[shannah]

Oops.. noticed a typo in my example code. You would use

Code: Select all

<img>


To show resized images in your templates

not

Code: Select all

<img>


[aidan]

Well it's been 3 months until I finally implemented this because the project was on hold but it worked perfectly - instructions were spot on - Thanks!

(I do have another question now about how to delete an image but I'll post that in a separate thread.)

Aidan

[neotrode]

This old thread helped me a lot. However, could you guide me to refining this a bit more?
It would be nice to have the following features:
- Uploaded image is saved to the folder in original size but the filename is appended with an aribtrary 10 digit number to avoid duplicate filenames overriding the previous file.
- An automatic copy of the image file is saved at a reduced size

When coded, maybe with a parameter in the fields.ini like this:
[image_file]
Type = container
widget:type = file
allowed_extensions = jpg,png,gif,jpeg
savepath=files/photos
url=files/photos
appendrandomname=10
makethumbnail=yes
thumbnailsize=200x200

Any chance you can offer some guidance on this?

Thanks in advance.

-Frank

[shannah]

Depending on your needs, this may not be necessary. Xataface already provides collision protection for file names. And doesn't delete files unless you manually do it. You can test it out... upload a file twice... you'll see that the second one has a number appended to the name and the first one will still exist on the file system.

-Steve

[neotrode]

Thanks Steve. I should have given it a go and see what happens rather than assume. I like it. It does the job as you said.
What about the thumbnail feature. Is there a way to make it a parameter call in the fields.ini. This way two copies are kept. One with the original filename (or extended name with the extra numbers), the other with a prefix to it like "thumb_". Or...Simply have the same filename and save it in a sub folder called "thumbs". Either way, it would be nice to simply have a call in the fields.ini.

How easy is it to create new parameters in the fields.ini and link a function to it? I guess that is my question.

[neotrode]

Ah! I found it. I could add the duplicate file and resize it code (to make thumbnails) by adding the code to the afterSave() function of the ImagesBaseClass.php in the "tables" folder. Brilliant!

[shannah]

Glad you got it to work.

For the sake of others who may want to do the same thing, can you post the afterSave() method (or at least relevant portions).

-Steve

[neotrode]

Sure thing...

First I created the delegate file referring to the table in question. In that php file it simply contained this:

Code: Select all

<?
import('tables/ImagesBaseClass.php');
class tables_account_images extends tables_ImagesBaseClass {}
?>


For the file ImagesBaseClass.php (found in the table folder) I did this.

Code: Select all

<?
   class tables_ImagesBaseClass {
      function afterSave(&$record){
         $imageField =& $record->_table->getField('image');
              // gets the field definition of the image field for the current table.
         $savepath = $imageField['savepath'];
              // path to the directory where images are saved for this field.
         if ( !$record->val('image') ) return;
              // Note that if no image is set in this record, we don't need to resize anything
         
         if ( isset($_FILES['image']['name']) ){
              // A new image has just been uploaded, so we resize it.
                        //  I like to use the Imagemagick CONVERT command for simplicity.

                        // This section saves a copy of the image as a thumbnail (scaled by the value labeled in the fields.ini file), and then prefixed with a "th_" before it.
            $ResizeCommand= "convert " . $savepath . "/". $record->val('image') . " -resize " . $imageField['thumbsize'] . "\> " . $savepath . "/th_". $record->val('image');
            system($ResizeCommand);
         }
           
      }

   }
?>


In the fields.ini, I created my own parameter to reflect the thumbnail size:

Code: Select all

[image_thumbnail]
widget:type=hidden
validators:required=0

[image]
Type = container
widget:type = file
allowed_extensions = jpg,png,gif,jpeg
thumbsize=200x200
savepath=files/photos
url=files/photos



Short and simple.

Edit 1/19/2011: I forgot to mention... This relies on the installation of Imagemagick too. Thus the use of the "CONVERT" command in the system call.