Drupal 7 Smart Crop module

By shane
Sun, 2013-02-24 14:42
comments
Daily Dose of Drupal Episode #115

Share with Others

The Drupal 7 Smart Crop module is a Drupal module that provides an Image Style action that provides more intelligent image cropping.

In this episode you will learn:

  • How to create a new Drupal image style that uses the SmartCrop action
  • How to create a new Drupal image style that uses the Scale and SmartCrop action

Episode sponsored by Drupalize.me

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 115. Today we’re going to be going over the Smart Crop Module; Smart Crop Module is basically just an image cache or image style action that allow you to do some pretty cool cropping.

It basically looks at the image a little bit and the Crops are based on entropy which as you can see here it says it’s producing a more pleasing result. There are some examples here if you click on this link of what the Smart Crop Module does compared to original images and some of the other image cache actions like scaling crop.
So as you can see some of these images just look a little different when you’re using Smart Crop versus the Image Cache’s Scaling Crop such as this vehicle right here as one of the good ones I think where it know that this image or the vehicle ending image is more important so it crops based on that image and senders that instead of cutting off the images… the Image Cache Scaling Crop does.

So just another Image Cache or Image Style Action that does a pretty good job of cropping images so we’re going to go ahead and get started but before we do; as always I’m Shane Thomas, go ahead and follow me on Twitter at smthomas3 and check me out on codekarate.com and sign up for the newsletter on the left and I want to thank today’s sponsor which is drupalize.me.

It’s one of the best places to learn about Drupal, you can browse a whole bunch of videos, they have free videos as well so go ahead and give those a look and if you like what you see, sign up and use the coupon code CK20FEB. Let’s go ahead and get started; I have a test site here and I’ve turned on the Scaling Crop Module, downloaded it and it is enabled … or Smart Crop I guess, I don’t know why I said Scaling Crop but as you can see its 7.x-1.0-beta 2.

So I have that installed and you can see I have two articles here with images. Right now let’s go ahead and see what image style it is using, I believe it’s using the Medium Image Style. If i come into Article and go to Manage Display and go to the teaser you’ll see that the image is being displayed with an image style of Medium. We’re going to go ahead and create our own image style and use this Smart Crop action. So I come into Configuration Media Image Styles, you can see the three Image Styles I currently have, I’m going to add a new one called Smart Crop. So I’ll click Create New Style and now I have to select which effect I want to do.

As you can see here it shows the original and it show the Smart Crop Image, I’m going to go ahead and click Smart Crop and click Add and you can see there’s also a scale and then Smart Crop as well so you can try that and we’ll show both options here. I’m going to set it to 250 x 250 and I’ll click Add Effect and we’re going to go ahead and close out of this, come into our Content Type Article Display Teaser and change this image style to our new Smart Crop.

Now if I save this and come back you can see it crops the image based on the exact size that I wanted which is 250x250. You can see it definitely cuts off a lot of the image but that’s because it’s a relatively big image and I’m not doing any type of scaling first.
So what we’re going to do is we’re going to create another image style; just come in here to Image Styles under Configuration Media Image Style and we’re going to add a new one. I’m going to call this Scaling Smart Crop and I’ll go ahead and click Scaling Smart Crop here and I’ll click Add and I’ll do the same thing, I’ll set at 250x250, I will not allow up scaling, I’ll go ahead and add this effect, now I come back into my content type manage display for the teaser and change my image style to use my scaling smart crop image style that I just created.

Now if I come back out here you can see it scales it a little bit differently and crops a little differently based on what is showing in the image. So that’s how to use the Scale or use the Smart Crop Module to scale and go ahead and more intelligently crop your pictures. Sometimes you can see you really get results, sometimes it’s not exact but it is often as you can see in this examples it’s often better than just using the Base Image Cache Scaling Crop with a center cropping that comes with the image styles in Drupal 7.

So go ahead and give it a try and see what you think of it. You might have to try it a couple of different images and see your results and see if it ends up being something that you like and you want to use to scaling crop images automatically on your Drupal 7 website. Let me know how it goes and if you like the module, also check out drupalize.me again, thank them for helping support code karate and thank you for watching the Daily Dose of Drupal, we will see you next time. See you!