One of the more popular yet tricky things to do on a content management system is to attach images to content. It's tricky for two reasons. First, you have to upload a file from your local computer to the server via web browser. Second, for many scenarios your going to want to enforce some standard image formatting such as consistent image sizes. Well Drupal not only gives you the ability to upload images but has a rather clever way of automating cropping and other special formatting so they look uniform when displayed. In this tutorial we're going to walk through how to upload images and how we can enforce image standards using the image field.
When working with image fields there is a three step set up process that you will go through.
- The first step is to add an image filed to your content type. But often node authors who will be uploading these images are not graphic designers. Often their images are not formatted in a uniform way. To help fix this Drupal has an image style system that automates formatting of images.
- So the second step is to make sure you have an image style preset that matches the way you want your image to look. If you don't already have a suitable preset then you'll want to create one underneath the image style system.
- Finally, for each display mode you'll need to tell Drupal which format you want to apply to the image. This is done under the content types manage displays.
Adding Images
On our demo site, let's say that we want to add a logo to our product content types. We can do that using image field. To add our image field we go to structure then open this up in a new tab. Then we go to content types and then underneath our product content type I'm going to go to manage fields. And down here I'm going to add my new field; I'm going to call it logo and going to give it a field name of logo and then the field type I'm going to go ahead and select image. We only have on widget type which is image so I'm going to leave that and click save.
Configuring Images
Now we're given two types of options:
Where do we want to save our images? I'm going to leave it underneath public files which unless you want something to be private for a particular reason I would leave it set to public. And the second option we get is a default image, this is something that wold display if a node author doesn't upload an image. For our case I'm always going to want an image to be uploaded so I'm going to go ahead and leave this blank. So I'm going to save my field settings. And now we get to our widget configuration form. I'm going to go ahead and leave my label of logo, I do want this field to be required so I'm going to click required field. I'm not going to worry about help text for this one because it should be pretty obvious to node authors what this logo field is for. As I scroll down we get to our allowed file extensions and Drupal's already gone ahead and filled in popular extensions for common image fields.
The next configuration option we have is this file directory. This allows me to specify a set of subdirectories underneath our public files folder of where I want to store my images. The way I like to store images is I like to use a subdirectory that starts with the machine name for my content type which is product and sometimes you might want to do, you can do slash logo but I actually to further subdivide my directories by node id's so I don't just have all these logo's in one place. And I can do that using the token module which is giving me this set of variables down here. If you don't see them in your website just download and install the token module and you'll get these variables.
Now I'm going to go underneath current page, and I'm going to copy out this variable and place it here. I do need to tell it that I want to use the first argument because a node URL is node slash node id and when I put a one there it means grab the node id and then I'm going to end this with a logo so that whenever I'm uploading for example on my blue widget which is on node 3 it's gong to store my logos underneath the public files directory slash product slash the node id which would be three slash logo. Scrolling down our page, we now get to our maximum and minimum resolution sizes. Now our logo's have been prepared by professional designers and they've been given to us in a standard size. So I'm just going to go ahead and put those sizes in which is 125 x 113. And I'm going to set both the minimum and the maximum that way I always know that the only size that can be uploaded is 125 x 113. I'm not going to worry to much about specifying a maximum upload size because these resolutions are fairly small and so the image can't get too large. I am going to go ahead and select enable the alt field and for those that don't know what an alt field is, it's a text attribute that you use to describe the image. It's primarily used for really old browsers that don't display images or screen readers that are often used by people who are visually impaired to read back web pages to them. I'm going to go ahead and leave the thumbnail preview size.
The throbber's fine and I only want one value per node. So all these settings are fine, I'm going to scroll down and click save settings. So now that we've added the image field to our content type let's go see how we can upload and image. I go back over to our node and I open up our node edit form and I'm going to scroll down to here where our logo filed has been added. I click browse and I want to select this blue logo and I click upload. We see I've got this nice preview here and here is the file, I also get a place to type in my alternate text. So I'm going to type in blue widget logo. Scroll down, click save and here's our logo.
Moving and Resizing Images
The one last thing I want to do though is I want to move our logo up to the top of my node view. To do that I can flip back over to where we are editing our content type and go underneath managed displays. Here I just simply drag the logo to the top and I want to remove the label so I set it to hidden and I click save. Refresh my node view, and it's looking pretty good here's our logo at the top of our page.
Now one thing you might of noticed is in this logo example we limited people to only uploading files of a certain size so they had to have things that were already pre-formatted to that exact dimension. But often times it's not realistic that we can have things preformatted the way we want them. So let's say for example people are uploading images out of a digital camera or maybe they are uploading a screenshot and we can't always guarantee what the sizes of those are.
So let's take a look at another example and see how Drupal deals with this. So let's say we want to add a screenshot image to our product content types. We can do that by gong back over to where we are managing our content types and we go to managed fields. Down here I'm just going to add a screenshot field I'm going to call it screenshot give it a machine name of screenshot. Under field types I'm going to go ahead and select image, and leave this and click save.
I'm going to go ahead and accept these settings. And I'm going to scroll down and this time I do want to add in a subdirectory field use what was there before but this time I'm going to call it screenshots. But this time around I'm not going to specify a maximum and minimum resolution just leave them open. I do want to say a maximum upload size just so people don't get a little to carried away I'm going to limit it to 8 mega bytes. I do want to enable my alt field and everything else is fine so I'm going to go ahead and click save settings. Now let's go take a look at our screenshot field. I open up my node edit form, I scroll down and here's our screenshot field click browse, select a screenshot I want to use, click upload. Put in my alt text and click save. So I scroll down and we that whoa, I've got this really large image because it's a screenshot from a website. What we need is a way to crop these images down, and make them consistent in a way that doesn't require the node authors to do it themselves.
Luckily Drupal gives us some tools to do that. To access these tools we go back over to where we're working with our content type and we go underneath managed display. We scroll down to our screenshot and we're going to click on this configuration gear. And we see it opens up a couple extra options, one is an image style that we want to use and we see have three different image styles to work with, I'm going to go ahead and select medium and I also can select what do I want the image to link to because we're cropping it down and I might want to let people see the full size version I'm going to go ahead and link it to the file. Click update and save.
Now let's run back over to where we are viewing our node I do a refresh and here Drupal has automatically cropped this huge image down to a small size. And if I click on it, I now get to see the full image, I can click in and Firefox will expand it so I can still access the full image but when we are looking at the node view it's nice and tidy in this small form.
Now you might be wondering where did those three presets come from and can I change them? Well these three presets come out of something that is Drupals image style system and the three that you see here come as part of the default installation of Drupal. You can actually change them if you want to and you can add additional processing. But you also can go ahead and create new presets and customize them to whatever your sites needs are. We'll be looking at how to work with image style presets in a later video but for now you have these three you can play with. In this tutorial we looked at how to attach images to content using the image field.
There are other ways of uploading images to your Drupal site however the image field is one of the most common ways and something you'll find yourself doing often. It's particularly useful for images that must be presented in a structured format. Image fields can be used as accent images to make your content more interesting or used in more advanced ways such as creating photo albums and galleries. Remember, a picture is worth a thousand words. Have fun playing with image fields and image style presets to create new ways of making your site more visually engaging.