Drupal 7 Image Styles

By adam
Fri, 2014-05-16 06:53
Daily Dose of Drupal Episode #150

Share with Others

The Image Styles modules is part of Drupal 7 core modules. While simple, this module is a backbone to an enormous amount of use cases within Drupal.

In this episode you will learn:

  • How to create an image filed on a content type
  • How to create an image style
  • How to associate the image style with the content type
  • How cute bunnies are

Hey everybody and welcome to another edition of the Daily Dose of Drupal. I believe we’re on Episode Number 150 today and we’re actually going to change things up slightly. Instead of doing contributing modules from Drupal we’re going to look at the Core Drupal Module Image.

Like I said this does come standard with any Drupal 7 installation, you can enable and disable it which will give you … but before that let’s do our usual plugs here, first of all definitely check out codekarate.com and once you get there obviously look at all the content we’ve been posting but also check out the code karate newsletter and make sure you sign up there and as promise we will be sending out 5 secrets to becoming a Drupal 7 Ninja. Expect that soon, probably soon as next week so look forward to that.
Also you can follow us on our newly created Facebook page, facebook.com/codekarate. Pretty new here, kind of the goal of that is really just to syndicate our content over to Facebook, a lot of people share on it so I just want to be there and make sure that you can easily get updates and what’s on and new posts and stuffs like that and as always you can follow me at adamlearing on Twitter or you can follow Shane at smthomas3. So go ahead and connect with us any way you can, I appreciate anything.

Alright so back to the point of video. I guess today we’re going to be covering the image module which comes with Drupal Core. Once you’ve installed Drupal it’s going to be installed automatically so need to turn it on, obviously you could turn it off, I really don’t see a point to doing that but you could if you get as much bloat going on there.
So once it’s enabled that will allow you to add a field on your content type and obviously hopefully you know what a content type is but content type is how you display different content throughout your site. Right now I just have a basic page, again come standard with Drupal Core. And so once you’re there you can add a new field so right now we’re just going to add a field for banner and in the field types you can select Image there and that’s what using Image Module and then go ahead and save that and what that will allow us to do is that will add a field on our basic page content type that will allow us to add an image on our posts.

So for example just to show you if I go here to add content, I had my basic page, you’ll be able to see that I can upload my banner Image Field that I just saved. But the problem is that if I went out and had a nice big image say from Google I might want to have to resize that so all my images are consistent and that’s where the power of the image styles comes into play.

So to get to the image styles you just go under configuration and then underneath the media section here there’s a link for image styles. By default Drupal gives you three different ones, 100x100, 220x220 and 480x480 and that will do is resize those images to those appropriate sizes. For this video we’ll make our own so let’s add a style.
I typically like to just put the configuration size as the name so I will do 150x150 so I’m going to create style and as you can see in this example here it’s going to preview how it’s going crop and style our image. So I need to add an effect, a bunch of different effects you can use here, obviously you can crop, you guys can read here but to exaggerate … but the one most commonly use is scale so we’re going to select that one, we’re going to add it and then we can then specify the width and height we would like the image to be scaled down to.

Now it’s important to know if you read the description above here that if you only enter in one field what image styles does is that it will either upscale or downscale till it fits one of those barriers. So for example I’m going to select the width of 150 and I’m going to leave the height blank. So what that means is that any image that is either bigger or smaller it’s going to resize until it hits a width of 150 regardless of what the height is. So if I add this effect you can see here on our preview image that we have an 800 width, 600 height picture. Using our scale to 150 and now drops it down until it hits the 150 hit and then it just keeps the height value at what it was at 113.

This is a nice little thing to keep all your picture in proportion so you can also do other effects if you want. You can use Scale and Crop which will basically will trim your image. Use that tentatively of course as the image will not necessarily look exactly like it was when it was full size. So anyway we’re just going to keep that as our one style so scale it to 150 and I’m going to jump out here to Google real quick and find a funny picture or a big picture that I can use for this example, we’ll use this guy here, he seems to be cute. So you can see here by default it’s 1024x768.

So if I look at this image, save it and then if I go back to my create basic page her, let’s just give this a refresh, I’m going to add this image. Alright so there he goes, he’s going to be added … save it. Alright there’s a cute little bunny there but the problem is you see there’s still … this is not obviously a 150x150 Image Style that I’m using and the reason is I didn’t associate Image Style with this field yet.

So to do that, pretty simple, all you do is you go back to your content type for basic and you can get to that field. So want to manage fields and there’s a banner there so we can from there jump to the Manage Display and then you see right here it says it’s using the original image as the size. Well we obviously don’t want to do that, we want to use our 150x150. So if we select that image style there, you see that changed and then … oops I jump to the wrong page there.

Switch back to our bunny we can see that didn’t work exactly, I’m going have to resave my content, still not working, I’ll double check something here. Probably didn’t saved, we’ll try this again, save that, I don’t think I actually did save it, now that I’m thinking of it. So that was my fault. I didn’t actually save it which is very important to do, so anyway let’s try this one more time. There we go, now it’s a little smaller.
So anyway, obviously that was a little bit of a heck up there but just make sure that when you do switch your image style which again I’ll do it here, so if I switch it to large update I just did not save the content type so make sure you click that save button there and now our bunny will be 480x480 so if I refresh, now it’s a little bigger. So anyway, that’s how it works, sorry about that but really simple module, obviously this works really well with Views as well.

We’re not going to cover it in the video just for the time issue but you can use this when you’re displaying many different types of a content and you want all your images to be the same size. So it really helps keeps it clean, it’s nice for the design, a lot of other added benefits as well.

So anyway guys it’s always important again to look at some of the core modules, you kind of might breeze over, I know it’s simple but very useful. So anyway, thanks for watching the video, again make sure to interact with us any way you can, either that’s signing up on our newsletter, following us on Twitter, Facebook, all that kind of funny stuff. Alright until next time guys, take care.