A Step-by-Step Tutorial for creating Templates in dotCMS
Contents
1. set Sinode request getParameter inode this line sets the inode variable on the page to the inode from the URL using the request getParameter if Sinode getContentMapDetail Sinode else pullContent type content live true deleted false structurelnode 5 languageld 1 1 datel asc tfend This if statement checks if there is an inode variable passed from the URL in the previous line It then uses the getContentMapDetail to load the fields from that particular contentlet with that inode If not it uses pullContent to get the latest news story using a query you can paste this from a contentlet search in the contentlet tab Illustration 7 lt h2 gt content NewsHeadline lt h2 gt lt span gt date format MM dd yyyy content NewsPublishDate lt span gt lt hr gt date format is a velocity method for formatting dates from the database s format to human friendly one if SUtilMethods isSet Scontent Image amp amp S content Image 0 lt img src resize_image inode S content Image trim amp w 100 alt Scontent NewsHeadline style float left margin 0px 10px 5px Opx gt fend This if statement checks if there is an image attached to this contentlet by using UtilMethods isSet to see if that variable has been set S content NewsBody 2 Add a new contentlet to the body Here s the code we are go2. Search will use this field in its search Show in Listing when checked the content in this field will be displayed in the Content Search results on the backend dot 2 CMS Lx Home Structures oe Welcome Will Ezell Int Personalize Pages Sign Out 43 CMS Admin View all Structures Add New Structure View all Relationships Add New Relationship Add Edit Field Required Fields Label Headline Identifier NewsHeadline Display Type Text x Data Type ObBoolean Date ObDecimal O Integer Text Long Text Values Validation lt Select validation gt M Hint Default Value Required Searchable 14 Show in listing 14 Save Field Illustration 3 Sample Field Step 2 Create a Container This container will be the listing on the homepage in which the contentlets can be manually added reordered and removed Each news item s title will link to the detail page and pass the inode of the contentlet to the detail page 1 Click on the Website tab and then the Container tab 2 Click Add Container button 3 In the code field read below in Container Details we are going to put in the variables for the headline and a link to a detail page also passing the inode of the contentlet in the URL lt li gt lt a href news index dot inode ContentInode gt NewsHeadline lt a gt lt li gt Container D
3. on inode passed in link If an inode is not passed then the latest news item will be displayed On the right hand side there should be a listing of the latest news stories ordered by published date Plan Out What Goes Where We are assuming at this point we have the html css and images ready for the page It s a good idea to know what the relationship is between the Template Container Contentlet Illustration 1 The page template will contain the standard sections of the page such at the head tag the Note For chunks of HTML such as a header or footer that are shared among templates we can create containers that have no contentlets making the template easier to manage and more streamlined page header the page footer and other elements of a page that are standard for all the pages that use that specific template For the first part of this tutorial we are going to create the news listing on the homepage If we look at the design of the homepage the container for the News ltems will be a part of the page that has a container There are other containers on this page but for the sake of this Request Information News Calendar People Search Dotmarketing ma l ar JIniversity Alumni About dmU Academics Admissions Athletics This site is a demonstration of the power and flexibility that an enterprise OMS can offer to learning institutions The dotCMS dition offers institutions an extendable
4. platform and rich feat set on which to rapidly deploy a complete customized web si 7 LEARN SITE FEATURES hera amp red March 21 2007 VIRTUAL TOUR Course Catalo El o Football Team Cry Like Babies After Defeat H Campus Calendar i i Baseball Team Celebrates Victory at San Agustine Fl H PERSONALIZATION interactive tour of campus Photo Gallery i Virtual Tour i Football Players Celebrate victory fe Campus Blogs help your users reach their goals People Search Site Map About This Site For more information please call 305 958 1422 Copyright E 1997 2007 Dotmarketing Inc Illustration 1 The red box shows the boundaries of the template The blue line shows the boundaries of the news listing container and the green boxes show the boundaries of the code part of the container that loops the contentlet that we add to the container tutorial we will go into detail on the News ltems container Order of Creation 1 Structure 2 Containers 3 Template 4 Page 5 Contentlets The order of creating Structure Container Template Page then Contentlet is important Each one depends on what was built before it Variables from a structure are used in the container created after it When creating a template you need to find the containers that you re going to include in it When you create a page you need to select a template When you have that page you can then create re use contentl
5. 29 06 10 15 AM 10 30 06 9 40 AM 3 7 07 2 00 PM show Deleted Illustration 6 Popup Container Browser Step 4 Create Homepage 1 Look for the folder home or create it if it isn t there making sure to select the template we just created 2 Once you save this page double click on it to open the page in edit mode 3 Now you can add already existing news items to the container or create new news items from the homepage 4 Don t forget to click save and publish so you can check your changes live Step 5 Create Detail Page For the detail page we are going to use widgets to display the detail for the news story and another widget to list the latest news stories The Advantages of Widgets Widgets have two big advantages For one they help us keep the number of unique templates down The more templates you have in a list when a user creates a new page the more confusing it can be Templates should be created sparingly for creating different layouts or different themes to pages It s important to try to re use the templates as much as possible and use generic Web Page Content content types for the containers By placing widget contentlets into these containers you can pull lists of any kind of contentlet and display them using velocity code lt also has the advantage that the listings update 1 Go into create news folder and create an index page using a generic body page template
6. a Template ive five WR E U VE ie iy u LIVE LIVE ive wn ive iew All Working Containers ive 1 Click on the Website tab 2 Click on the Templates tab 3 Click the Add Template button 4 Add Containers to the template by placing the cursor where you want a container and pressing the Add Container button This will bring up a popup window in which you can browse for the right container and it will place the needed code back in the template 5 Once you have all the containers in the template click save and publish Tips on Templates when in preview mode e Putting width constraining elements within the template which wrap around the containers helps keep the page elements in the right place e A container can only be used once in a template Status Title A Banner A Blank Container A Blog Container Body default A Column 1 default Column 3 default Column 4 default A Footer A Header News Listing homepage A Newsletter Sidebar Newsletter Story Promotion A Side Nav Status Legend live Of archived locked xj Mod Date 10 30 06 9 40 AM 2 21 07 4 30 PM 11 10 06 3 58 PM 3 7 07 2 00 PM 3 7 07 2 00 PM 3 7 07 2 00 PM 11 6 06 11 43 AM 3 7 07 2 00 PM 3 7 07 2 00 PM 10 30 06 9 40 AM 6 29 06 10 15 AM 6
7. dotCMS Training Documents From Structures to Pages A Step by Step Tutorial for creating Templates in dotCMS Last Updated May 01 2007 dotmarketing inc Content Overview 3 IQUITOS R RE O SOR ORES 3 A oa a ied al cus a stellt tedeaa ed nl eines teat RAN 3 A E ER T A ienatvets 4 Plan Out What Goes Where 4 Order of Creation 5 Step 1 Cr6 te a Content Str ct re o i e e e cien e 6 Step 2 Greate a Gontang essre henienn aa alos hans au eda a dian watch 8 viep 2 Create a Template A A hie ra ae ate e 11 Step 4 reales e ei RoI e R 12 olen 5 Create Detall Page uni o eee andes 12 Overview Prerequisites For this tutorial you must have a good understanding of HTML You must also be familiar with creating pages in the CMS and adding contents to a container To learn how to do this please refer to the user s manual Definitions e Template Templates are layouts available to users when building new HTML xHTML or XML pages The code that makes up a dotCMS template looks very much like standard HTML or XML code The only difference between templates and HTML is that templates include containers which act as server side includes e Container Containers in dotCMS perform two functions First they act like server side include files and can be used to place reusable HTML elements across templates and pages A good use of this type of container function is for things such as global headers and footers main menu bars navi
8. er the desired Field Label will add a variable for Content Inode Content Inode Value Headline Text Field Current Value Text Field Code Short Summary T ext Area add Current Value that Field to the Code field and close the ustration 4 Add a Variable pop up popup window The steps can be repeated to add more fields i Post Loop Much like the Pre Loop it is processed after the Code field and only once when the Container is processed Can be used to close the Container i e lt div gt dot 2CMs eo by dotmarketing Home My Account Personalize Pages Sign Out Community Page CMS Administrators Website Browser a Browser HTML Pages Files Menu Links Templates View Working Containers Add Edit Container Add Edit Container Permissions Versions Identity 128 Title News Listing homepage Description News Listing Homepage Max Contents 5 Content s News Item Structure lx Dynamic O Pre Loop set stoday check spelling day MMMM mu su e today MIM al 2 F ost hostname news news_rss dot gt lt div class news gt lt img src qlobal images template hd newsEvents gif m Code Codi variabie 2 eee check spelling val Post Loop lt ul gt L check spelling e lt div gt 020 val Notes check spelling About Disclaimer Illustration 5 News Listing Container Step 3 Create
9. etails Illustration 5 O lt Identity This number will be used when creating and editing Templates in the CMS The number is assigned automatically and is unique to every Container Host The host to which this Container is assigned Title Title given to the Container by the user Description A short description of the Container This is displayed only on the back end Max Content The maximum number of pieces of Content that a user can place in a Container Content s Structure Determines the Structure that will be allowed to be used in this Container Pre Loop This field will contain the HTML used when the Container is parsed This field will only be processed once i e opening an HTML tag that will stipulate how the content will be formatted within the Container lt div class ClassName gt Code The Code entered in this field will be processed for each piece of Content added to the Container determined by the Max Content field The fields within a Structure will be utilized according to the variables used here Each variable represents a Field in a Content Structure To select a variable from a list of available Fields from the Structure click add variable located to the right of the text area This will pop a new window with all the Fields that make up the Structure that will be used in the designated Container Illustration 4 Clicking Add Current Value und
10. ets Keeping this order saves a lot of time and makes things less confusing If certain containers templates contentlets etc are already created and are going to be re used you obviously don t have to create it but still maintain the correct order Step 1 Create a Content Structure Note If you already have a structure you are going to use procede to step 2 h Click on the Structures tab Click on the Create New Structure link Fill in Add Name and Description Fields e A Click Save Structure Once the structure is saved you can start adding fields to it Illustration 2 Structure Field Details Illustration 3 dot CMS Welcome Will Ezell Home My Account Personalize Pages Sign Out Home L Content D 434 CMS Admin Workflow X Events Community Page CMS Administrators 1 View all Structures Add New Structure View all Relationships Add New Relationship Structures Required Fields Structure Name News Item Description News Items and Press Releases Ono Review O Enable Review reset Review in All Contents Review Every Reviewer Role Action Label Display Variable DB Column Required Searchable Show in List Sort Order 214 Headine TEXT NewsHeadline text1 Yes Yes Yes 1 7 3 Publish Date DATE_TIME NewsPublishDate datel Yes No Yes 2 A Le Expire Date DATE_TIME NewsExpireDate date2 No No No 3 A et Short Summary TEXTAREA N
11. ewsSummary text_areal Yes No No 4 A lat Body WYSIWYG NewsBody text_area2 Yes Yes No 5 A t Image IMAGE Image integer1 No No No 6 Add New Field Delete Structure and Content Save Structure _Cancel About Disclaimer Illustration 2 Structure with Fields Entered Label the name given to the field within the Content Structure Display Type Determines how a field displays in HTML on the Add New Content form e Text Radio button WYSIWYG Select Drop Down Text Area etc Data Type determines the data type that will be entered into a field Boolean yes no Date Decimal Integer Text Long Text Values Information entered here will be the values the User will be able to select from when adding Content in this field It is only used for drop down list radio buttons checkbox select boxes or multiselect boxes Validation Validation placed on any field will designate the characters and or format of the data allowed in the field e email address numbers no HTML Administrators can write their own regular expressions if needed for special validations Hint Displayed to the User as reminder as to what content will be allowed in the field or where the entered data will be used e example data or a detail page Default Value The default value assigned to the field before user input Required when checked the associated field requires validated data entry Searchable when checked the Content
12. gation and other site wide type content Second containers can define where content from the Content Repository can placed on a template how that content should be formatted and whether that content can be edited through the inline editing mode e Content Repository dotCMS is built upon the idea that content should be totally separated from pages and should be reusable by selected user across a site or sites e Structures Structures serve to hold and organize information in fields created within dotCMS The CMS Administrators can use these Structures to specify Content Types to be displayed by Containers These Content Structures break up information into various fields Title Subtitle Description Body etc and then display some or all of these fields when it is associated with a page of your website e Content A contentlet is a piece of content composed of fields given in a Structure Think of a structure like an income tax form and the contentlet as your particular information that you fill in e inode unique identifying number given to Templates Containers Contentlets and almost every other piece of information in the CMS e Widget A piece of content that dynamically displays other content in it e Content Types A particular Structure ex A biography content type Scenario Homepage News Listing Must be able to manually add remove and reorder news items News Detail Page Must dynamically show news story based
13. ing to use 3 Now we are done with the detail widget Publish the page to view the results and click a news story link from the homepage to test it out 7 e Dotmar 2 Qatar Je colege 2 Senate J e Colorac z open si Status Legend O live A working lt A About Disclaimer Je f Qatar Grants Milions in Aid to New Orleans 7 College Admission Angst Finds a Forum on Web Z 0 Senate begins immigration debate J e Colorado State University and Dotmarketing to develop a compreher open source platform Status Legend O live O working deleted D locked unlocked Ordered by datel desc Pint L Change working true by Sve tue in your query if you want to show oniy it hint 2 You can aod date ranges to your query using the folowing syntax date ieie EGL modPate 02 02 2006 TO 01 01 2100 EG2 03te lf 12 21 1990 05 12 12 TO 01 01 2000 00 00 00 About Disclaimer Illustration 7 Contentlet Search for all News Items results ordered by Publish Date the Show Query link is circled in red Clicking on this will give you the parameters for the pullContent query Aofresults order by The query is marked green and the order by is marked in blue 4 Next we are going to create a listing for the right hand column of the news detail page using this code fpullContent type content live true deleted false structurelnode 5 t
14. languageId 1 5 modDate This line uses the pullContent macro to get a list of the latest 5 news items in order of last modified date For more details on the pullContent macro see Illustration 7 lt link rel alternate type application rss xml title Dotmarketing University News href http host hostname news news_rss dot gt lt div class news gt lt h2 gt Top Stories lt a href http S host hostname news news_rss dot gt lt img src global images template rss gif width 27 height 15 alt RSS Feed gt lt a gt lt h2 gt lt ul gt foreach content in list lt li gt lt a href news inode content inode gt content NewsHeadline lt a gt lt Tis end This foreach grabs the each contentlet in the list generated by the pullContent macro and loops through each one printing out the variables for that particular contentlet in each pass lt ul gt lt div gt 5 We now save and publish the detail page Enjoy
Download Pdf Manuals
Related Search