Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using images in content

From: Drupal 7 New Features

Video: Using images in content

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.

Using images in content

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.

Show transcript

This video is part of

Image for Drupal 7 New Features
Drupal 7 New Features

29 video lessons · 7928 viewers

Tom Geller
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Drupal 7 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.