Client Instructions: Creating, Formatting, and Editing Content (General)

Creating, Formatting, and Editing Content (General)

These instructions will cover the following:

• Formatting content (appearance) using the formatting toolbar
• Inserting links and media
• Inserting images
• Previewing draft changes

Formatting Content

While some page or section types will have additional fields, the following fields are generally available on most page or section types:

• Page name: Appears at the top of the page, above the content or manages the section header of single-page layouts
• URL Segment: The website address for the page (irrelevant on single page sites)
• Navigation Label: How the page is labelled in the website navigation menu, usually the same as the Page name
• Content: The main content for the page, can include structured text, images, links, lists etc.
• Metadata: Hidden in a panel at the bottom of the interface, the content of these fields doesn't appear on the page, but instead is used by search engines.

"Formatting" generally entails what you must consider to make the content you add (or copy and paste) appear as you intend for it to appear to your audience. For more information on editing or formatting content, the instructions on the Silverstripe website are excellent.

While the Silverstripe documentation available offers help for many of the built-in functionality you will need (in terms of what I build upon when creating your specific content management system), I am excerpting much of the instructions and adapting them for this page.

Working with Hyperlinks and Embedded Media

Image courtesy of Silverstripe.org

Inserting links

1. You can either type out the link text in the HTML editor or select where you want the link to be added and enter the Link text later.
2. Click and drag across the text that you'd like to add a link to, to highlight it.
3. Click the button Insert Link.
4. Choose the type of link you'd like to create.

Link to another page on your website (internal link)

1. Select the option Page on this site.
2. Select a page from the Select a page dropdown field.
3. Select a page to link and click the button Insert link.

Anchor on a page

1. Select the option Link to external URL.
2. Select a page and Anchor from the dropdown fields. Enter the following link specifications:
   • Link text (if you have not preselected text already)
   • Link description
   • Open in new window/tab
3. Click the button Insert Link.

Link to a different website (external link)

1. Select the option Link to external URL.
2. Enter the full website address in the empty URL field. This link should start with http:// or https://
3. Click the button Insert Link.

Link to e-mail address

I am describing this only because it is shown as an option in the menu; however, I suggest you contact me to create a form that will add a layer of security and spam protection.

1. Select the option Link to email address.
2. Enter the e-mail address that you'd like to link to.
3. Click the button Insert Link.

Link to a file

1. Select the option Link to a file. You can either:
   • Click the button Upload. In the modal that opens, locate the file on your computer and click the button Open.
   • Select a file that has already been loaded to the FILES section of the CMS.
2. Click the button Insert link.

Embedding Media

If you wish to display a video on your web page, there are different options available:

1. I can create the ability to host videos on your website. Contact me to add this functionality.
2. You must use a video that is already uploaded to a supported media service, such as any of the following: YouTube, Twitter, Flickr, Vimeo, Viddler, Revision3, Hulu.

Insert Media via URL

1. Upload your media to a hosting service (see those listed above)
2. While viewing your video, copy the full URL of the page by selecting the full address at the top of your browser or right click and copy the URL.
3. While editing a pages content, position your cursor where you'd like the video to appear.
4. Click the button Insert media from URL which is shown as a media icon in the HTML editor.
5. Paste the full URL of your video into the empty field.
6. Click the button Add media.
7. You can edit the following specifications for your video:
   • Caption
   • Placement
   • Dimensions
8. Click the button Insert media.
9. Click the button Publish to make your changes live.

Inserting Images (within content areas)

1. Position the text cursor where you want to insert the top of the image. To keep things tidy, it's usually best if you place the image on its own line, or at the very start of a paragraph.
2. Click the button Insert from files shown as a file icon in the HTML editor.
3. Click the button Upload. You can also drag & drop files from your computer or select an image from the CMS.
4. Locate the image(s) you'd like to insert, and click the button Open.
5. Once the image(s) have uploaded, click the button Insert file. You can select the image in the HTML editor and drag the drag handles to resize to your required size.

Setting the alignment of an image

1. Select the image and click the button Insert from files shown as a file icon in the HTML editor.
2. Select the alignment for your image from the Alignment dropdown field.
   • Left
   • Center
   • Left or right wrap
3. Click the Insert file button.

Repositioning an Image

To change the position of an image that you have inserted, simply click and drag it, moving the text cursor to the position you want to move the image to. Remember, the text cursor position only defines the position of the top of the image, so you're best dragging it to the very start of a paragraph, or onto its own line.

Controlling the loading of images

Modern web browsers can delay the loading of images until the image is about to be displayed to the user. This feature is called "lazy loading", as opposed to "eager loading" where the browser downloads images on page load even if the user can not see them.

Lazy loading reduces the time it takes to display the page to users. By default, Silverstripe CMS lazy loads any image you insert into an HTML editor.

If an image is placed near the top of the page and you expect it to be immediately visible to users, you may wish to eager load it.

To force an image in an HTML editor to eager load:

1. Select the image and click the button Insert from files shown as a file icon in the HTML editor.
2. Select Eager from the Loading dropdown field.
3. Click the Insert file button.

Previewing Changes

There are a coupe of easy options for previewing content changes in draft mode before you publish changes. These options are slightly different, depending on whether a page has previously been published.

Edits to published pages

In the bottom of the edit screen, next to the SAVE and PUBLISH options, there is a button for "edit mode."

1. Once a page has been saved into draft mode, select "Edit mode" and then choose from the options to view the Split Mode, Preview Mode, or Edit mode.
   • Split Mode: Split mode allows you to view both the edit and preview mode simultaneously. Changes will not appear until they are saved.
   • Preview mode allows you to leave edit view and see preview of your draft content within the CMS.
   • Edit mode returns you to the default edit view.
2. Once a page has been published, you will be able to toggle between the draft version of edits and the already published content.

Content adapted from Silverstripe User Documentation.