What field formatters are and how to use them to modify field output
Description
Chapter: Important Drupal Theming Concepts
Transcript
In this video, we're going to talk about field formatters and I want to begin by showing you where in the Drupal user interface you can adjust which field formatters to use and that will give you an anchor to figure out what field formatters are in their role in outputting content in Drupal. And then we'll take a step back in look conceptually at what field formatters are and how they work and how to extend Drupal by adding new field formatters. Okay.
So what I've done is gone to Structure, Content types, and then Article. So this is the default article content type that comes with Drupal 7. Now, field formatters come into play right here in this format column as we're adjusting the output of the view mode of a particular node type.
If we click on one of these dropdowns here, we'll see several options for how to output this content. So for example, this is the tags column and we can output the tags as links to the particular tags. So for example, we can click on the link to go to the page that contains all of the content that matches that particular tag or we can output them as plain text if we don't want them to be links at all.
We can even hide it. If we look at the body field here, we have some different options available to us because this is a different type of field. So I'm going to go ahead and click the dropdown here.
We have a couple of custom options here which have been added through a contributed module called custom formats which I'll talk about in a little bit. We have default which is the outputting of the entire contents of the field. So this would be, for example, what you'd use on a full node page.
Plain text, which will strip out all of the HTML and trimmed and summary or trimmed which can be used for teaser output. So these are field formatters. When we're talking about field formatters, this is where you'd see them used.
Field formatters can also be used when outputting content in a view using the views module, using the fields row type. So in a previous video, we talked about using a view mode in order to render an entire node in a particular way which can then be reused across multiple views. But sometimes we'll need the granular control over particular fields inside of a view.
In which case, we can use field formatters in a way that allows us to create an output setting for a particular field and reuse that across multiple fields inside of views. So if we need to get granular, this is a way we can still make the changes to the output portable. So let's go ahead and take a look at that.
I'm going to go to Structure, ...
When you have an active membership, you will be able to see your progress here.
Skill level: Beginner - Intermediate
How to build or modify a theme in Drupal 7. We discuss various methods to modify Drupal output, how to decide which to use, and work through several practical applications of useful techniques.In this collection, we walk you through a variety of methods to get your site looking exactly the way you want it to in Drupal 7. Because there's so many ways to adjust the output of your content in Drupal, it's sometimes difficult to figure out which techniques are the best for each situation. By the end of these videos, you'll have a firm handle on the most common tools and methods used for modifying output in Drupal, and which to use each of them.
Before watching this series, you will need a fresh Drupal 7 installation. Follow the videos in the Setting Up a Web Environment With Drupal to get Drupal set up on your Windows, OSX (Mac) or Linux machine.
Some of the key points we'll be covering include:
- How to build a theme from scratch - Once you know how easy this is, you'll be able to figure out exactly what you're getting by using pre-made themes like Zen and Omega.
- How to build a sub-theme - Most of the time, you'll use an existing base theme and extend it so you can leverage the work done by themers who have already wrapped their minds around the big challenges with theming.
- How to track down the source of any output in Drupal - Before you can adjust the HTML output of your page, you have to figure out where it comes from. This can be tricky in Drupal, but in this video we describe the tools you need to get to the bottom of anything you can see on your site.
- How to work with view modes - View modes provide a way to toggle the display of content for different situations, like a teaser view for a list, but a full content view for the main content page. Here we describe how to work with them.
- How to extend theme settings - Theme settings provide a way for the end user to adjust the basic look and feel of a theme, like colors and a logo. In this collection, we show you how to add new settings for your end users.
Prerequisites
- A basic understanding of PHP - Theming involves getting into code a bit. There's nothing too advanced, but if you're new to PHP, consider watching the "PHP Programming Basics" collection first.
Who this collection is for
If you want to figure out the best way to adjust Drupal's output so that the changes you want to make are as sustainable as possible, these videos are for you. If you have some experience with theming already, this can be a great way to validate what you already know and fill in the gaps. If you're totally new to theming, then, you'll make some huge leaps in understanding by working through this collection.
Chapters
- 103:19Important Drupal Theming Concepts
- 81:25How to Build and Modify a Drupal Theme or Sub-Theme
- 7:18Overview of included themes and the themes directory, and where to put new themes
- 6:45How the different parts of a theme work
- 9:01Learning about theme structures by reviewing core Drupal themes
- 4:52Learning from the Zen theme file structure
- 2:40Learning from the Basic theme file structure
- 2:56Learning from the Fusion theme file structure
- 2:25Learning from the Marinelli theme file structure
- 8:20Review of the theme .info file options
- 4:43How to create a theme folder, add an info file and enable a custom theme
- 5:00How to add a screenshot
- 2:56How to add a default logo file
- 5:18How to override the page template with a page.tpl.php file
- 9:28How to add a new region and what regions are
- 4:46How to add a CSS file
- 4:57How to add a JavaScript file
- 72:58How to Build and Modify a Drupal Theme or Sub-Theme, Part 2
- 5:45How to add a new setting to the theme settings form
- 4:46How to set a default for a theme setting and use it in a template file
- 9:25How the template.php file works and a review of the Bartik theme template.php file
- 5:57Learning from the Garland and Seven template.php files
- 4:52How to add a template.php file and use a page preprocessing function
- 4:12The advantages and disadvantages of using a sub-theme
- 5:54How to create a sub-theme
- 5:15How sub-themes inherit or override base theme components
- 6:34How to override CSS, JavaScript and screenshot files of a base theme using a sub-theme
- 3:11The advantages of copying an existing theme
- 10:54How to create a new theme by copying an existing theme
- 6:13Overview of theme CSS file structures
- 54:45Theme CSS File Structure and Extended Drupal Theme Building
- 10:33A close look at the Bartik stylesheet structure
- 2:58A quick look at the Garland and Seven theme stylesheet structures
- 5:50How the Zen theme uses extensive CSS files for learning
- 6:42Review of the Basic and Fusion CSS file structures
- 5:19How to enable element toggling with theme
- 10:13How to add CSS or JavaScript files to a theme conditionally based on node type
- 9:27How to add CSS or JavaScript files to a theme conditionally based on path or user role
- 3:43Review and next steps for the "Theme CSS File Structure and Extended Drupal Theme Building" chapter
- 109:19Template Files, Theme Function Overrides and Preprocessing Functions
- 4:20Before you start, is there a simpler way?
- 13:26Why use template files, how file suggestions work, and setting up for later examples
- 8:54How to use the page template file (page.tpl.php) and override it by path
- 9:06How to use the node template file (node.tpl.php) and override it by content type or node ID
- 10:59How to use the block template file (block.tpl.php) and override it by module, region or delta
- 8:23How to use the comment (comment.tpl.php) and comment wrapper (comment-wrapper.tpl.php) template files
- 4:25How to name preprocessing functions to use with theme functions and template files
- 5:52How to use simple preprocessing functions
- 3:52How to apply preprocessing code only in certain situations
- 4:01How template file suggestions work in depth and adding new suggestions
- 10:29How to override template files for specific conditions using template file suggestions
- 2:02How to override a theme function
- 7:18Theme function override examples
- 8:10How to conditionally add CSS classes to the body, page and node wrapper tags for easier styling
- 4:34A practical example of adding a conditional body class
- 3:28Review and next steps for the "Template Files, Theme Function Overrides and Preprocessing Functions" chapter
- 60:04How to Work With Drupal Theme Settings
- 6:35What this chapter covers and basic global toggle options available in the theme setting
- 4:56Overview of additional element toggle options such as main and secondary menus
- 7:13How to tell when global or theme-specific settings are used, and how to uninstall a theme
- 5:54How to add a custom theme setting and set a default for it
- 2:43How to use the custom theme setting in code using theme_get_setting()
- 3:21Overview of how the color module works to add custom color selections to a theme
- 2:10What steps are required to integrate the color module with your theme
- 6:31Overview of color module integration files part 1, including the color.inc file
- 7:37Overview of color module integration files part 2, including the preview.js file
- 10:45How to add a new color selector to your theme with the color module
- 2:19Review of the "How to Work With Drupal Theme Settings" chapter
