Drupal Guides

LABEL

NAME

FIELD

WIDGET

OPERATIONS

4* What is the eye-grabbing headline?

title

Text

Text field \

4* Tell us the juicy details here:

body

Long text and summary

Text area with a summary^

edit

delete

4* Got a pic?

field_gassipjmage

Image

Image

(ediT)

delete

Boolean * |

Seiect list

-

Check boxes/radio buttons Single on/off checkbox

FIGURE 6-12

At the top of the settings page you'll notice that on this page you can modify the field's label or add help text. You can also restrict the file types that can be uploaded by extension and set minimum and maximum image sizes, as shown in Figure 6-14. Files under the minimum are rejected whereas files above the maximum resolution are automatically resized to the maximum image resolution. Continue on to the section on Image styles to learn more about automatically resizing your images.

Allowed file extensions png, gif, jpg, jpeg

Separate extensions with a space or comma and do not include the leading dot. Leaving this blank will allow users to upload afile with any extension.

File directory gossip images ~|

Optional subdirectory within the upload destination where files will be stored. Do not include preceding or trailing slashes.

Maximum image resolution

The maximum allowed image sire expressed as WIDTHxHEIGHT (e.g. 640x480). Leave blank for no restriction. If a larger image is uploaded, it will be resized to reflect the giver width and height. Resizing images an upload will cause the loss of EXIF data in the image.

Minimum image resolution

200 J x 200 pixels

The minimum allowed image size expressed as WIDTHxHEIGHT (e.g. 640x480). Leave blank for no restriction. If a smaller image is uploaded, it will be rejected.

Maximum upload size 4 MS

Enter a value like "512" (bytes), "80 KB" (kilobytes) or "50 MB" (megabytes) in order to restrict the allowed file size. If left empty the file sizes will be limited only by PHP's maximum past and file upload sizes (current limit 8 MB>.

FIGURE 6-14

Modifying the file directory is useful to separate the image files on your server's hard drive, which can help with scalability issues if your site will be using lots of image fields across numerous content types. This directory will be created either under the Public or Private files folder depending on the field's setting.

Image Styles

One of the most powerful features of the Image field is tucked away near the bottom of the settings page.

The Preview image style, Figure 6-15, allows you to process an image so that it better fits your website. For example, you can use it to:

Create 75x75 square images

Rotate images to give them a new look

FIGURE 6-15

Crop the image

Convert the image to black and white

You can also combine these effects such that you can crop, resize, give a slight rotation, and convert to black and white (shown in Figure 6-15). All of this happens automatically and without user interaction.

You can select an Image type on each individual image field. You create Image styles at Administer C> Configuration C> Image styles (Media).

Follow the next exercise to create the image style shown in Figure 6-16.

FIGURE 6-16

TRY IT OUT

_ Adding a new Image style for your Gossip Images

In this exercise you will add a new image style that will be used for the preview image shown on the Gossip content type. This style will not modify the original file only create a new preview image.

1. Navigate to Configuration O Image styles (under Media), as shown in Figure 6-17.

Dashboard Content Structure Appearance People Configuration and modules Reports Help Hello jredding Logout

Add content Find content Dashboard

F File system

Tell Drupal where to store uploaded files and how they are accessed.

Image styles iûnfigijr£^£yteîmat can be used for resizing or adjusting images on display.

RSS publishing

Configure the site description, the number of items per feed and whether feeds should be titles/teasers /full-text.

CONTENT AUTHORING

Comment fitter settings

_Spt thp kpvwnrdt: tn filter

FIGURE 6-17

2. Click Add style at the top of the page and enter black-n-white-thumbnails as the style name.

3. At the bottom of the page choose Scale, then click Add, as shown in Figure 6-18.

4. Enter 90 pixels for the Width and 90 pixels for the Height then save the effect.

5. Add the Desaturate effect.

6. Add a rotate effect with a -15 degree angle and a background color of #FFFFFF (White).

FIGURE 6-18

FIGURE 6-18

7. After you have added the three effects click Update style. Your style should look similar to Figure 6-19.

How It Works

Image styles are used to automatically modify images. The styles can be used with the Image field within Views or other contributed modules. Styles work by creating and modifying a copy of the original image the first time the styled image is viewed. If you later modify a style the previous images created with the style will be flushed and recreated.

Update style

Update style

FIGURE 6-19

One of the great things about styles is that you can use them in multiple places or use different styles for different situations. For example, you can set the small, rotated, black and white photo when displaying the teaser to the Gossip content but when the full node is viewed a larger, and color version of the photo is displayed. You can retain the original but only show it when users specifically request it. In the next exercise you will setup your gossip content type in this manner.

TRY IT OUT

Modify the Display Settings of Your Image Field

In this exercise you will modify the display settings of your image field such that the image appears differently in the teaser than in the full-node view.

1. Navigate to your Gossip content type at Structure C> content types then click edit to the far right.

2. Choose Display fields on the edit page as shown in Figure 6-20.

FIGURE 6-20

Note that the screen is split into two sides; Teaser (left) and Full node (right).

4. Set the Teaser to:

> Label: Hidden

^ Format: Image "black-n-white-thumbnails" linked to content.

5. Set the Full node:

> Label: Hidden

^ Format: Image "large" linked to file. Figure 6-20 displays the results.

6. Click Save.

7. Verify the results by navigating to the teaser of a Gossip content type (for example by promoting one to the frontpage) and also to the Full page.

How It Works

Each field maintains its only display settings. These settings allow you to define the placement of the label as well as how the content appears to the user. As you saw in this exercise Image fields allow you to define what Image style you would like to use. Note that you can define a separate style for Teasers, Full node view, RSS feeds, and search results.

Image Style Requirements

Image styles require an image toolkit. PHP 5 includes the GD toolkit although it is possible that a host has disabled it use. You can check to see what toolkit is installed by navigating to Administer C> Configuration C> Image toolkit (under Media). Alternatively you can use the ImageMagick toolkit to process images.

Imagemagick is considered to provide higher quality pictures and uses less server resources (i.e. faster and better). It is a replacement for PHP's GD processor. If you have installed ImageMagick on your server you can use the ImageAPI module to unlock its use for your Drupal site.

^ ImageAPI — http://drupal.org/project/imageapi

^ ImageMagick — http://imagemagick.org

Maximum Upload Size

You may have noticed that the maximum upload size of your image or file fields has a limit. Commonly this is only 8mb, as shown in Figure 6-21.

This is a PHP imposed limitation. Fortunately it is easy to increase the limit. Unfortunately each server and web host has a different method. A few of the most common methods are outlined here in preferred order. You will only need to use one of the methods.

Maximum upload size

Enter a value like "512" [bytes), "80 KB" [kilobytes) or "SO MB" [megabytes) In order to restrict the allowed file size, if left empty the file sizes will be limited only by PHP's maximum post and file upload sizes [current limit 8 MB).

settings.php

Within your site's settings.php file find the lines that begin with ini_set (approximately line 220), these lines modify your PHP configuration. Enter the following information to increase your maximum file size to 40MB. Adjust as necessary maintaining a memory_limit that exceeds the post_max_size.

ini_set('memory_limit', '60M'); ini_set('post_max_size', '40M'); ini_set('upload_max_filesize', '40M');

.htaccess

A hidden file located within Drupal's root directory; this file contains instructions for the Apache web server. Find the line that reads <lfModule mod_php5.c> (approximately line 33) and directly below it enter the following:

php_value memory_limit 60M php_value post_max_size 40M php_value upload_max_filesize 40M

php.ini or php5.ini

If the above items fail you may have to add a custom php.ini or php5.ini file to your web root. Although not complicated, each web host has a different method, making it impossible to clearly outline in this book.

Fortunately the Drupal community has already covered this is great depth over at http:// drupal.org/node/14753 4.