Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the video "Creating and administering content," you saw how Drupal 7 comes with image handling capabilities built- in which wasn't the case with Drupal 6. Now we are going to take a look at how exactly it works, for those of you familiar with Drupal 6's image handling modules, I will give away the secret right now. Basically Drupal 7 incorporates substantial parts of four modules: image API, image field, image cache and file field. If that doesn't mean anything to you, don't worry just watch on and it'll all become clear.
The first thing I am going to do is create a content type called Vacation package. This is actually similar to the one we created in the video, "Adding fields to content types." So if you already started there, go ahead and use that one but I am going to start it from the beginning again, we do that by clicking on Structure, Content Types and Add content type. Call it Vacation package. Don't need the Description, so we will scroll down. I will close up the Comments, so we don't have any comments. We don't want the display the author and date information and then just click Save and add fields. Here I will add two fields. The first one will be called Price and it will be a Decimal field and save and I'll just leave all of these default settings for that field. There is more that I have to save here. I will just leave it as default and we are back at our Add Field screen.
Now I will add a second one called Photo. Field name is photo and the field type in this case is Image. Here we only have one choice, Image, so I will say go ahead and save. Now I am going to walk through all of the settings for this. One nice thing with this is that you can define a default image which is put in before somebody enters something into that particular spot in a node and that will just show up on every node. But we will just continue on by clicking Save field settings and then we have more settings here. Going down you can decide which file extensions to allow, say where the files get stored.
You can also have a Maximum resolution, Minimum resolution, and Maximum upload size. I actually like to check the Maximum upload size because on some computers, and this is all determined by your PHP settings, this is an amazingly huge number and you don't really want people uploading 160 MB files to your computer. I will enable the Alt and Title fields, which I recommend that you do as well because this makes your graphics more accessible to people who have difficulty seeing or using screen readers.
Then we come down to this interesting thing, Preview image style, and we have three choices: thumbnail, medium and large. These are defined through the magic of the image cache module, which was incorporated into Drupal 7. You can change how those image styles are defined and add your own and I'll show you that in just a few minutes, but for now, we'll just leave it as thumbnail. There are some other settings we don't really have to go into and Save settings. Great we now have Title, Body, Price and Photo. I will just move those up above the Body and save.
Now that we have that let's create a little bit of content and see how that works. Add content, Vacation package and we will just say Lake Tahoe vacation. Price is $199. We have a photo. which I just happened to put on my desktop here, lake-tahoe and for the Body, we will just say "Come and get it, the water's beautiful!" and save.
Now when we scroll down on this page, we see our Photo, we see our Price, all exactly as we expected it. Let's go back and talk a little bit about those settings. That thumbnail, medium and large, and actually we will make some changes, so that this graphic comes up a little bit different whenever somebody uploads a graphic, we do that by going up to Configuration and scrolling down a little bit to Image styles. Here they are. Now you could edit these, so instead of having thumbnail, medium and large, you could add another one or you change the ones that are built in. I am going to add a style. I am going to call this desaturate_small.
This desaturate_small style is going to make the graphic smaller than the one that we uploaded and it's going to take away all of the color. We say Create new style and then scroll down and you see that you can add effects. I will add the Desaturate one as I said and Add, then I see it in the list here, then I'll add one more, which is to scale it, and Add. When you add some of these effects, you get some options I am going to say that I want this to be no larger than 200 x 200 and I don't want to allow upscaling, which would make smaller graphics be blown up to that size, and I'll say Add effect.
Great now we've created that style and we have two effects on it. I do want to mention that it matters which order these are in. In my case I think I wanted to scale first and then desaturate, so that it doesn't take the black-and-white and then smush it down. Sometimes you will get unusual effects that way. Say Update style and we are done. So what if we are done and what difference does it make? Well, if we go back to our front screen, we see the teaser for that node and I would like this teaser to have a little graphic on it, in that new style we created. We can do that by going up to Structure and Content types and Vacation package.
You will remember from the video about content types that you can change the display just for the teaser or RSS feeds and so forth and that's what I am going to do here. I am going to change the display and make it a custom setting just for the teaser. Aha, we already have that. That's great. On the teaser, instead of that photo being hidden, I am going to change it to being an image and save. When I do that I get this little gear over here which lets me set some of the options on showing it. Instead of showing that photo at the original size, I am going to change it to a new desaturate_small and I'll link it to the node and update and save.
Now let's go back to our homepage. There, now we see that nice little black-and-white picture and when you click on it, we go through to the bigger picture in the node itself. That shows you how Drupal handles images as separate fields but I want to mention that the old tricks that you used to get images into Drupal 6, they still work. You can still add inline images, that is graphics that are part of a node's content and not stored at all as a separate field, by uploading the image and then writing HTML to reference it. If you need further help with that, see the video "Creating your sites basic info pages" in my Drupal 6 Essential Training course.
Get unlimited access to all courses for just $25/month.Become a member