Beautiful Pixel

SuperImage plugin, making resizeable uploaded images easy

April 26th, 2006

SuperImage is deprecated, use FlexImage instead.

SuperImage is a plugin that allows you to put image data in your database And retrieve at any size you like. Combine this with page caching and you have a fast and easy way to manage large numbers of uploaded files.

Installation:

ruby script/plugin install http://beautifulpixel.textdriven.com/svn/plugins/super_image/

Prerequisites

RMagick must be installed

Migration

Usage is simple. First, you must create the table used by SuperImage. At a command prompt in the root of your rails app:

ruby script/generate super_image_migration
rake migrate

This will ceate the a table in your database called super_images.

The reason to keep this in a separate table (rather than a field on your users or products tables) is to keep databse bandwidth down since you rarely need the image data when you are retrieving the images parent object.

Controller

In order to view the image you simply need to include the proper module in your controller. This is done with include SuperImagePlugin::Show

We will also add a method to process an uploaded file, creating a new database row for the image.


class MyControllerNameController < ApplicationController
  include SuperImagePlugin::Show
  caches_page :show_image
  def create
    img = SuperImage.create(:data => params[:image][:data])
    redirect_to :action => 'show_image', :id => img
  end
end

include SuperImagePlugin::Show adds the show_image method to your controller. show_image is the action you use to view the images in your database.

The create method takes advantage of the #data= method defined in the SuperImage model which automatically processes an uploaded file and puts it in the database.

The caches_page :show_image allows the result of the queries for image to becached to the file system. This is a good idea because the bandwidth of pulling image data out of your database is high, and the image resample procedure is much slower than simply loading an image from the filesystem. This way its the image is only processed the first time it is called at a particular size, every request after that will retrieve the cached version at lightning speed.

View

We still need a form to get uploaded images into the database. Create a new html file in app/views/my_controller_name/new.rhtml with the following simple form:


<%= form_tag({:action => 'create'}, {:multipart => true})%>
  <%= file_field 'image', 'data' %>
  <%= submit_tag %>
<%= end_form_tag %>

Upload

Now find a file on your hard drive and upload via the form at /my_controller_name/new. You should be redirected to your image, displayed in the browser.

Using on a page with URL helpers

To include a link to an image in your view, simply use the #show_image action of your images controller:

<%= image_tag(url_for(:controller => 'my_controller_name',
                      :action     => 'show_image',
                      :id         => @img.id,       # The id of the image you want to show.
                      :size       => 175            # The size of the image you want returned.
              ), 
              :alt => "Image #{@img.id}") %>

Or with a route

map.my_image 'user_photos/:id/:size',
  :controller => 'my_images_controller',
  :action => 'show_image',
  :size => nil

<%= image_tag my_image_url(:id => 123), :alt => 'it's an image!' %>
<%= image_tag my_image_url(:id => 12, :size => 100) %>

Or simply navigate to /my_controller_name/show_image/1. And to use the size constraint navigate to /my_controller_name/show_image/1?size=120. You can write custom url routes to make the size parameter prettier, like in the above route which would generate /user_photos/12/100 for the image url.

The size parameter is the size of the largest dimension of the image. For example, a 640×480 image is requested with :size => 100. The image will be rendered at 100×75. Aspect Ratio is always preserved.

Remember that SuperImage inherits from ActiveRecord and works just like every other model in Rails. It simply has a small amount of added functionality. This also means you can base your own models around SuperImage, just inherit form SuperImage instead of ActiveRecord::Base.

Posted by Squeegy Filed in

76 Responses to “SuperImage plugin, making resizeable uploaded images easy”

Vicent Says:
June 28th, 2007 at 11:05 PM
It seems great and easy, I’m going to try it; thanks a lot.
Adrian Wackernah Says:
June 28th, 2007 at 11:05 PM
But is this the right way for storing a large number of hires images? Before I learned that storing photos with up to 100 MB of size in a database table would slow down the database very much, so many told me to store them better in the filesystem. Has there anything changed in the past?
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
If you’re really storing 100 MB images, then this really is not the right solution. If you want to store many images up to 1 MB or so this should work fine.

And as long as you do a:
caches_page :show_image
Your performance problems should be minimal because you are only pulling the image out of the database once per requested size. Form then on the image is served via rails wicked fast cache.
Nathan Says:
June 28th, 2007 at 11:05 PM
Sorry for the basic question, but in the above example where “caches_page :show_image”, where exactly is the image cached? Does the caching take place only in a production environment, or does it also take place in the development environment? Thanks for your help!
Nathan Says:
June 28th, 2007 at 11:05 PM
Let me answer my own questions: by default the image is only cached in a production environment. You can make the development environment cache by going into “config > environments > development.rb” and changing the following line:

config.action_controller.perform_caching = true

Once this takes place, the image is saved in the “cache” folder (I know, how weird :)
Justin Davies Says:
June 28th, 2007 at 11:05 PM
When using SuperImage, I get the following when trying to save the image (in the create method):

undefined method `read’ for {“data”=>#<file: />}:HashWithIndifferentAccess

Which refers to:
```
/vendor/plugins/super_image/lib/super_image.rb:38:in `data='
```
Any ideas ? Sorry, I am a newb in RoR, so it might just be me being stupid.

Justin
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
My guess is that you are passing the wrong bit into the data=() method. You’re using a Hash as the image data, which is why you are getting this error. If you have a form like:
```
<%= file_field 'image', 'data' %>
```
Then you need to assign the image data like:
```
  img = Image.new
  img.data = params[:image][:data]
```
This will not work:
```
img.data = params[:image]
```
because params[:image] is just a hash. The actual image data is under the :data part of params[:image].
Justin Davies Says:
June 28th, 2007 at 11:05 PM
Alex,

Thanks mate, that was exactly the problem I had.

Justin
Rob Lacey Says:
June 28th, 2007 at 11:05 PM
I’ve just tried this out and I am having a few problems to be honest.

I have uploaded a few images, and I can see the entries in the database but when I go to use the show_image method I get the following error. I got the latest copy of the Plugin as above, so I am wondering if I have gone wrong somewhere.

uninitialized class variable @@super_image_class in SuperImagePlugin::Show::ClassMethods

Cheers

RobL
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
Yeah… my bad. The bug was occuring if you didn’t override the super_image_class with:
```
image_class FooImage
```
And in my test app, I had it overridden and didn’t catch it. Now we see if @@super_image_class is defined first, and if it isn’t, then we use SuperImage as the default.

Update your plugin to get the latest (hopefully) error free version.
RobL Says:
June 28th, 2007 at 11:05 PM
Thanks for that, I have tried that and its working fine now.

:)
Brady Says:
June 28th, 2007 at 11:05 PM
I’ve been trying install this plugin and I get an error every time:

ruby: No such file or directory—script/plugin (LoadError)

I’m running windows xp with the lates install of ruby. Is the file no longer on the server?
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
Plugins are not global like gems are. You need to install the plugin into the rails app you want to use it in. So you must call the plugin script from the root of your Rails app.

If this is what you are doing, then for some reason ruby can’t find script/plugin, and you probably need to recreate the skeletion of your rails app. Check to see if there is a file called plugin at my_rails_app/script/plugin
Pratik Says:
June 28th, 2007 at 11:05 PM
Does this work with Rails 1.1.2 ?
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
yes it works with 1.1.2 just fine
David Lelong Says:
June 28th, 2007 at 11:05 PM
Can I associate multiple images with a record in another table? For example, I have a Projects table, and each Project will have multiple images so I need to be able to associate images to a Project.
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
There is some info on the bottom of http://beautifulpixel.com/super_image/index.html that talks about extension and customization.

But in short you have 2 options.

1. extend SuperImage class
```
  #app/models/super_image.rb
  model SuperImage
    belongs_to :project
  end
```
now add a project_id column to super_images table, and of course Project should has_many :super_images

2. Create your own SuperImage class
```
  class ProjectImage < ActiveRecord::Base
    include SuperImagePlugin::SetImage
    belongs_to :project
  end
```
now make sure your db table is project_images and set it up how you want.

And in you image controller:
```
  image_class ProductImage
```
The only field the plugin needs is “data”, other than that, augment the table away and add as much code as you like.
David Lelong Says:
June 28th, 2007 at 11:05 PM
I included the code to create my own SuperImage class:

class ProjectImage < ActiveRecord::Base include SuperImagePlugin::SetImage belongs_to :project end

but when i try to upload an image, it’s still trying to upload the image into the super_images table.

Is there anything else I should change?
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
In the controller that handles the uploading just add:
```
image_class ProjectImage
```
The plugin has to know what class it’s operating on and that is what the image_class macro is for.

David Lelong Says:
June 28th, 2007 at 11:05 PM

I added the line to my controller, but the images are still loading into the super_images table.

Here is the controller that handles the image uploading:

class ProjectImagesController < ApplicationController

  include SuperImagePlugin::Show
  caches_page :show_image
  image_class ProjectImage

  def create
    img = SuperImage.create(:data => params[:image][:data])
    redirect_to :action => 'show_image', :id => img
  end
end

Am I referencing the image_class macro correctly?

Alex Wayne Says:
June 28th, 2007 at 11:05 PM
Oh I see. The problem is that you want ot create a ProjectImage, not a SuperImage. Do this instead:
```
img = ProjectImage.create(:data => params[:image][:data])
```
If you are using a custom class and a custom table, you wont ever use the actual SuperImage class at all.
David Lelong Says:
June 28th, 2007 at 11:05 PM
Can I pass other parameters through ProjectImage.create such as the Project ID so I can associate the image with a specific project?
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
create works exactly the same way as any active record object’s create method. The only magic happens in the data= method which is autamatically called when you pass in a :data clause in your options hash.

Treat SuperImage, or your own classes based on it, just like any other active record objects, except that they have special hadling regarding the data field.
David Lelong Says:
June 28th, 2007 at 11:05 PM
I’m really new at Rails so I’m still getting my ahead around dealing with classes. This is what I have for my create class for uploading an image:
```
  def create
    @project = Project.find(params[:id])
    session[:project_id] = @project.id

    img = ProjectImage.create(:data => params[:image][:data][:project_id])
    redirect_to :action => 'show_image', :id => img
  end
```
I’m trying to get it to take a Project ID parameter and associate it with the image that’s being uploaded. I’m not exactly sure how to do this so any examples would help me.

Thanks.
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
You are only assigning the data field of the record. If you want to add other attributes defines them as a key.

You want something more like:
```
  def create
    img = ProjectImage.create(
            :data       => params[:image][:data],
            :project_id => params[:id]
          )
    redirect_to :action => 'show_image', :id => img
  end
```
You don’t need to retrieve a project record by its id, just to read back its id. Instead just use params[:id] directly.
RobL Says:
June 28th, 2007 at 11:05 PM
I have almost got this implemented as I want it on my first Rails site. I have managed to link product images to my products pages and its looking good. I’ve just started looking at caching as I am keen to make sure this doesn’t slow down everything and I simply get no response when I alter the caching behaviour as above in the config > environments > development.rb file.

The image isn’t displayed at all.

I can see the error in my development log

Errno::EACCES (Permission denied – \/www\/rubyprojects\/www.myblahsite ting.co.uk\/public\/..\/config\/..\/public\/store):

However, I would think this is down to the cache directory not being writable by the webserver more than anything else. However this all looks fine. Anyone else seen this problem?
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
That’s exactly the problem. Make sure that /public is writeable by the user that your webserver is running under. Caching actually write the output of your rails app into the public folder for action caching, so write access is a must.
RobL Says:
June 28th, 2007 at 11:05 PM
Thanks for that, just a bit confused. I expected the cached file to appear in ./tmp/cache rather than ./public/store/(id).html

Looking nice now :)
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
/tmp/cache is not for action caching, it’s for the other forms of caching rails does like fragment caching. Action caching stores the entire output of the request in the public directory so that the next time it’s requested rails doesnt even know about it, and it’s served right from the filesystem.
RobL Says:
June 28th, 2007 at 11:05 PM
This has actually now posed an interesting problem. My intention was to use the plugin to generate multiple thumbnails of one image. It appears and probably correctly so that each image is generated and stored as (id).rhtml in public/store/ however if the size of the image changes it generates another cached image.

The simplest way around this that I can think of wihtout writing a caching mechanism into the plugin is to add multiple multiple ‘show image’ classes to the controller e.g. :show_image_main, :show_image_thumb_small, :show_image_huge so that caching comes directly from the file system in a different location for each size of image.

Does that sound plausable? Not sure how I’d go about implementing it.

Another interesting side effect of the caching is that when you access the image directly in a browser the image data itself is returned and not the rendered image itself, although I would imagine its a simple fix to force apache to return the mime type of .rhtml documents in that particular directory as image/jpeg.
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
The real problem is routing and the way rails cachines things. Query strings, due to the nature of URLs are not part of the file name. So instead of:
```
foo.com/images/show_image/1?size=450x300
```
you need
```
foo.com/images/show/1/450x500/image.jpg
```
Try defining a route like:
```
map.project_image 'images/show/:id/:size/image.jpg',
  :controller => 'images',
  :action => 'show_image'
```
now in your view:
```
<%= image_tag image_url(:id => 123, :size => '450x300') %>
```
This will create a cached file in the location:
```
/public/images/show/1/450x300/image.jpg@
```
This way when you change the size, the folder named by the image size is not found and is generated instead.

The trick is to incorporate any parameters you are using into a named route so they are part of the filename, and not part of the query string. This goes for all rails caching not just SuperImage.

And rails caching just dumps the rendered output byte for byte into the public directory, text/image/pdf doesn’t matter what the format is. Mimetype is derived from the file extension, hence the above route ending in /image.jpg. jpg data served with a jpg extension and all is dandy.

I have this method working on a real project of mine, and it does a flawless job.
David Lelong Says:
June 28th, 2007 at 11:05 PM
I’ve gotten the upload to work successfully and each image is being associated with the correct project. Thanks for your help.

Now, is there anyway to extend show_images to list thumbnails of all the images which contain the same project_id?
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
Just use standard active record associations

add belongs_to :project to app/models/project_image.rb

add has_many :project_images to app/models/project.rb
```
  <% @project.project_images.each do |image| %>
    <%= image_tag(image_url(:id => image, :size => '125x75')) %>
  <% end %>
```
David Lelong Says:
June 28th, 2007 at 11:05 PM
Also, I would like be able to specify how many images appear on a page and be able to paginate.
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
Remember that any SuperImage class is just like any other ActiveRecord object. Associations and paginations are handled exactly the same way as they are with vanilla models that rails provides for each table.

The only difference is the the model has a special method for uploading images, and the controller has a special method for displaying them.

David Lelong Says:
June 28th, 2007 at 11:05 PM

If I add another field (name) to the upload form, the value keeps getting saved as a hash:

def create
    img = ProjectImage.create(
            :data       => params[:image][:data],
            :project_id => params[:project_id],
            :name       => params[:name]
          )
    redirect_to :action => 'show_image', :id => img
end

Do I need to reference the parameter differently?

Alex Wayne Says:
June 28th, 2007 at 11:05 PM

How is your form setup? If it is like this:


  <%= file_field 'image', 'data' %>
  <%= select 'image', 'project_id', [1,2,3] %>
  <%= text_field 'image', 'name' %>

Then you should do:


  def create
    img = ProjectImage.create(
            :data       => params[:image][:data],
            :project_id => params[:image][:project_id],
            :name       => params[:image][:name]
          )
    redirect_to :action => 'show_image', :id => img
  end

All your values from that form will be in the params[:image] hash. Or for brevity, if you want everything in the params[:image] hash to be directly mapped onto the new record:


  def create
    img = ProjectImage.create(params[:image])
    redirect_to :action => 'show_image', :id => img
  end

Which will do exactly the same thing.

David Lelong Says:
June 28th, 2007 at 11:05 PM
With this code:
```
<% @project.project_images.each do |image| %>
  <%= image_tag(image_url(:id => image, :size => '125x75')) %>
<% end %>
```
I’m getting the following error message:
```
undefined method `image_url' for #<#<Class:0x24295cc>:0x24295a4>
```
Am I missing something for image_url? I display images as http://domain:3000/project_images/show_image/15.
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
You probably havent defined a named route for image_url

Add this to config/routes.rb:
```
  map.image 'project_images/show_image/:size/:id/image.jpg',
    :controller => 'project_images',
    :action => 'show_image'
```
Then image_url(:id => 123, :size => '125x75') will produce:

domain.com/project_images/show_image/125x75/15/image.jpg

khangtoh Says:
June 28th, 2007 at 11:05 PM

Alex,

I am trying to integrate this into my app, but I am getting this error in my conroller.

NameError uninitialized constant SuperImagePlugin I had override the class and controller as follows:


class Userimages < ApplicationController
  include SuperImagePlugin::Show
  caches_page :show_image
  image_class UserImages

def create
    img = UserImages.create(
            :data       => params[:image][:data],
            :user_id => session[:user].id
          )
    redirect_to :action => 'show_image', :id => img
  end

end

Alex Wayne Says:
June 28th, 2007 at 11:05 PM
It sounds like the plugin is not properly installed. Be sure you have the latests version fo rails installed and make sure to install the plugin with the ruby script/plugin install command.
khangtoh Says:
June 28th, 2007 at 11:05 PM
I think I had mongrel running and then I start the server and run again and everything is happy now.. Thanks! Great plugins by the way. I was gonna ask you if you would like to work on a small side project for Gizmoojo.com. I intend to use superimage for handling page pics and users’ avatar, drop me an email if you are interested on working that!

Thanks!
Khangtoh Says:
June 28th, 2007 at 11:05 PM
Hey Alex,

I was wondering if there is anyway to use SuperImage with 2 separate class and utilize 2 different tables – eg. one for pics and one for avatars. I tried making 2 classes for each table and but it looks like show_image is only referring to one table but the create is ok, it goes into the correct table. So any idea what is wrong here?
Khangtoh Says:
June 28th, 2007 at 11:05 PM
sorry.. i should have look at the rdoc first.. looks like I need to define a different image_action
Hugh Says:
June 28th, 2007 at 11:05 PM
img = Magick::Image.from_blob(file.read)[0]

That can return nil if no photos are able to be created from the blob. I’m still kindof a newbie at ruby, rails, and rMagic, but here are the changes I made.
```
if file.size > 0
  img = Magick::Image.from_blob(file.read)[0]
  if not img.nil?
    img.format = 'JPG'
    self[:data] = img.to_blob
  end
end
```
I also added this to the module so I could validate against a bad upload.
```
def validate
  if self[:data].nil?
    self.errors.add_to_base "That was an invalid image format." 
  end
end
```
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
Thanks for the tip. Although I couldnt get that to work reliably for me. The validation wasn’t working. I’ll have to take a closer look at this.
David Lelong Says:
June 28th, 2007 at 11:05 PM
This piece of code is working perfectly to return thumbnails of my images:
```
<% @project.project_images.each do |image| %>
    <%= image_tag(image_url(:id => image, :size => '125x75')) %>
  <% end %>
```
How do I return other columns from the project_images table such as “name” or “description” when using this loop?

Thanks.

Alex Wayne Says:
June 28th, 2007 at 11:05 PM

  <% @project.project_images.each do |image| %>
    <%= image_tag(image_url(:id => image, :size => '125x75')) %>
    <h3><%=h image.name %></h3>
    <%=h image.description %>
    <%= link_to image.project.name, 
                 :action => 'show_project', 
                 :id => image.project %>
    <hr />
  <% end %>

David Lelong Says:
June 28th, 2007 at 11:05 PM
Thanks, that helps a lot.

One other thing: how can I display only the first image of a set of project_images when I only have the Project ID, but not the specific project_image ID? I know how to get all of the relevant images by doing:
```
<% @project.project_images.each do |image| %>
```
but I only want to display the first image returned, not all images with that project ID.

Thanks.
David Lelong Says:
June 28th, 2007 at 11:05 PM
Also, how would I wrap a template around show_image so I can display the image in my website look and feel instead of just displaying the image?
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
Remember @project.project_images is just an array of active record objects, so you can use the first method.
```
  <%= image_tag my_image_url(:id => @project.project_images.first) %>
```
Although I would add a model method to handle it for you. No sense retrieving all the associated records from the databse if you only need the first one.
```
  class Project
    def main_image
      ProjectImage.find(
        :first, 
        :conditions => ['project_id = ?', id],
        :order => 'position ASC'
      )
    end
  end

  Project.find(1).main_image
```
Alex Wayne Says:
June 28th, 2007 at 11:05 PM

Also, how would I wrap a template around show_image so I can display the image in my website look and feel instead of just displaying the image?

Web browsers make a separate request for images. So stick a line like this in your view file from any controller:
```
<%= image_tag url_for(
  :controller => "images",
  :action => 'show_image',
  :id => @project.project_images.first,
  :size => '150x100'
) %>
```
Which should stick this in your html:
```
<img src="/images/show_image/1?size=150x100 alt="1" />
```

Akufen Says:
June 28th, 2007 at 11:05 PM

I’m new to rails so I guess I missed something, but after installing RMagic and the plugin, migration fails on me, for some reason it tries to create a table that is already there:

>ruby script/generate super_image_migration
      exists  db/migrate
      create  db/migrate/003_add_super_image_table.rb

>rake migrate
(in /ruby/website)
== CreateProducts: migrating ==================================================
-- create_table(:products)
rake aborted!

Mysql::Error: #42S01Table 'products' already exists: CREATE TABLE products (`id`
 int(11) DEFAULT NULL auto_increment PRIMARY KEY) ENGINE=InnoDB

What did I miss?

Alex Wayne Says:
June 28th, 2007 at 11:05 PM
If you are using migrations, do not manually create tables. This problem arises when migrations are not used properly.

I suggest wiping you DB structure and running rake migrate again. If that isn’t an option, make sure that the db schema version is correct. You should have a table in you DB called schema_info. In the table is a single record with a field called version. In your case, this should say 2. So that when migration 003_add_super_image_table.rb is run it will be incremented to 3 and not execute the migrations before that.

However it would seem that your DB schema is not in sync with your migration, and that is definately a bad thing. Any and all changes to the database structure should happen through migrations. Otherwise stuff like this happens.
Akufen Says:
June 28th, 2007 at 11:05 PM
Thanks for the quick response. I just started playing around with this so obviously I mixed up a couple tutorials. Will let you know how it turns out when I try again tomorrow.
David Lelong Says:
June 28th, 2007 at 11:05 PM
Can you use show_image to resize and display an image that’s in the file system (in the images directory)?
David Lelong Says:
June 28th, 2007 at 11:05 PM
Any reason why an image would render fine in Firefox, but I get a broken image icon in IE with just the dimensions of the image?
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
1. Sorry, this is not possible in the current implmentation. You are welcome to hack the plugin and submit a patch to me butit simply doesn;t interact wth the filesystem in its current form.

2. Doesn’t make sense. Any browser should render the image just fine. Go directly to the image url in both browsers and see what happens. Check your logs for errors too.
Michael Edlund Says:
June 28th, 2007 at 11:05 PM
Feature Suggestion: Add the option to resize the image on upload before storing in the database. When clients upload 7 megapixel-photos to a page in a backend CMS where the output will never exceed for example 800×600, it’d be nice to scale the image to something like 1024×760 before storing.
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
Excellent suggestion, and one I have been pondering myself for a bit. I have started a spinoff of this plugin call FlexImage. The interface is completely changing which is why this is a new plugin. This way people linked to SuperImage with svn:externals dont get suddenly screwed.

get the new plugin here: http://beautifulpixel.com/svn/plugins/flex_image/

(docmentation is not updated yet)

If you use it, just make the following changes:

Models:

Change the class declaration of your image models from:
```
class ProductImage < ActiveRecord::Base
  include SuperImagePlugin::SetImage
end
```
to:
```
class ProductImage < FlexImage
  pre_process_image :size => '1000x1000' #optional
end
```
Controllers

old and busted:
```
class ProductsController < ApplicationController
  include SuperImagePlugin::Show
  image_class ProductImage
  image_action :show_image
end
```
new hotness:
```
class ProductsController < ApplicationController
  include FlexImageShow
  flex_image :action => :show_image,
             :class => ProductImage
end
```
Mike W Says:
June 28th, 2007 at 11:05 PM
Does the new FlexImage cache :show_image to the filesystem as default, or do we need to explicitly provide the option as the SuperImage plugin’s example controller code above?
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
You still need to manually cache the image, just like any other rails action. And I am pretty sure that is the way it should be.
Vijay Ramanan Says:
June 28th, 2007 at 11:05 PM
Hi gr8 plugin was very useful. However wasnt able to use it with Rmagick + windows + rails 1.1.4 + ruby 1.8.4 . But i guess thats because of Rmagick which is finicky abt ruby 1.8.2 and linux being there for it to operate. So will try this on my next project which may be on linux system..
Tom Styles Says:
June 28th, 2007 at 11:05 PM
Vijay, I managed to get it to work on the setup you describe by removing all the tabs from my views. If you are getting $kend all over you error messages then this is probably it.

Rmagick kicks off at tabs. It was a bit of a pain at first but now all the team know about the problem.

Tom Styles Says:
June 28th, 2007 at 11:05 PM

Alex, Thanks for the new flex_plugin, it’s just what we needed.

However I’m having a bit of difficulty with the validation and getting errors to display in the view.

My Model


class Image < FlexImage
  pre_process_image :size => '800x800'
  has_many :image_uses
  has_many :articles, :through => :image_uses

  validates_presence_of :data
  validates_presence_of :name
end

My Controller


include FlexImageShow
  flex_image :action => :show_image,
             :class => Image
caches_page :show_image

def create
    img = Image.create(:data => params[:image][:data])
    img.name = params[:image][:name]
    if img.save
        redirect_to :action => 'list' 
    else
        @image_pages, @images = paginate :images, :per_page => 10, :order => 'created_at DESC'
        render :action => 'list' 
    end
end

My View


<%= error_messages_for 'image' %>
<%= form_tag({:action => 'create', :page => params[:page]}, {:multipart => true})%>
    <label for="image_data">Browse for an image</label><br />
    <%= file_field 'image', 'data' %> <br />
    <label for="image_name">Image name</label><br />
    <%= text_field 'image', 'name' %><br />
    <%= submit_tag 'Upload', :class => 'button' %>
<%= end_form_tag %>

Then when I try to upload nothing it returns me to the correct page but gives no error message, what am I doing wrong? Any help is appreciated.

Tom Styles Says:
June 28th, 2007 at 11:05 PM
Alex,

Just spent some time with the flex_plugin and have extended it a little. The reason was that straight out of the camera JPG’s come with little compression, so even a 640pixel image could be as large as 190kb, which is going to eat through database space at quite a rate and make everything slow.

So I’ve added a option to pass in that allows you to set the quality of the image. I’ve set it at 50 which seems to work quite well and is producing 640pixel images at 45kb which is much more bareable. Can’t really tell the difference either, especially if most of the time you are using reductions and not the full size image.

Changes to the model

:quality option added to the hash
```
pre_process_image :size => '600x600', :quality => 50
```
Changes to flex_image.rb

Added a line to the pre process bit to pick up aforementioned new option.
```
def self.pre_process_image(options)
    @@upload_max_size = options[:size]
    @@upload_quality = options[:quality] # added this line
    @@upload_options  = options
end
```
and also replaced
```
# save result to record
self[:data] = img.to_blob
```
with
```
# save result to record
if @@upload_quality
# Compress the image to a custom quality
    self[:data] = img.to_blob{self.quality = @@upload_quality}
else
    self[:data] = img.to_blob
end
```
Works like a charm, not sure if you wanted to intergrate this into the plugin so that other people can use it.
Tom Styles Says:
June 28th, 2007 at 11:05 PM
Just like to answer my own previous query about getting error messages to display in the view.

I should have been using @image instead of img as the variable to hold my image. Switched it and everything is working out sweet now.

Flex_image totally rocks. Now I have all the flexibility of images on the database with all the speed of file_column and I can let users upload 2mb images straight from the digi camera without it ticking off the IT guys who look after the database.
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
Awesome addition Tom!

I have integrated it and rolled it into the trunk.

Sometime soon I hope I will get the time to write the proper documentation and give it a proper release. And figure out how to deprecate SuperImage.

David Lelong Says:
June 28th, 2007 at 11:05 PM

I’ve been able to get multiple images to display in a table in a single column per page using:

<table>
    <% for object in @object_images %>
      <tr>
        <td>
          <%= image_tag (object_image_url (   :id => object.id,
                                              :size => '125x75' )) %>
        </td>
      </tr>
    <% end %>
</table>

<%= link_to '< Previous', { :page => @object_image_pages.current.previous } if @object_image_pages.current.previous %>
<%= pagination_links(@object_image_pages) %>
<%= link_to 'Next >', { :page => @object_image_pages.current.next } if @object_image_pages.current.next %>

How would I get the images to display in a fixed table of 3 rows and 3 columns? So, I only get a total of 9 images on each page, but they display in a 3×3 grid instead of in a single column.

Thanks,

David

Alex Wayne Says:
June 28th, 2007 at 11:05 PM
This really has nothing to do with SuperImage or my plugins, and would probably get a better response, and from more people than just me, on the rails mailing list.

But (assuming you are running edge) you can use the in_groups_of method.
[1, 2, 3, 4, 5, 6].in_groups_of(3) #=> [[1, 2, 3], [4, 5, 6]]
so that means you can do something like this:
<% @pictures.in_groups_of(3).each do |row| %> <tr> <% row.each do |pic| %> <td> <%= image_tag(object_image_url(:id => pic, :size => '125x75')) %> </td> <% end %> </tr> <% end %>
Vijay Ramanan Says:
June 28th, 2007 at 11:05 PM
Thanks tom will try the same and let you know if it worked.. By the way you were right i was getting those $Kend errors.. So removing tabs could be the solution as u say…
Ivan Storck Says:
June 28th, 2007 at 11:05 PM
This looks really promising, but I have a couple of suggestions for newbies:

1) please put that superimage is deprecated in the top of the article, not the bottom of the comments – it took me a day before I found that.

2) please include a small no-frills sample app – with a model, view, and controller, so that we can test to see if the plugin is installed properly, and so that we can get it working! this original article doesn’t have a model in it.

thank you so much for working on this and taking comments.
David Lelong Says:
June 28th, 2007 at 11:05 PM
Hi,

I’m now using SuperImage in two different models, ProjectImage and ObjectImage, to deal with two different types of images I’m storing. In development mode, I can browse the two types of images easily and everything is fine.

However, in production mode, I can view the ProjectImages fine, but after I fiew an ObjectImage, everytime I try to access a ProjectImage, the controller pulls up an ObjectImage that has the same ID. It will do this until I restart the webserver.

In there something I need to add in production mode to make sure that my ProjectImage model and controller only pulls up ProjectImages and that my ObjectImage model and controller only pulls up ObjectImages.

Thanks,

David
David Lelong Says:
June 28th, 2007 at 11:05 PM
As a follow-up, I noticed this stops happening when I include

config.cache_classes = false

in my environments/production.rb file.

Is there a way I can just do this for the two classes that handle the two types of images instead of for the whole application?

Thanks,

David
Chris Says:
June 28th, 2007 at 11:05 PM
When using caching in production mode, I am able to load an image once. However, when retrieving the same image a second time, I see garbled data instead of the image. Any ideas?

I’m using routes, ie: http://localhost:3000/images/show/58/1000/image.jpg
Alex Wayne Says:
June 28th, 2007 at 11:05 PM
SuperImage is deprecated, use FlexImage instead.

I finally released SuperImage’s replacement. FlexImage is ready for primetime.

@ Ivan I hadn’t done that yet because FlexImage wasn’t done yet. The API has changed since the first iteration, and so has the implementation.

@ David Start using FlexImage instead. It creates the controller actions in a very different way that should fix this problem.

A sample app is a great idea I haven’t had time for yet, if you wanted to contribute one it sure would be helpful :)

@ Chris It sounds like your webserver is configured oddly. When using page caching the data is served from the filesystem without ever going through rails at all. So your webserver is probably sending text/html as the content type and not image/jpg which it should do automatically for .jpg files.

It shows the first time because it’s being rendered by rails, and the plugin action sends the proper content type. After that it’s served by the webserver.

Make sure your mime-types on your production server are set properly.

SuperImage plugin, making resizeable uploaded images easy

April 26th, 2006

SuperImage is deprecated, use FlexImage instead.

Prerequisites

Migration

Controller

View

Upload

Using on a page with URL helpers

76 Responses to “SuperImage plugin, making resizeable uploaded images easy”

SuperImage is deprecated, use FlexImage instead.

Leave a Reply

Search

Pages

Categories