Starting from the top, click on the File system option.

Later we will find that other modules give us more options in this screen, but for now, let's have a look at what this setting screen tells us.

The public file system path is the location on the web server where any files uploaded to Drupal via the user interface will be placed.

The public file system folder can be found inside the sites/default/files folder in your Local Drupal codebase.

You can locate the Drupal codebase on your computer now using Dev Desktop; click on the Local code link on the control panel:

Then navigate down to public files folder at sites/default/files.

The Temporary directory is used when files are uploaded for temporary storage. The value of this depends on the operating system your computer or server is running.

It is important to note that Drupal understands what files are available based on a database table that is updated when files are uploaded. For this reason, simply copying files to the folder will not allow them to be used within Drupal.

This is also where the Delete orphaned files after setting comes in.

If a file exists in the folder but is not in the Drupal database, it is considered orphaned and will be cleaned up periodically. The length of time between becoming orphaned and the file actually being deleted is set here. You'll not normally need to adjust this.

We looked at image styles earlier when we were applying them to content fields in the section entitled Customizing the display, back in Chapter 4, Getting Started with the UI.

You may recall, by default we have three image styles:

You can modify these from their default settings or we can define completely new ones.

To recap, image styles are used to apply to images uploaded as content on your website. This means that even if your users upload huge photo direct from their camera, Drupal can automatically resize the image so that it is appropriate for use on the Web.

Also, this functionality means that we don't need to manually create lots of different size versions of an image for use as thumbnails. This is all completely automated using image styles.

We can also apply more advanced image styling such as color desaturation, as we'll see next. This means you can apply consistent effects for images across your site without having to remember something like the Photoshop filter settings used.

Let's go back to our scenario now and create a new image style.

Click on Add image style and create a new style called Black and white thumbnail.

Click on Create new style and you will be on the image style editing screen, as shown in the following:

Image styles are created by applying a number of image effects one after another. Once all the image effects are applied, Drupal saves a modified copy of the image, leaving the original one untouched. This means that when the styled version of the image is required, it is quickly available.

Click the Select a new effect dropdown and you'll see there are a number of different effects.

Each of these effects can have additional settings as well, as described in the following:

For our scenario, we are going to replace our image thumbnail style for the Article listing to be a desaturated square.

Press Select new effect and then select Scale and crop and press Add, set the width and height to 200 and click on Add effect.

You'll now see that the list of effects for your style has been updated:

Press Select a new effect again and this time choose Desaturate.

You should notice that when you return to the style page, you will see a preview of the image style with the effects applied.

Each time you apply a new effect, you will see the preview update.

Be sure to press Update style when you have everything as you want.

Now we have created our new style, which we can apply to the Article content type. To do so, visit Structure | Content types (admin/structure/types).

Locate the Article content type (1) and click on Manage display (2) on the article content type dropdown.

You'll recall that back in Chapter 7, Advanced Content, you customized the Full content view mode for the Article content type so to see the effect of your new Image style in action, switch to the Full content view mode in order to apply it.

Locate the image field and click on the gear icon.

Now change the image style from Large to Black and white thumbnail.

Click on Update and then take care to also hit Save, and when you go back to the news page that you made on the site in the Working with the Views module section in Chapter 6, Structure, you should now see that the new image style has taken effect, as shown in the following:

A final note about image resizing before we move on.

Go back to the Configuration page and navigate down to the MEDIA section again.

The setting here determines the quality of JPEG images when they are resized. The default value is 75 percent, which is a reasonable compromise between file size and quality.

However, we'll change the value to 90 percent so as to have slightly better quality resized images.

Before we do, try drastically changing the quality to something like 10 percent so that you can see the effect of JPEG data loss, and then the save the configuration settings and go back to the news page to see the effect.