I am working with Velocity templates, where I need to have multiple pages that needs to follow the same template style, say "about_me", "contact_us" and "home", all these pages will have same header, left menu and only thing different is content.
For example, HTML for all of them would be exactly the same except for one in < div id="page-content" >.
<html>
<head>
.. some common css and js
</head>
<body>
<div id="main-content">
<div id="header">
Main Menu Bar on top
</div>
<div id="left-menu">
Menus on the left
</div>
<div id="page-content">
I could be contact us, or home or about us.
</div>
</div>
</body>
</html>
One of the ways I have done is by having separate .vm file for header and side menu and importing them over on each of aboutus.vm, contactus.vm and home.vm, but with this i have lot of duplicate code. Is there a way to define everything as a template and just have "page-content", defined in my .vm files?
You could parse a velocity file in the middle of your page and define the template name as a variable. That way you could point to a different page-content.vm file for each
In the below example $contentTemplate could equal any of the following:
home/page-content.vm
about/page-content.vm
contact/page-content.vm
See below
<html>
<head>
.. some common css and js
</head>
<body>
<div id="main-content">
<div id="header">
Main Menu Bar on top
</div>
<div id="left-menu">
Menus on the left
</div>
<div id="page-content">
#parse($contentTemplate)
</div>
</div>
</body>
</html>
Related
EDIT:
My objective:
Create a news page template with header and footer and body.
The news page needs a form for a content editor to add content to with two fields: Headline and story.
Each news page requires its own SEO meta data (keywords / description title).
These stories need to be easy to find within the CMS for future editing etc etc.
What is the best way of going about this?
What I currently have is a "Page" content-type which has all the form fields I require.
To create a new news item, I currently do:
Go to Site Browser
Right-Click [myFolder]
Click "New" --> Page
Choose my page from the select box (that was the page content-type I created earlier)
I now see my form, fill it in and save/publish and I see it, but with the issues I expressed before.
I am pretty sure I am going about this in the wrong way, but what is the right way?
-------------
I am struggling to create a very basic page in dotCMS.
Here is what I want to do:
Create a form for a content editor to be able to add content to the page (Content-Type: Page called "myForm") DONE
The form contains all the default fields (seo stuff etc that comes with the Page content-type) + two extra text fields I have created (fieldA and fieldB) DONE
Create a container and add in the velocity variable names. DONE
Surround the velocity variable names in some HTML. <div>$fieldA</div> and <div>$fieldB</div> DONE
Create a new theme with a template.vtl file DONE
So that is all set up. I now go and create a new page in a folder via Site Browser choosing my new "Page" called "myForm" from the drop down menu. I see my form and enter my data, save and publish.
Result. I dont see any of my data. Just a blank page.
So I check the docs and see what I have missed.
There is a page explaining that I need to add in some velocity into my template.vtl that looks like this:
#if($dotPageContent && $dotPageContent.fieldA)
<div class="row">
#dotedit($!dotPageContent.inode,$!dotPageContent.fieldA)
</div>
#end
#if($dotPageContent && $dotPageContent.fieldB)
<div class="row">
#dotedit($!dotPageContent.inode,$!dotPageContent.fieldB)
</div>
#end
(link to dotCMS help page)
OK, so now when I check my page again, the data is indeed being displayed. But there is a problem. The HTML that is in my container does not get parsed.
E.g. <div>$fieldA</div> and <div>$fieldB</div> does not have the <div></div> tags.
So now I'm worried this is not the way to create pages.
The reason I chose the "Page" content-type was that it comes ready to go with the "Advanced Propertied" for the page like SEO meta data (which by the way all worked fine).
Can someone point out what I may have missed or perhaps a better way of going about this?
Thanks in advance.
If you could post your container and template code somewhere and include the links here I could help you resolve the issue for sure, but I think what might be happening is that you are confusing the Page Content Type with the Container defined Content Types.
Here is a quick explanation that might help conceptual differentiation:
http://screencast.com/t/PlEXKU9glGd
What I explain in the video is that the Page Content Types are for page properties only - not content addition. Like you want a different facebook link on many of your pages, or some other special property tied to each page. To place content in a container, you use a secondary "Content" Content Type, and you add that content type to a container's code field. When a page loads, the execution happens in this order, the Page content loads, page properties and metadata are set, the page calls a template that provides the layout, the template calls containers, the containers have the code that formats the content, and then the content executes in the order that it is placed in the container by the content publisher. The Page content type is not intended to really provide any information that the front end user actually sees other than the Page Title, page url, and properties and metadata that are set "silently" in the background html of the page.
You also might find it helpful to join the dotCMS communty forum: http://dotcms.com/forum/
Hope that helps
In addition to my other post, I did do the test with what you were trying to to, in a test advanced template, and the template.vtl file does display the Page Content, as long as you actually edit your page properties and set, in this case, field A:
<!DOCTYPE html>
<html lang="en">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
#set($dotTheme = $contents.getEmptyMap())
#set($blah1 = $dotTheme.put("path", "/application/themes/one-pager/"))
#set($dotThemeLayout = $contents.getEmptyMap())
#set($blah2 = $dotThemeLayout.put("title", "Bear Mountain"))
<head>
#if($dotPageContent && $dotPageContent.fieldA)
<div class="row">
#dotedit($!dotPageContent.inode,$!dotPageContent.fieldA)
</div>
#end
##dotParse("${dotTheme.path}html_head.vtl")
</head>
#set($utilClass = $pageTitle.toLowerCase().replace(' ', '-'))
<body data-spy="scroll" data-target=".top-nav" data-offset="100">
<div class="body-wrapper">
#dotParse("${dotTheme.path}header.vtl")
<div class="content-wrapper" id="hotel">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>The Lodge</h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="wow fadeInLeft" data-wow-delay=".8s">
## Container: Default 2 (Page Content)
## This is autogenerated code that cannot be changed
#parseContainer('5eb11b21-6b13-4fb8-a823-1de20bba56c0')
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="wow fadeInRight" data-wow-delay="1.2s">
## Container: Default 3 (Page Content)
## This is autogenerated code that cannot be changed
#parseContainer('f1ba7688-453c-4c0d-a214-e5ac802b8034')
</div>
</div>
</div>
</div>
</div>
<div class="image-wrapper bg-image-1 hidden-xs" data-stellar-background-ratio="0.5"></div>
<div class="content-wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
## Container: Default 1 (Page Content)
## This is autogenerated code that cannot be changed
#parseContainer('56bd55ea-b04b-480d-9e37-5d6f9217dcc3')
</div>
</div>
</div>
</div>
<div class="image-wrapper bg-image-2 hidden-xs" data-stellar-background-ratio="0.7"></div>
<div class="content-wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
## Container: Default 4 (Page Content)
## This is autogenerated code that cannot be changed
#parseContainer('a6e9652b-8183-4c09-b775-26196b09a300')
</div>
</div>
</div>
</div>
</div>
#dotParse("${dotTheme.path}footer.vtl")
Powered by Dotcms - The Leading Open Source Java Content Management System
</body>
</html>
This was tested on demo.dotcms.com: U:admin#dotcms.com / P: admin
I am using Zurb Foundation 5.5.2 and trying to get the range slider to work like on the Foundation web site documentation page for range sliders. The desired functionality is that you click on any location on the bar, and the handle advances to that location. On the Foundation web site kitchen sink page, clicking on the range slider bar does nothing. On this codepen that I use the most basic range slider code, you also cannot click on the bar and get the handle to advance. How do I get this to work?
Here is the Codepen code:
<div class="range-slider" data-slider>
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>
Foundation v5.x serie seems not trigger mousemove event when using slider.
Digging into foudantion issues on github I found this:
slider: add support for changing by clicking on the slider without having started to drag from the handle
It strikes me that this feature is only available for future versions of Foundation library such as v5.5.3 or v5.6 (see milestones).
But you can use that rigth now, just copy and past o raw code from github:
https://github.com/zurb/foundation/blob/master/js/foundation/foundation.js
https://github.com/zurb/foundation/blob/master/js/foundation/foundation.slider.js
Just click on "raw" button and save to the local storage.
So it should be work like this:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="small-10 medium-11 columns">
<!-- SLIDER START -->
<div class="range-slider" data-slider data-options="display_selector: #sliderOutput3;trigger_input_change: true">
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
</div>
<!-- SLIDER END -->
</div>
<div class="small-2 medium-1 columns">
<span id="sliderOutput3"></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Foundation updated -->
<script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.js"></script>
<script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.slider.js"></script>
<script>$(document).foundation();</script>
</body>
</html>
I created different tabs in a view with the following code:
<!doctype html>
<html>
<head>
<meta name="layout" content="main-redesign" />
<title>Account Settings</title>
</head>
<body>
<%-- global header --%>
<%-- tab navigation your network --%>
<g:render template="accountSettingNavigation"/>
<%-- main content area --%>
<div class="container account-setting">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<h3 class="page-title">ACCOUNT SETTINGS</h3>
<%-- your network tab containers --%>
<div class="tab-content mb-100">
<div class="tab-pane active" id="personalInformation">
<g:render template="personalInfo"
model="[user:user,editable:editable]" />
</div>
<div class="tab-pane" id="changePassword">
<g:render template="changePassword"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In the changePassword template I have a form which includes 3 fields:
Current password
New password confirmation
After the user clicks on the "update password" the form is submitted to a controller to save the new password.
In have to render the view and to ensure that the changePassword template will be selected- How?
Provide in your model, what tab is active and by that means decide, where to put the active css class.
first add hidden fields into the templates, which mark the tab
(let say name="tabName" value"personalInformation")
in the controller you can access this field in
params (params.tabName)
at the end of the controller put this
field into the model
use this field in the gsp to decide what tab
is active
The below html was provided inside a <cfdocumentitem type="header"> block.
But the output is empty.
<div class="grid">
<div class="span5">
<div class="span5">
Label1
</div>
<div class="span5">
Data1
</div>
</div>
<div class="span5">
<div class="span5">
Label2
</div>
<div class="span5">
Data2
</div>
</div>
<div style="clear:both"></div>
</div>
But when I remove the nested 'class="span5"' divs and put some content there, it is working fine. Is there any problem with nested float in cfdocument???
Unfortunately, CSS support in CFDOCUMENT is kind of hit or miss.
2 rules to follow that might help:
Make sure your HTML validates as XHTML 1.0 Transitional
Import your style sheets using
<style type="text/css" media="screen">#import "style.css";</style>
This same information can be found here: http://rip747.wordpress.com/2007/09/10/cfdocument-it-works-if-you-know-how/
I have a small problem with play-framwork (1.2.4).
I want to have a tag inherit another tag, and this one be included in a html page extending another web page. The best way to explain is with a schema :
However, it did not work the way I want. In fact, the extends in the test.tag file seems to overwrite the one in Screen.html. Then, the content of all the Screen.html is included in the block.tag #{doLayout /} instead of in the one of main.html
Is there any way to do what I want ?
Thanks.
Here is the sources :
main.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
#{doLayout /}
</body>
</html>
Screen.html
#{extends 'main.html' /}
<div id="Screen.html">
#{test /}
</div>
test.tag
#{extends 'tags/block.tag' /}
test.tag
block.tag
<div id="test">
#{doLayout /}
</div>
The generated html when the page is called
<div id="test">
<div id="Screen.html">
test.tag
</div>
</div>
As you can see, the main.html is not included and the the Screen is included in the block. Any ideas ?
For information, the wanted output :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
<div id="Screen.html">
<div id="test">
test.tag
</div>
</div>
</body>
</html>
You can try using #{extends /} in your templates but not use them in tags.
To have some more flexibility in building tags on top of another, you could do:
test.tag:
#{block }
test.tag
#{/block}
and block.tag:
<div id="test">
#{doBody /}
</div>
with this you are passing part of the body from a test.tag to a block.tag and inserting it somewhere in block.tag using #{doBody /}
I think this might due to Groovy engine does #{extends} evaluation on runtime, the screen.html call test.tag which in turn extends block.tag, which happens after screen's extends to main.html and at runtime, groovy decide the final extends win.
Probably you want to try the rythm plugin which evaluate extends semantic at parsing time. That says rythm has no issue in your case.