Making Content Editable. Create re-usable templates with total control over the sections you can (and more importantly can't) change.

Transcription

1 Making Content Editable Create re-usable templates with total control over the sections you can (and more importantly can't) change. Single Line <singleline> Outputs a string you can modify in the editor. Used for smaller strings such as headings, and allows your client to wrap a link around the text. Any text you include inside the tag pair will be used as the default value. The content author can optionally add a link to the complete text using the editor. Options label='' If you include a label attribute, it will be shown above the text field when the author is editing it. For example, useful labels might be 'Headline' or 'Caption'. repeatertitle='true' If included (on a single line item inside a repeater block) this text will become a link in the table of contents to the repeater block. You can mark as many different single line items for the table of contents as you like, but only one in any specific layout (or one per repeater block if you don't use layouts). Example Use: <h2> <singleline label='pull Quote'>Pullquote here</singleline> </h2> In Editor: <h2> <a href=" here</a> </h2> P a g e 1 11

2 Multi Line <multiline> Outputs HTML you can modify in the WYSIWYG editor. Used for larger bodies of text and is automatically converted to HTML (so it will contain one or more paragraphs). Each paragraph will automatically be wrapped in a <p> tag, so you'll want to accommodate for that in your CSS. Options label='' If you include a label attribute, it will be shown above the text field when the author is editing it. For example, useful labels might be 'Article' or 'Product Details'. Example Use: <multiline label='main Feature Intro'>Main feature introduction</multiline> In Editor: <p>main feature introduction</p> P a g e 2 11

3 Image <img editable> Add the editable attribute to the normal <img> tag and you can remove or replace the image in the editor. Also allows your client to automatically wrap a link around the image and add an alt attribute. Required width='' Options You need to specify a width (not a % width, but a pixel width) on your <img> tag. Any images wider than the specified width that are uploaded in its place will automatically be proportionally resized to the value set. Images narrower than specified will not be resized at all (the width tag will be updated to match the narrower image size in that case). You should not specify the height, as that can result in distorted images. label='image title' If included, this text is shown for the content author when they edit the image. Use it as a guide to the type of image needed. For example label='hero Image'. src='image.jpg' The image source optionally specified in your HTML will be used as the default image and will show up in the final unless your client removes or replaces it. P a g e 3 11

4 Example Use: <img editable src="image.jpg" width="200" label='hero Image' /> In Editor: <a href=" <img src="image.jpg" width="200" alt="abc Widgets header"> </a> P a g e 4 11

5 Repeater <repeater> Defines a content block that can be repeated an infinite number of times in the template. Must include either a <singleline>, <multiline>, or <img editable> tag. You can have an unlimited number of repeaters in your template, and each repeater can contain any number of editable single line and multi line elements, as well as editable images. These are usually used for lists of articles or features which can repeat an unknown number of times. Keep in mind that you cannot nest repeaters. You can use the optional layout element described below to specify as many different designs as you like for content items in this repeating block. Example Use: <repeater> <h2> <singleline label="title" repeatertitle='true' >Title</singleline> </h2> <multiline label="article Body" >Enter the full text</multiline> </repeater> In Editor: <h2> <a href=" </h2> <p>enter the full text</p> P a g e 5 11

6 Layout Repeater layouts are a powerful tool for designers used only within a repeater tag. By specifying one or more layouts inside a repeater block, you can have multiple separate designs inside the one repeating element. A simple example would be having one story layout with a left-aligned image, and another with a right-aligned image. However the layouts can be completely different, and can include any number of editable elements inside them. You might have a simple text story layout, and a grid of images layout, and a heroshot layout as three options in the one repeating block. This gives your client flexibility to vary their s each time according to their needs. Options label='layout name' Each layout can optionally be named using the label='' attribute. Naming layouts makes it simple for your client to know which layout to choose for any given content item. The label will be shown as drop down options in the WYSIWYG editor when they click the 'Add new' button. Remember that either every layout in a repeater should have a label, or none should. If you don't use labels, then the 'Add new' button does not have a drop down menu, and simply rotates through the available layouts with each click. P a g e 6 11

7 Example Use: <repeater> <layout label='new Feature'> <h2> <singleline label="title" repeatertitle='true' >Title of new feature</singleline> </h2> <multiline label="description" >Description</multiline> </layout> <layout label='article, tip or resource'> <h2> <singleline label="title" repeatertitle='true' >Title of Article</singleline> </h2> <multiline label="description" >Description</multiline> </layout> <layout label='gallery Highlights'> <img src="gallery.png" width="140" editable label="image 1"><br /> <img src="gallery.png" width="140" editable label="image 2"><br /> <img src="gallery.png" width="140" editable label="image 3"> </layout> </repeater> In Editor: P a g e 7 11

8 <h2> <a href=" of new feature</a> </h2> <p>description</p> <h2> <a href=" of Article</a> </h2> <p>description</p> <img src="widget.png" width="140" alt="product one"/><br /> <img src="gadget.png" width="140" alt="product two"/><br /> <img src="gidget.png" width="140" alt="product three"/> P a g e 8 11

9 Table of Contents <tableofcontents> Creates an automated list of every single line content item that includes the repeatertitle attribute in your template. You must include a <repeatertitle> tag inside the table of contents. Example Use: <ul> </ul> <ul> </ul> <tableofcontents> <li> <repeatertitle/> </li> </tableofcontents> <li> </li> <li> </li> <li> </li> <a href="#1">this is my first title</a> <a href="#2">this is another title</a> <a href="#3">i like titles</a> P a g e 9 11

10 Repeater Title <repeatertitle/> Outputs a link to a content item, using the text from each <singleline> element which included the repeatertitle='true' parameter. Used exclusively within the<tableofcontents> tag. Example Use: <tableofcontents> <repeatertitle/> </tableofcontents> <a href="#1">this is my first title</a> <a href="#2">this is another title</a> <a href="#3">i like titles</a> P a g e 10 11

11 Disabling Link Tracking and Image Importing Use these snippets in your link and images tags to turn off link tracking for any link in your content, or prevent us from importing a specific image and referencing it on our servers instead of your own. Turning off image importing cm_dontiemportimage For example: <img src=" width="400" height="300" alt="alt text here" cm_dontimportimage> Turning off link tracking cm_dontconvertlink For example: <a href=" cm_dontconvertlink>this is a link</a> P a g e 11 11