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.

Image style admin page screenshot

alarez's picture

Posted by alarez

Alain has been involved in the web industry for the past 10 years as a Graphic Designer, FrontEnd Developer, Drupal Developer, Project Planner and Consultant. He is used to work closely with clients turning ideas into achievable tasks and measurable outcome. Given his 6+ years of Drupal experience he stays close to the developers trying to refine working processes and deliver optimal results. "Through all my years as a designer and developer I have come to the conclusion that in order to learn something, you have to do it wrong the first time. Is good to be wrong, so you can learn something from the experience"

Our Drupal Contributions

Take a look at our Drupal Give page, where we are listing some of the contributions that our team have done to the Drupal project.