Posts: Title, Subtitle and Body fields

Created by Sloane DellOrto, Modified on Mon, 3 Mar, 2014 at 5:09 PM by Heather King

The only field required for a post is the Title field. (Note: the title field may have been renamed when a post type was customized - for example, on Profile post types, it may be named "Full name" instead of Title.)

Regardless of what it's been named, it will always be the first field in the post creation screen. If the Subtitle field appears (it can be hidden when in basic mode), it will be right below it - even if it has also been renamed. Here are two examples:

Above: Title field in its default state (named "Title") and the Subtitle field below it (with no name)

Below: Title has been changed to "Full name" and the Subtitle field has been renamed to "Title" ! (In this case, we're using the post type for employees, so we want to use the Title field for their names, and the Subtitle field for their titles within the company.)

Note the icons to the right of both fields. These can be used to change the text in the field to upper / lower case or to all lower case. This is handy when you're copying and pasting content that is in all caps - which is a no-no in terms of best practices. Always create your content in upper and lower case; if the theme calls for all caps, we'll handle that with a bit of CSS.

The body text field

Regardless of the post type you're creating, the Body text area features a word processor-like editor to help you format your content. Note that if you paste text (copied from Word, etc), the formatting will typically be removed so that your content starts out clean.

Tip: at any time you can hover and hold your mouse pointer over any button to look at its function label.

Key to icons in Filtered HTML (standard) mode

Screen_Shot_2014-03-03_at_4.18.41_PM.png

Bold - this can apply to single words or phrases. Highlight the text you want bold and click the button.

Italic - this can apply to single words or phrases. Highlight the text you want italic and click the button.

Bulleted list - put a paragraph break after each line you want bulleted, then highlight the whole list and click this button.

Numbered list - put a paragraph break after each line you want numbered, then highlight the whole list and click this button. (The system will add the numbers and indent automatically, so don't number the items yourself.)

Indent / Outdent - click this button to indent your content (or to remove the indent). This can be used in conjunction with bulleted or numbered lists, too, to make nested lists of items.

Undo / Redo buttons.

Link / Unlink buttons. (The unlink button only works if you've highlighted text that has a link in it already). You can insert a link to another website, to a page within your site, to an email address or to an anchor in the text (more on this in a bit) using this tool. To insert a link, highlight the text in the body you wish to turn into a link and select the button that looks like a globe with a chain link in front of it. A popup will appear asking for the parameters of the link. You can link to a variety of content, but the most commonly used will be URLs and e-mail addresses. Select the link type from the drop-down, type in the address and click ok to set the link. Note: if you want to link to a post within your site, simply paste or type in a link including everything from the first slash after your URL. For example, instead of www.digitaldeployment.com/node/55, you would simply add /node/55.

Block quote - used for formatting content in a "call out" sort of way. Applies to entire paragraphs of content.

To view the HTML source of your post (for advanced users only!) You can edit the HTML directly using this tool. (Only Admins see this tool.)

Show paragraph blocks - this is really handy when you're trying to visualize how your content breaks up. (On by default.)

Remove formatting - use this to unformat your content.

Paragraph formatting - use this selector to make Headings. Best practice is to use H3 as your first level, then go smaller from there (H4, then H5, etc). There are some display options we'll talk about later that make nice use of these tags, too. Note that paragraph formatting applies to the entire paragraph, not individual words or phrases like Bold and Italic can. (This is when the "show P blocks" button above is handy!)

Spell check. Click this button to check the spelling of your body text area. Note that many browsers (Chrome and Firefox included) spell check automatically.

Teaser break. The Teaser button will insert a break wherever your cursor sits, and anything after the break will not appear unless you are in full post view. This is great for controlling how much of your post shows up on overview pages, while allowing the entire post to be viewed when the visitor clicks the title or read more. Site Admins have the option to make a custom teaser that does NOT show up on the full node, under Display settings (instructions on this later).

Teaser breaks can be used for multiple purposes: picking where your content will break before the "read more" shows up, to have an entire post appear on a page, or even to have a teaser (content that shows on the landing page) that is different from what appears on the full post when you click through.

To pick where your content will break:

Edit your post and choose where you would like the content to break.
Place your cursor at the end of that sentence and click the teaser break icon.
Scroll down and save.

Note: without a teaser break, the system automatically cuts your content after a certain number of characters. Using the teaser break, you can choose where that happens instead of the system choosing.

To make the entire post body text show up on the landing page:

Edit your post
Place your cursor at the end of the post and click on the teaser break icon.
Scroll down and save.

To create a teaser that doesn't show up in the actual full post when clicked through:

Edit your post
Place your cursor at the beginning of your post and enter the "teaser content." When finished, place your cursor at the end of the teaser content and click on the teaser break icon.
Make sure your Advanced Mode button is on (lower right corner) and scroll down to the lower grey vertical tab that says "Display Settings"
Uncheck the box that says "Include teaser content in full view"
Scroll down and save.

Key to additional icons in Full HTML body format

Site Admins have the ability to change the Body format from Filtered HTML, which is the standard format for all content by default, to Full HTML. This might be necessary when embedding iframes or other custom HTML code. Just keep in mind that once a post has been changed to Full HTML, Editors and/or Members will no longer be able to edit that post, as those roles do not have access to Full HTML format.

To change to Full HTML, click the "Body format" text link below the body field:

Click the button for Full HTML and your toolbar will have a few more options:

Screen_Shot_2014-03-03_at_4.18.29_PM.png

Alignment. Choose Left, Center or Right align for body text. (Applies to paragraph.)

Insert anchor icon. Anchors are a way to link to text in the same post. To use this feature, first go to the content you want to link to, and click this icon. Give your anchor a name. Next, create some text that will link to the anchor - something like "Learn more about ..." Then highlight the text, use the Insert Link button to add a link to the anchor you created. (For Link Type you will choose "Link to anchor in the text.")

Insert image. Use this icon to insert images directly into the body field. To learn more about this feature, and how to use it properly, see additional article on inline images.

Insert table. Use this icon to insert tables into your body text area. You will be given the option to choose the number of rows and columns, border size, etc.

Comparison of old vs. new icons per March 2014

In the standard model update of March 2014, the editor was updated to CKEditor 4.3. Below is a before and after comparison. Look above for a key to all the buttons.

Overall, the buttons have a different look and are now logically grouped. For example, all the buttons related to bullets and indentation are grouped together, as are the buttons related to links.

For the Filtered HTML format specifically, the undo and redo buttons moved to the second row. Otherwise, all buttons remained in the same place, even though their icons changed:

Before:

After:

For the Full HTML format, the undo, redo, view source, and show/hide blocks buttons moved to the second row. Otherwise, all buttons remained in the same place as well:

Before:

After: