Drupal 7 Imagefield Crop Module

By shane
Thu, 2012-10-25 18:08
Daily Dose of Drupal Episode #37

Share with Others

Have you ever wanted to be able to select how the image gets cropped when you upload an image to Drupal? If so, you are in luck with the Drupal 7 Imagefield Crop module. This module will allow you to upload an image and immediately select a cropped region from the image for display purposes.

In this module you will learn:

  • How to use the Drupal 7 Imagefield Crop module to allow you to select which portion of an uploaded image to display
  • How to make sure the cropped image is rendered at the highest possible quality

Note: I made a minor mistake saying that the quality of the image would get better when changing the image style size. When using the scale operation, the aspect ratio of the image remains unchanges. So what I was doing did not affect the quality of the image, I only affected the size the image was displayed as.

Welcome to another Daily Dose of Drupal, I’m Shane, you can follow me on Twitter @smthomas3 or you can sign up for the Code Karate newsletter right here on codekarate.com.

Today we have another exciting episode; we’re on Episode Number 37. Today we’re going to be talking about the Image Field Crop Module and it’s a pretty cool module that you can just drop in and what it allows you to do is that it allows you to select the area to crop on the image that you upload and I’m sure you’ve used other sites that have a widget like this enabled but we’ll go ahead and show you how easy it is to get it up and running on a Drupal 7 site.

So I have a pretty basic Drupal 7 site here, I am going to start by hoping into the command line in using Drush I’m going to download the Image Field Crop Module, I’m going to come over to the Modules page and I’m going to find that module here and it’s the Image Crop Module, I’m going to turn it on and click Save and now that that is turned on I’m going to go over and by default I have a content type called Article that already has an image field enabled on it so I’m going to go to Content Types, I’m going to click on Manage Fields under the Article Content Type.

You could create your own content type and just add an Image field, that would work as well but just to show you how this works, click on Manage Fields, come to the Image Field and I’m going to select … click on Widgets here and change the widgets to Image with Cropping. So now that we have that set it will be saved and I’m going to go ahead and a new article.

And now we’re going to go to select an image I am going to just go ahead and grab an image here, click on Open and click the Upload button, and now you can see I have this two images here; this is the final render display of the image and this here is the full size image that I can select from.

So as you can see I can move this around and select different areas from the image and you can see how it’s going to render right here. So I’m going to click Save on this and now you can see I have my article. Pretty easy, the module just works as advertised. However; if you look at the image you can notice that there is a little bit of blurring going on.

So there’s a couple of things we can do to make the quality a little bit better. So the first thing; we’re going to come back in to the Article Content Type, we’re going to click Edit and we’re going to make sure that the resolution that it gets crop to is set to the correct size that we want it to be set to because as you’ll notice the resolution is 200 width by 150 height but the display here if we take a look is about 480 x 300, somewhere in there. And so we’ll go ahead and we’ll do a couple of things to fix that.

We want the resolution to be … let’s go ahead and just use this value here; 640x480 so we’ll make it a larger image and we’ll click Save on that. Now we will come back in and edit this, you’ll notice that now the image is much larger up there because we have a much larger final image.

So we’ll go ahead and select a portion of that, click Save, you’ll notice that there’s still a little blurry but it does seem to be a little bit better, we will also come in on a configuration page and we will go to Image Styles because if you come back to this Article Content Type and you click on Manage Display you’ll notice that the Image Style that’s being used is the large image style.

So if we come back to our Image Styles here and if we click on Edit for a large we could add a completely different image style if we wanted but I’m going to just edit the default large image style, click on Override Defaults and I’m going to change this so it does not scale … it only scales the width to 640 which in that case will be the same size.

We could scale this lower but if we set two values here then as you can see it can sometimes distort the image a little bit and this will just help make it a little bit cleaner or at least it should. So now that we have saved that, now when we refresh this this will get a little larger as you can see, it’s already starting to look quite a bit better now, still a little bit blurry, we’ll also come in here to Image Toolkit and make sure you change your JPEG quality to 100 and click Save and this is if you’re using the GD Toolkit, e-mail so I’ll be using Image Magic instead if you have that installed and some of this is going to be dependent on what’s installed on your server.

Now if we come in you can change that, click on the Save button and you can see it’s significantly better than what it previously was. It still not what i would consider 100% perfect but because of we uploaded such a huge high quality image, this is still very good.

And so that’s all that we’re going over today on the Daily Dose of Drupal, if you have any questions about what I went over or if you have any ideas for future episodes you can contact me like I said before on Twitter or on codekarate.com. Thanks for watching today’s episode on the Daily Dose of Drupal and we will be back again tomorrow.