WCMS Responsive Design Template Upgrade Training

WCMS Responsive Design Template Upgrade Training The purpose of this training session is to provide training to site owners, who are upgrading their WCMS content to the new Responsive Design (RD) template. In this workshop, you will create, edit, and publish Responsive Design content items for a new site. The following exercises will walk you through the process of upgrading content to the 3.0 template, and selecting options to make content responsive. Upon completion of this workshop, you will have a better understanding of managing the new template options. Agenda 1. New SSI Naming 2. Managing the new Responsive Design SSIs o localrdcontact o localrdsearch o localrdsitesettings o localrdbodybottom o localrdbodytop 3. Un-supported content types and templates o Flash o Feature Flash o Flash Video 4. Preview content using Viewports (4,3,2,1) 5. Creating new RD Content Types and Templates o RD Image - Upload 4 images o YouTube and Audio Players o Nav Buttons 6. New RD Templates for Existing Content Types o Image Photo Box o Icon Link Snippets o New Module Templates & Name Changes 7. Page Row Templates o Ad Hoc o Other template changes 8. Display breadcrumbs on Homepage o Set options: showbreadcrumbs 9. Adding content to feature area on homepages 10. Adding Icons to pages 11. Large Images on Small Viewports 12. Large Table Viewer 13. Show/Hide Content in different Viewports (4,3,2,1): o Modules o Nav Buttons o Gadgets: Carousel, Flexslider, Social Media, Tab/Accordion 14. Setting grid columns for RD elements o Modules o Nav Buttons o Gadgets: Carousel, Flexslider, Social Media, Tab/Accordion 15. Flex Slider Changes 16. Image as Link 17. Top of Page Link 1

Lab 1. New SSI Naming All SSIs have been renamed for the responsive design template. The names are similar to the old names, but include globalrd or localrd, at the beginning of the name. Lab 2. Managing the new Responsive Design SSIs localrdsitesettings localrdcontact localrdsearch localrdbodybottom localrdbodytop Site Settings Changing your site s color theme is much easier in the RD template. You also control the template version for your site, and enable 508 controls for local search using this SSI. 1. Right-click on [YOUR training site / ~inc~] folder and select New Item > Developer Toolbox > Server Side Include [Site Settings] 2. Enter localrdsitesettings in the System Title field. 3. On the Common tab, select the desired options for: Theme, Template Version, Enable Local Search. 4. On the Developer tab, select additional options as shown in screenshot below: OPTION Include CDC in Breadcrumb Catch Javascript Errors Hide To Top Icon (ms) Enable External Links Enable File Icons Simulate Mobile 5. Click Insert, then Close. DESCRIPTION Does "CDC" appear as the first item in the bread crumb bar? Should we capture all JS errors Should the current page appear in the bread crumb bar? How long to wait before hiding the To Top button in 1 column in milliseconds Globally disable external link icons Globally disable file icons 6. Preview a content page in [YOUR training site] folder to verify the theme is picked up and the 3.0 templates are used. 2

*** Note: Site settings are cached for approximately 5 minutes so you may not see changes to this SSI immediately on preview or publish, if you ve recently previewed or published the same page (within 5 minutes). localrdcontact The localrdcontact SSI allows you to customize local contact information in the global footer. 1. Right-click on [YOUR training site / ~inc~] folder and select New Item > Developer Toolbox > Server Side Include [Contact Us Local] 2. Enter localrdcontact in the System Title field. 3. Input desired contact information in each field you wish to customize. 4. Click Insert, and then Close. Search The localrdsearch SSI allows you to display local search options on your site. 1. Right-click on [YOUR training site / ~inc~] folder and select New Item > Developer Toolbox > Server Side Include [Search] 2. Enter localrdsearch in the System Title field. 3. Input values in the following fields: 1. Local Search Label (label that users will see displayed on your site, i.e. Topic Only) and 2. Local Search Value mmwr (contact dnemsupport@cdc.gov to request local search be set up for your site and to get your key to identify your site; mmwr is just an example for training and should not be used on your site, unless you manage the mmwr site). 4. Click Insert, and then Close. 1 2 3

5. Preview a content page in the [YOUR training site] folder to verify that you see the local search checkbox and label beside the search form localrdbodybottom All customized javascript that was previously added to the localadditionalheadincludes SSI will need to be moved to the localrdbodybottom SSI because all template package javascript is now in the bottom of the body of the page. This new SSI is just after the template package javascript on the page. 1. Right-click on [YOUR training site / ~inc~] folder and select New Item > Developer Toolbox > Server Side Include [Raw HTML] 2. Enter localrdbodybottom in the System Title field. 3. Click Insert. 4. Click Edit All. The Related Content window opens. 5. Select Upper SSI Slot and browse to the.js content item //Sites/CDC/migration/training/rwd/alertme.js. 6. Click Close on all open windows. 7. Preview a content page in the [YOUR training site] folder to verify the js is picked up (you should see a js alert). localrdbodytop Any third-party javascript or other content that needs to be the first item, within the body tag, can be added using the localrdbodytop SSI. 1. In your site s top level ~inc~ folder create a new Server Side Include [Raw HTML] content item. 2. Enter localrdbodytop in the System Title field. 3. Input code in the SSI Code field. You can also use the Upper SSI Slot to add a javascript content item similar to how this was done for the localrdbodybottom SSI. 4. Click Insert, and then Close. 4

Lab 3. Un-supported Content Types and Templates o Flash o Feature Flash o Flash Video Lab 4. Preview Content Using Viewports (4,3,2,1) With the recent Percussion upgrades, for Responsive Design, you can preview your pages using the different Viewports (column views): (4 desktop), (3 large tablet), (2 small tablet), and (1 mobile device). Steps 1. Right-click on a homepage or content page content item and select Preview-> Viewport (4,3,2,1). The browser window will automatically resize for the selected Viewport. Lab 5. Creating new RD Content Types o RD Image o YouTube and Audio Players o Nav Buttons Responsive Design Image The Responsive Image content type is used for the large feature image. It allows for 4 different images to be uploaded: one for each viewport size. The 4 size is required; all others are optional. Any missing images will defer to the next largest available image. For example, if you upload 4 and 2 viewport images, the 3 viewport will use the 4 viewport image, and the 1 viewport will use the 2 viewport image. Images for training can be found at: \\apd-v-oadcwcm1\share\bwk8\rwd_training\responsive_images or downloaded from http://www.cdc.gov/wcms/3.0/modules/demo/featurehomepage.html (resize browser to get all 4 images, right click, and save image) Steps Adding images 1. Browse to [YOUR training site ->images] folder. 2. Right-click on the folder and select New Item > Responsive Image. 3. A new window opens for you to upload 4 images and enter data within several fields. 4. Input data in the required blank fields (all fields with an asterisk*) and any optional fields. 5. Click the Browse button next to the mandatory Image field. 6. Browse your computer and select an image you saved to your computer. Click Open to select the image. 7. Click Insert (or Update) to add your image to the CMS. The image height and width will automatically be added upon upload, as will the image file name and mime type. 5

8. Repeat steps 5 7, for each image. 9. Once complete right click on the responsive image content item you just created and select Preview Viewport [4 or 3 or 2 or 1] > Snp Responsive Image (3.0). Try each of the 4 viewports to see the different images (The sample images 4 and 3 are identical, but 2 and 1 are different colors/text) YouTube The new video content type allows you to easily add video content to your pages. To do this, you will need the video ID/key from YouTube. For this exercise you can use n8g24t6cmi8 Steps 1. Right-click on [YOUR training site] folder and select New Item > Multimedia > You Tube Video (The Content Properties window opens). 2. On the Common tab, enter data in required fields: System Title, Video ID. 3. Click Insert, and then Close. 4. Right click on your new You Tube Video content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp YouTube Video iframe (3.0) to preview the video. Audio Player A new responsive audio content type is now available. The old audio content type will be deprecated. The responsive audio content type eliminates the need to upload audio files. Instead, a fullpath url is necessary for linking to an audio file. Steps 1. Right-click on [YOUR training site] folder and select New Item > Multimedia > Responsive Audio (The Content Properties window opens). 2. On the Common tab, enter data in required field: System Title. 3. Click Insert, but don t close window. 4. Click Add new item (A new window opens). 5. Enter Link Name (Mime Type of audio link. Ex: mp3, ogg, wma etc.) and Link (Full path of Audio link). For this exercise you can use the following data: 6

Link Name (mime type) mp3 ogg wma Path http://www.cdc.gov/templatepackage/3.0/examples/media/acellular_vaccine.mp3 http://www.cdc.gov/templatepackage/3.0/examples/media/acellular_vaccine.ogg http://www.cdc.gov/templatepackage/3.0/examples/media/acellular_vaccine.wma 6. Click Return to Parent (top left), and then Update and Close. 7. Right click on your new Responsive Audio content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp Responsive Audio (3.0) to preview the audio player. Navigation Buttons A new nav button content type is available, for easily creating navigation buttons. Steps 1. Right-click on [YOUR training site] folder and select New Item > Navigation Buttons (The Content Properties window opens). 2. On the Common tab, enter data in required field: System Title. 3. On the Developer tab select 8 for the field: Grid Columns. This controls the width of each column of nav buttons. Also select 2 for the field: Columns. This is used by the multi-column navigation button snippet templates to display 2 or 3 columns. 4. Click Insert, but don t close window. 5. Click Edit All (The Related Content window opens). 6. Add content to the Navigation Button Links slots. Items added to this slot will have their title, description, related image, and related icon used in the display of the navigation button. For this exercise please add the four CDC Non-Migrated Link content items found at //Sites/CDC/migration/training/rwd (Nav Button Item 1,2,3, and 4) using the Snp Navigation Button Link Icon (3.0) template. 7. Click Update to save your changes. 8. Right click on the newly created Navigation Button content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp Nav Button Standard (3.0) to preview with a single column. 9. Right click on the newly created Navigation Button content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp Nav Button Standard Multi Col (3.0) to preview with 2 columns. 7

10. You can override the title, description, related icon, or related image of an item added to the Navigation Button Links slot by adding entries to the List Item Overrides field. Click Add New Item below the List Item Overrides field table. Set the Item Number field to be 1 to override the first navigation button, enter some new text for the Title Override field and click Insert to add the override row. Click Return to Parent (top left) to return to the Navigation Button edit form. 11. Right click on the newly created Navigation Button content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp Nav Button Standard Multi Col (3.0) to preview and you should see your overridden title for the first item. 12. You can override any related images of items you added to the Navigation Button Links slot by adding images to the Image Overrides slot. You can do this on your own. 13. Click Close on all open windows. Lab 6. New RD Templates for Existing Content Types Several new templates are available, to provide more options for content display: o Image Photo Box o Icon Link Snippets o New Module Templates & Name Changes Lab 7. Page Row Templates o Ad Hoc o Other template changes With the new css using a 24 column grid, the page row templates are no longer using percentages for column widths. The percentages that each template indicates are just approximations. A new Ad Hoc page row template has been added that allows you to specify the exact size for each column in the page row content item. 1. Browse to and copy the page row content item: //Sites/CDC/migration/training/rwd/Training Page Row and paste as a new copy somewhere in your site. 2. Right click on your new copy of the page row and select Edit. 3. On the Developer tab set the value of each (1-4) Column [X] Grid Columns fields to 4. Click Update to save your changes. 4. Right click on the page row and select Preview Viewport 4 > Row Ad-Hoc (3.0) to preview and you should see 4 columns of modules. You can edit the page row grid columns fields to adjust each column width. For pages with nav the total should be 19, for pages without nav the total should be 24. Lab 8. Display Breadcrumbs on Homepage The RD template gives you the option to display breadcrumbs on a homepage. 1. Edit a Homepage content item. The Content Properties window opens. 2. On the Additional tab, check the Yes checkbox, to Show Breadcrumb. 3. Click Update, and then Close. 8

Lab 9. Adding Content to Feature Area on Homepage A variety of content: module (WYSIWYG), flex slider, image, or responsive image can be added to the new homepage feature slot, which allows content to display in the homepage feature area. 1. Edit an existing home page content item. 2. Click Edit All (The Related Content window opens). 3. Browse to and add the responsive image content item from lab 5 to the Homepage Feature slot. 4. Click Close on all open windows. 5. Right click on the homepage content item and select Preview Viewport 4 > Page > Page Home Page No Left Nav and you should see a preview of your page with the feature banner. Lab 10. Adding Icons to Pages In the new RD template, icons can be associated with a content, homepage, or link content item. When linking to a page, an icon can be chosen, by selecting one of the icon snippet templates. Icons can also be added to the body field, from the Ephox menu. To associate an icon to a content or homepage: 1. Edit an existing content or home page content item. 2. On the Additional tab, select an icon from the Related Icon drop-down. 3. Click Update to save your changes and Close. 4. Right click on the item you just edited and select Preview Viewport 4 > Snippet > Snp Title Link Icon (3.0) to preview. To use an icon when linking to a page: 1. Edit an existing content or home page content item. 2. In the Body field, place the cursor in desired location, to insert link. 3. Click the Insert Rhythmyx Template button (The Content Browser window opens). 4. Browse to and select a content or homepage (The Select Template window opens). 5. Select the desired icon snippet template. 9

To add an icon to a page within Ephox: 1. Edit an existing content or home page content item. 2. In the Body field, place the cursor in desired location, to add icon. 3. From the Ephox Insert menu, select Insert Icon. Lab 11. Large Images on Small Viewports The Large Image Viewer option can be enabled, for large images on small viewports, to prevent users from excessive scrolling. The option will iconify the large image, allowing the user to click for a larger view. 1. Create or Edit an existing image content item. 2. On the Additional tab, check the Large Image Viewer Enable checkbox. Lab 12. Large Table Viewer A similar concept as the large image viewer, the large table viewer can be enabled to iconify large tables. Enabling this option prevents users from excessive scrolling, when viewing large tables. See large table viewer on this example page: http://www.cdc.gov/wcms/3.0/modules/other/largetable.html. 1. Edit an existing content or home page, where the table is located 2. In Code view, add the opt-in class to the table tag: <table class= opt-in Adding the above class will iconify the table when viewed on smaller viewports, as show in screenshot below: 10

Additional classes: table table-bordered can be added to get a bordered table, as shown on the example page. Lab 13. Show/Hide Content in Different Viewports (4,3,2,1) The RD 3.0 template allows you to show/hide content within different viewports. For example, you may opt to hide a specific module, for a mobile browser, but show for the desktop. 1. Edit an existing module or gadget content item. 2. On the Developer tab, check each Viewport (4,3,2,1) to show/hide content. ***Note: The first module in the page row you copied is set up to be hidden in the 1 Viewport. Preview the page row in the Viewport 1 and you should not see the first module. Lab 14. Setting Grid Columns for RD Elements The 3.0 Template release uses a new template grid to support the various Page Types. This new template grid is based on Twitter Bootstrap, which is widely used across public-facing sites. Twitter Bootstrap is a free collection of tools for creating websites and web applications. 1. Browse to and copy the Module content item //Sites/CDC/migration/training/rwd/Grid Columns Test Module and paste as a new copy somewhere in your site. 2. On the Developer tab, select the desired grid column number. 3. NOTE: The number you select will determine how the content displays on the page. Click Update to save your changes. 4. Right click on your copy of the module and select Preview Viewport 4 > [Any Snippet Template] to preview the module with your desired width. You can go back to the editor form and change the width, and then refresh the preview to see new widths. **Note: You only need to set this for modules that you are adding directly to the Ephox body field. If you use the page grid to build your pages the page row templates will define the spans so this field can be ignored. Lab 15. Flex Slider Changes The 3.0 Template no longer use an external XML file to drive the content in the flex slider. Similar to how the carousel works now, a slot is used to add images to the flex slider. The image metadata will be used for the title and caption, but both of those can be overridden in the flex slider content item. 11

1. Right-click on [YOUR training site] folder and select New Item > Gadgets > Flex Slider (The Content Properties window opens). 2. Enter a system title and title 3. Click Insert, but don t close window. 4. Click Edit All (The Related Content window opens). 5. Add images to the Slider / Player Image Slot. You can find images for this at //Sites/CDC/migration/training/rwd/images (flex slider image 01-04). 6. Close all pop-up windows. 7. Right click on the newly created Flex Slider content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp Flex Slider to preview. Lab 16. Image as Link In the 3.0 templates there is now a slot for images called Image Links which will wrap the img element with a link to the item in the slot. Lab 17. Top of Page Link You can now add a top of page link using a menu item in ephox if you are using the 3.0 page templates. To do this edit the page, and in the ephox editor select the Insert menu, then Insert Top of Page Link. 12