Drupal

How to use Drupal Image Styles to show all logos with the same size

The real question here is:

How to make all logos of the same size without cropping a portion of the image?

The key is to use image style effects in the proper order.

First of all you need to install the Image Cache Actions module.

 

Lets say that we need all logos in a carrousel to be 100px by 100px.

So you have to imagine that you will have a square figure of 100px by 100px and inside of it you will place the logo by scaling it to fit proportionally.

 

So hands on it.

  1. Go to admin/config/media/image-styles and add a new style. Lets name it “logo”.
  2. Add a “Scale” effect and in the width value enter 100. Leave the height input empty.
  3. Add another “Scale” effect and now in the height input enter 100 and leave the width input empty.
  4. Add a “Define Canvas” effect. Leave the HEX input empty and that way we’ll get a transparent background. Inside the Exact Size box enter 100 for width, 100 for Height and leave the X & Y offsets with the center value. Hit update effect.

 

And that’s it.

Now you have all logos scaled and centered inside a 100px by 100px transparent square.

logo