- Defining Custom Types of Content
- Putting Images and Styled Text in Content
This chapter is from the book
This chapter is from the book
This chapter is from the book
Putting Images and Styled Text in Content
Drupal creator Dries Buytaert gives a “State of Drupal” keynote presentation at every semi-annual DrupalCon conference (drupalcon.org) to talk about progress during the last six months and plans for the next six. At that talk he also presents the results from his web poll on buytaert.net that asks, “What improvements does Drupal need most?” Lately, the same item has been at the top of Drupal developers’ wish list: better media handling.
With Drupal 7, that wish finally came true—at least, for graphics. In previous versions, you had two options. You could upload the graphic to the server, figure out where it was being stored, and write some HTML to put the graphic where you wanted; or you could find, download, and figure out a half-dozen modules to speed the process.
Under the guidance of Dries and long-time developer Angela Byron (known on the Drupal.org site as “webchick”), Drupal 7’s developers made a special effort to incorporate those modules into Drupal itself. The results aren’t perfect, but they’re definitely encouraging. As you learned in Chapter 3, you can now attach graphics to articles with the click of a button; this chapter tells you how to attach graphics to nodes of any content type and how to place graphics with greater precision than Drupal naturally allows. Finally, you’ll learn how to add text styles such as bold and italics without needing to resort to HTML code.
To add an image to article nodes:
- To add an image to an existing article node, go to the node and click the Edit tab. Otherwise, create the article node as you learned to do in Chapters 2 and 3.
- Complete the Title and Body fields as usual and make all desired changes to the settings tabs at the bottom of the page.
- Click the Browse button next to the Image field to get a file-selection dialog box. Navigate to the graphics file you want to add and select it.
- Click the Upload button. Depending on your connection speed, you might have to wait a while until the file uploads to your server. When it’s finished, you’ll see a small (thumbnail) version of the image, and the Upload button will become labeled Remove.
- Optional: Add a description of the photo in the “Alternate text” field. This text will be useful to those visitors, such as blind people,
who use non-graphical web browsers
.
- At the bottom of the node-creation form, click Save to save the node. You’ll view the newly changed article, with your full-size
graphic at the top
.
)
)
To enable images in nodes of any content type:
- Go to the list of content types by clicking Structure in the Toolbar and then clicking “Content types.”
- Click the “manage fields” link next to the content type you want to affect.
- In the “Add new field” area, enter the human-readable and machine-readable names for the image field you’re going to add, as was decribed in the section “To add fields to a custom content type.”
- In the area labeled “Type of data to store,” change the pop-up menu to Image. The widget pop-up menu to its right should also
change to Image automatically
.
- Click Save. You now see the “Field settings” screen
, which offers two choices:
- “Upload destination” allows you to choose whether to make the images accessible to everybody who can find the URL (Public files) or only to those people who have special permission (Private files). It’s an advanced subject, and rare that you would want to specify the latter. Suffice it to say that if you don’t have a specific reason to select “Private files,” leave this selection on its default, which is “Public files.” (On some Drupal installations, “Public files” is the only option.)
- “Default image” lets you select an image that will appear in this field for every node of this content type that doesn’t have its own image.
- Click “Save field settings” to arrive at the settings page for this field, which we’ll discuss in the next section, “To control image criteria.”
)
)
To control image criteria:
- When you create an image field, you eventually come to a second screen full of settings for that field.
To change these settings after a field has been created, you need to return to that second field settings screen. To do so, first go to the “Content types” list screen by clicking Structure in the Toolbar and then clicking “Content types.” Click “manage fields” next to the content type that contains the field you want to affect. Then click the “edit” link next to the relevant field
.
In either case, you’ll see the settings page for this image field
.
- We described what many of these fields are in the section “To change a field’s display and input options.” Some of the options
that are especially relevant to images include:
- “Allowed file extensions” lets you specify which file types are permissible in this field. The defaults (png, gif, jpg, jpeg) cover most graphic types that can be displayed in web browsers, but you might want to add other types (such as svg) for special applications.
- “Maximum image resolution” and “Minimum image resolution” let you ensure that graphics aren’t too big or small. People will still be able to upload larger graphics—Drupal will simply resize them down to fit these values. However, your site will reject attempts to upload graphics that are smaller than the minimum size. (If Drupal attempted to resize too-small graphics, the result would be an ugly, low-quality image.)
- “Maximum upload size” lets you limit how much disk space each image may occupy. If you don’t enter anything, the limit will be defined by settings in the php.ini file in your AMP stack. For more about this, see Chapter 1, “Getting Drupal Up and Running.”
- “Enable Alt field” and “Enable Title field” check boxes allow anyone who adds an image to also include text that appears in the HTML code that surrounds that image. As the help text explains, the alt field appears in places where the image itself can’t be loaded, such as in non-graphical web browsers; the title field determines what appears when a visitor hovers the cursor over the image.
- Click “Save settings” to return to the list of fields for this content type. The changes you made will affect all nodes of this content type that you edit or create, but they won’t affect existing nodes.
)
)
To include images in content using HTML:
- Find and copy the URL of the image you want to use. One way of doing this is to go to the web page that contains it, put your pointer over the image, right-click (or Control-click if you have a one-button mouse), and select Copy Image Location.
- Edit the node where you want to place an image by going to it and clicking the Edit tab.
- In the node’s Body field, type the HTML code <img src="URL" alt="description" />, replacing URL with the web address you copied. You can style the image further using additional HTML, if you like.
- Choose Full HTML from the “Text format” pop-up menu
.
Warning: Switching to the Full HTML text format opens a security hole if anyone else has permission to edit this node. For more information about text formats, see Chapter 5, “Making Content Interactive.”
- Scroll to the bottom of the screen and click Save. The image now appears in the body of the node.
)
To style text using a rich-text editor:
- In a web browser, go to the Wysiwyg project page at drupal.org/project/wysiwyg.
- Download and install the latest Drupal 7 version of the Wysiwyg module, using the techniques described in the “To install, enable, and configure modules” section of Chapter 9.
- Click Modules in the Toolbar.
- Scroll to the bottom of the page. Select the Wysiwyg check box and then click “Save configuration”
.
- This module doesn’t actually add rich-text tools to your site. Instead, it connects your Drupal site to many rich-text editors
that are available in the wider web-development world. You now need to download and install one of those packages.
Click Configuration in the Toolbar and then click “Wysiwyg profiles.”
- On the resulting page you’ll see a list of rich-text editors that work with the Wysiwyg module. You’ll need to download and
install one of them: I’ll demonstrate using the first one on the list, the popular CKEditor.
Click the Download link
to go to the CKEditor site 
. (You’ll need to return to this page for the instructions it contains, so I recommend that you open the CKEditor site in a new browser window or tab.)
- You’ll now download and unpack CKEditor.
-
On Mac or Windows: Click the “Download zip” button. Find the downloaded package on your computer and double-click it to uncompress it. (If you have problems doing so on a Windows computer, see the sidebar “Help! I Can’t Uncompress the File!” in Chapter 1.)
-
On *nix using the command-line interface: Copy the URL linked from the “Download tar.gz” button. In a terminal program, type wget URL. When the package has finished downloading, type tar -xzvf downloaded-package-name.
-
- Return to the Wysiwyg profiles page to determine where you’ll need to put the files you just downloaded and uncompressed.
Move the files as directed.
Since we’re using CKEditor, we’ll need to create a new “libraries” directory inside /sites/all/modules.
- Reload the Wysiwyg profiles page, either using your browser’s Reload function or by clicking Configure in the Toolbar and
then clicking “Wysiwyg profiles.”
The page has changed to now allow you to select which editor to use for each text format that’s active on your site. (For more information about text formats, see Chapter 5.) You could also load other rich-text editors by clicking the “Installation instructions” link to expose the instructions you saw on this page earlier.
- In the pop-up menu next to “Filtered HTML,” select CKEditor
and then click Save.
- The rich-text editor now appears whenever you have an opportunity to enter Filtered HTML text, for example when creating a
basic page
.
)
)
)
)
)