www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

Tag Archives: templates

Use <!–@ParagraphContainer–> to make paragraphs render different content depending on placement #Dynamicweb

With the Layout system you define various content areas in the Layout file like this:

Part of example layout template:


<div id="left" class="dwcontent" title="Left content" settings="paragraph:left.html">We do not want module content here, for some strange reason</div>

<div id="main" class="dwcontent" title="Main content" settings="paragraph:main.html"></div>

<div id="right" class="dwcontent" title="Right content" settings="paragraph:right.html"></div>

 

This will create a three column page. Imagine that in the left col we do not want the user to be able to add paragraphs which renders module output. We can do that by adding tests for the ParagraphContainer value in the paragraph like this:

Part of example paragraph template


<!--@If(ParagraphContainer!="left")-->

output your content here

<!--@EndIf-->

The above test will ensure that no content will be returned if you use the paragraph in the left coloum. Combined with a selected default paragraphtemplate (settings="paragraph:left.html") as you can see in the layout file above, will help ensuring that editors will

a) Get a head start with choise of template (a default will be selected for them, related to which content area they add content to

b) No paragraph templates outputing module content can be added to the left coloum

 

A wish for improvement to the Dynamicweb template system

This leads to my wish for an improvement in the Dynamicweb template system: Please add two tags from the paragraphlevel template to the module template:

a) ParagraphContainer – so that the module template will be aware of in which layout placeholder it is rendered

b) ParagraphName – Which paragraph template is used? Allows the module content to be controled by the paragraph used for it. This would actually also be relevant to add to the paragraph template too.

Share

Controling styles for individual websites by adding extra classes to HTML tag

When working with like or Syncron VIA, you sometimes share files across domains or subdomains. It makes sense to share common codes when you want to some some common styles like fonts, colours or logos.

 

The same styles… almost…

It is also common that some small differences exists on subdomains, perhaps a campaign site or a site target for a specific group of people. You then need to apply some small changes to those sites. Ofcause you can do this in many ways, and the CMS you use will probertly be a part of your decision on how to implement it. Here is one way to do it:

Add a CLASS to HTML tag with some site related information.

For instance I could add this code to my blog:

<html class="wwwnetsidk"...

The rule should be simple, for instance:

  • Replace not-valid characters like “.” from the DOMAIN NAME to “nothing”

The reason it should be simpel is that it makes it easy to figure out what it should be for a given domain name. Things which are using the KISS (“Keep It Simple, Stupid!”) principle will more likely be used by people, as (in general) people are lazy (I know! Smiley, trust me.)

 

When this rule have been applied you can add extra lines to your shared CSS file like this:

html.wwwnetsidk {background-color: red;}

The princip is used widely, for instance by http://www.modernizr.com/ which addes a lot of feature related classes to your HTML element telling you for instance which HTML5 features are supported. Just look here at parts of what modernizr adds to your HTML document:

js no-touch postmessage history multiplebgs boxshadow opacity...

Dynamicweb CMS

Working with Dynamicweb CMS, here is an example of adding extra information to HTML element – “areaid-xx” will add the ID of the area. In Dynamicweb you can have several areas, which are individual websites. So you might have areaid=1 which is www.netsi.dk and areaid=2 which is m.netsi.dk. In the example below I have also added extra information telling if the person is a returning person.

<html class="areaid-<!--@Global:Area.ID-->
<!--@If Defined(Global:OMC.Visitor.IsReturning)-->IsReturning<!--@EndIf(Global:OMC.Visitor.IsReturning)-->"...

You may add any information you wish, perhaps have a look at the tags that Dynamicweb CMS offers.

Syncron Via CMS

Here are an example of how I have implemented this feature in the Danish CMS system Syncron Via. The system is using a lot, and the code here is applied to the template used to render the outer Page data:

<xsl:variable name="serverName" select="translate(/Page/RequestContent/ServerVariables/Entry[@Name='SERVER_NAME'], '.-', '')" />
...
<html class="{$serverName}"...

This is what I do: define the class to be added to the HTML element in a variable and add it to the HTML class attribute.

Share

The getimage.aspx of Dynamicweb CMS finally can crop as I always wanted it to!

Being a heavy user of Dynamicweb CMS I am very happy to discover that the latest version of the software has made the utility for cropping/scaling work as I (IMHO) always have wished it to do! It is now possibel to specify both with and height and having the image fit inside the area keeping the aspect ratio of the image! Hurra!

You do know , right?

When you have a design to implement using Dynamicweb CMS and you have a list of items with images – say thumb images, Dynamicweb offers a nice utility which can ensure that the thumbs will have a given dimension. The images are cached on the server, so it is not using unnessesary resources of the server if you use the utility.

The getimage.aspx utility of Dynamicweb CMS

The utility can be found on any Dynamicweb soloution here:

http://[hostname]/Admin/Public/getImage.aspx

Enter the URL above and you will get a nice wizard which will dynamically produce what you need inside your . You can see the wizard above.

What makes things work for my needs!

To ensure that an image fits inside a container with known dimentions you need to:

  • Enter the dimensions (width/height)
  • Select the cropping offset: “Keep aspect ratio”

Try the utility by entering a path to an image – you have to start from “/files…”. When that is done, simply press OK and you will get a preview under the “Results” tab, as you can see below.

The Results tab of the getimage.aspx Dynamicweb utility

Using the Image URL in your templates

When you are happy with the results you should copy the “Image URL” path (highlighed with blue in the above image). The URL for my example is:

/admin/public/getimage.aspx?Image=/files/billeder/300×80.jpg&Format=jpg&Width=200&Height=100&Crop=5

If I were to use this path inside a template, I simply would replace the “/files/billeder/300×80.jpg” with a template tag like “<!--@Ecom:Product.ImageLarge.Clean—->”.

I hope this has helped you! I really find this improvement nice!

links

 

Share

Netsi Cycle Template for Google Picasa

image The other day I wrote a post about how you can add templates to Google Picasa – I now have created my first template for ! I name it “Netsi Cycle”, as it offers jQuery based auto cycling through exported .

You can download Netsi Cycle Template as a zip file here. Also visit the an online demo.

Inside the unzipped folde you will see a structure containing the files which together make the resulting webgalleri. You may want to take a look inside the structure and try changing things like:

  • Effects used
  • Speed of transitions
  • styles

The transitions are handled using a jQuery plugin “jQuery Cycle Plugin” developed by M. Alsup. It is higly customizable which you can see the jQuery Cycle Plugin homepage.

Please feel free to download and put any comments, links til sites where you have used Netsi Cycle here on my blog!

Share

Use Google Picasa to generate cool webgalleries using templates…

Google Picasa offers so much more than just viewing on your PC and exporting them to a Google Webalbum. One of the cool ones is of template based webgallery generation. Exporting images using free can give your a twist making them very cool to watch.

How does it work?

Well you need ofcause Google Picasa. Then you need to add some “templates” inside the Picasa program. When you have done that you can get another template to choose from when you use the “Export to HTML…” option. What is generated are a folder containing files needed to show a gallery of the images you have selected.

1 Getting

This is simpel: Download and install it from Google: http://picasa.google.com

2 Adding the template

This post uses templates on: http://www.paulvanroekel.nl/picasa/. You will probertly find many others elsewhere on the net! We will try to use Piecemaker.

  1. Download the ZIP file containing the templates for Picasa
  2. Extract them to a temp folder
  3. Copy the folder named “Piecemaker” to a folder inside your Picasa installation – something like: “C:\Program Files\Google\Picasa3\web\templates”
  4. Start Picasa

3 Exporting some images using a template

You simply choose some images in Picasa. Then you find the “Export to HTML..” under the “Folder” menu (my version is in Danish, so it might be called something in that direction). Here you can see how it looks in my Danish Picasa when I choose the “Export to HTML…”:

image

When you choose the menu item you get a box with some choices. Here you can see which templates are installed inside your Google Picasa’ target=_blank>Google Picasa’ target=_blank>Google Picasa’ target=_blank>Picasa – probertly some basic ones plus Piecemaker which you just “installed” above. Choose Piecemaker and change other settings if you like…

image

When you have choses the “export” (here: “Eksporter” – in Danish) Google Picasa’ target=_blank>Google Picasa’ target=_blank>Google Picasa’ target=_blank>Picasa will generate the static files inside the folder you can see above as “Mappe”. You do not need to worrie so much about it now, because when exporting is done Picasa will launce the file showing the final result!

Usefull links and information

You can read the instructions on how to add templates to Google Picasa’ target=_blank>Google Picasa’ target=_blank>Google Picasa’ target=_blank>Google Picasa from the FAQ on the website of Paul Van Roekel. Another page on that site has some videoes showing how to… The example above is IFRAMED into this post, which is okay, but not perfect. Also I have changed the index.html file inside the template to include a link to my blog – ofcause you can make other changes… Perhaps one day you can even create your own template!

Share

Using C# in XSLT transformations – Very strong tool!

When I build websites in I use . At the moment it is based on 1.0 which in its nature ofcause is much stronger than HTML based templates, but somehow limited compared to all the nice features which are defined in 2.0.

You may however extend to the extreme the facilities by using code in XSLT! I will start writing about the things I discover in this direction, writing about pros and cons. For now I wil not give any concrete examples, only mention that I have made an XSLT templates which gets a RSS feed (does a remoteHTTP request) and displays the transformed contents on a Dynamicweb page! Very cool! Something which I actually could not do without having to code my own Dynamicweb module!

It Rocks and I will start to think this into future templates – taking into account ofcause the pros and cons of that path!! This might just prove to be the best christmas present in the IT area of my life, this year!

Share

Finally – webdav access to Dynamicweb websites!

So far if you are working on a you had to use the backend “filemanager” or buy a FTP account for your if you wanted to work with the files on the site. With the latest release 7,  it is now possibel to use webdav, allowing you to open and save directly on the server from your computer!

image

What you have to do is to setup a virtual path in “Management center > Web and HTTP > Webdav”. Next you need to create a connection to a networkdrive on your computer:

image

I use windows vista and the above is how it might look in that  windows vista.

You will then be promped for username and password, which is the administrator username and password. When that is done – if everything goes well – you will have a new drive which points to the “/files” section of the Dynamicweb website!

From there on you can treat the webdav based "network drive” as a normal drive! You can copy and paste from local drives, open documents directly and well everything you are used to working on local drives! Very nice improvement! Well done Dynamicweb! :-)

Share

Getting the right contents when using Dynamicweb CMS templates

In the system I work with – Dynamicweb CMS – content is build around various , each containing a output from the system. The output is generated using ASP.NET and each bit of content is represented in a “tag”. For instance if you want the name of the user which has logged on the page you enter

<!—@Global:Extranet.Name-->

Such templates are based on HTML, it is: You create static parts of HTML and insert tags where you want the system to insert dynamic content.

You might want to do something like this:

...<div>Hi <!—@Global:Extranet.Name-->!</div>...

So far so good! But what if the user has not logged in? You will need to do one of three things:

The soloution

Put shortly: Using javascript to control which content is shown is basically not a good idea. But today almost anyone browsing the net has javascript turned on, and the trend (IMHO) goes towards very powerfull javascript parts. Another discussion is that: “Why give a visitor contents if you allready before you start sending information (HTML) that the content is not really relevant?”. Well, another article about that.. :-) Here goes:

...<script type="text/javascript">
if ('<!—@Global:Extranet.Name-->'!='') {
document.write('<div>Hi <!—@Global:Extranet.Name-->!');
}
</script>...

The soloution

This is actually not a way which I would say always works! But the theory is that you put CSS classes  on HTML tags that are build around a classname-prefix (“customerNumber” for instance) and then add the dynamic value from CMS as postfix. So if a user has logged in a classname would be for instance “customerNumber342” for a customer with the number 342. A customer who has not yet logged in would give a classname “customerNumber”. So if we by default hide the classname “customerNumber” any other classnames would be displayed! :-) Cute right? But the problem can rise when sometime certain Dynamicweb are not replaced, even if it has no value. That way you might end up with

“customerNumber<!--@Global:Extranet.CustomerNumber-->”

That would even be invalid HTML! :-( Anyway here is how a CSS based soloution could be.

<head>.. <style type="text/css">
.customerNumber {display: none;}
</style>
..
</head><body>
...
<div class="customerNumber<!--@Global:Extranet.CustomerNumber-->">
Hi <!—@Global:Extranet.Name-->!
</div>

The If Defined soloution

Dynamicweb CMS offers a way to check if a tag has content, and only pass the  content within the IF-ENDIF if a tag has content.

<!--@If Defined(Global:Extranet.Name)-->
<div>Hi <!—@Global:Extranet.Name-->!</div>
<!--@EndIf(Global:Extranet.Name)-->
...<div>Hi <!—@Global:Extranet.Name-->!</div>...

These are just 3 ways of making workaround in Dynamicweb CMS, you could ofcause come up with more! For instance combining the javascript and CSS soloution.

Templates comes to our rescue – well almost!

Imagine that you build your content using XSLT: Dynamicweb CMS will build a XML document containing all the “template tag values” in a structured way. A tiny bit of this XML document might be:

...<Global.Extranet.Name>342</Global.Extranet.Name>...

So this way you decide if it is relevant to produce output based on “real” values! You can use the power of XSLT/XPATH to decide what to do. An example:

<xsl:if test="Global.Extranet.Name!=''">
<div>Hi <xsl:value-of select="Global.Extranet.Name" />!</div>
</xsl:if>

All this is done before the content has been send to the client (in Dynamicweb Backend). It is a clean powerfull way to produce exactly what is needed for the page to render as wished.

Nothing is perfect…

When all this is said, I must warn you: The XSLT templates path is – I am sad to say – not always perfect in Dynamciweb CMS. The XML document does not always have all tags. I have some workarounds which I will write about in a later article.

You can see all template tags at templates.dynamicweb.dk.

Share