Join Tom Geller for an in-depth discussion in this video Modifying image styles, part of Drupal 7 Essential Training.
- View Offline
One of the biggest complaints about Drupal 6 was that it had no built-in tools for image handling. Just to get an image into a node took an HTML hack and to really do it right meant installing and configuring a half-a-dozen modules. Drupal 7 attacked that problem by incorporating those half-dozen modules into its core and the results are pretty good. To get those images in now, you just add an image field to a content type as we saw earlier. This approach is less flexible than a system that would let you mix graphics and text freely, but you do get more control over your images that way, because you can apply image styles that impose consistency throughout the entire site.
I'll show you how to do that by changing a node we created earlier in the course. It's this Pure Grade A olive oil one. It's a product node, and as we scroll down we see that we have the graphic here. The original graphic we had was much larger and we changed it to the medium style that comes built-in to Drupal. Now I'll show you how to create your own styles and apply them throughout your site. First, let's go back to that content type and take a look at what exactly we did. We go up to Structure, Content types, and that particular node is of the Product content type.
I go over to manage display and then I look at the field Product photo. And here is where the information is. To change it, we quick this little widget here. And instead of having Image style medium, I'm going to change it to the original image so you can see what that looks like. Click Update and Save. When I close out this administrative overlay, the page redraws and as we scroll down we see, yeah, it's quite a big picture. Really too big for this page. But as we saw before the picture we were looking at was a little too small.
We want something that's in-between. To change image styles, we go up to Configuration and then scroll down to Media and click Image styles. This is where you get the three that are built-in: thumbnail, medium, and large. We could have chosen the large style, but we're going to make it a little bit different. First let's take a look at what large actually is, by clicking the edit link here. The large image style constrains this image by its size. It scales it to no larger than 480 pixels in either direction, so we have a target size.
Let's go back to our Image styles by clicking on this link here and what's called the breadcrumb trail, and add our own style. For the product name, you can only use lowercase letters, underscores, or hyphens. So it will look like this, and then click Create new style. Now we can start adding effects. If we don't add anything now and say Update Style, it will basically just show the original image in its original format, but first we're going to scale it down. So we'll do Scale and Add, and I'll bring it down to, as the large one, was 480x480.
We'll just see what that looks like and click Add effect. Then I go down and click Update style. Great! Now I'm going to go back to Structure and see what happens if I change that content type. Again, Content types, Product, Manage display, change the Product photo to product_style, and Update. Then we'll go back to our node and scroll down. It's about the same size really.
I'm going to make it little smaller and I'll also add some other effects to it. Again, we go up to Configuration, back down to Image styles, and then we edit our product style. I should talk about what some of the other effects are. First, we have Crop. That actually removes part of your image. So be careful when you use it. Desaturate is an interesting one. It takes away all of the color information. It could just as well be called the black-and-white effect. Resize stretches or shrinks your image to be whatever dimensions you want.
That will distort the image however. Rotate, as you can guess, rotates the image. Scale we've already seen. And Scale and crop changes one of the dimensions, but it cuts off the other one. Most of these has their own set of options. Desaturate doesn't, because all it does is take away the color information, but we'll see a few of those. So first thing I'm going to do is I'm going to change the scale. I'm going to make it 300x300 instead. The Allow Upscaling, by the way, lets you take a smaller graphic and make it larger.
The problem with that is that those larger graphics after they've been resized don't look as good. There is not enough information in the small graphic. It just takes each pixel and makes it bigger essentially, but we'll leave this as it is, 300x300, and Update effect. Then I think I want to try the black-and-white effect. So I select Desaturate and Add, and as you see there are no options for that. Finally, I think I'll rotate it a little bit. Let's click Rotate and Add.
Make it a subtle -15 degrees and for the background color, I'm going to make it a light #000066. You can learn about hex codes of course in other lynda.com courses. You'll see exactly what this background color is after you see what the rotation effect does. So I then click Add effect. Okay, well, you can see it's made quite a difference. We have our original sample here and this is the sample we end up with. I really don't like that blue color however, so I think I'll make that much subtler and I'll make the rotation a little bit less.
Again, you can always go back and edit these things. So I'll make the rotation angle only 7 degrees, I'll make the background color let's say a grayish color, and Update effect, there. That's a little bit better. Finally, I'll just remove the Desaturate. I like the way that looks. Since we've already applied the style to our product photo in the Product content type, all we have to do now is Update the style. Good! It's taken, and then just to be sure I'm going to go back to my content type. Go back.
Manage that display of that image. Change it from original image to product_style, click Save, and then we'll go back to that product and we should see the new style. Scroll down and there it is. So that's how the image styles work in Drupal, and I want to mention once again this will be consistent throughout the entire site. I can add as many product nodes as I want and they will always come out looking like this. And if I make any changes, they will apply to all of those product nodes throughout the entire site.
So we've seen how image styles work in Drupal. Let's take a very quick look at how they're stored on the server. To do that, I'll go to my desktop where I have my folder, go to 2trees, and into my sites folder, and then into the site itself. 2trees. Inside the 2trees folder is the files folder and in there you see a folder called styles, and there is all of our different styles. If we look in product_style and public, there is the graphic itself. That's important, because we haven't changed the original graphic.
If we make any other changes to the style or we add a style or we decide not to style the graphic at all, we can go back to the original image. I just want to close by saying that the five filters you saw here aren't everything. Many more are available for image cache, which is this system's predecessor on Drupal 6. I think we can expect to see many of them get ported to Drupal 7's image system, giving you access to such things as reflections and watermarks and some other really impressive graphic effects.
- Comparing Drupal with other content management systems
- Understanding nodes
- Creating basic content
- Adding blogs, discussions groups, and polls
- Subscribing to RSS feeds
- Creating new content types
- Managing users, roles, and permissions
- Creating and modifying block regions
- Adding menus
- Extending site capabilities with modules