Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Designed Content 1.4 - Powerful Token Templates

This is part 4 of my first series about beautiful content. In this part we'll learn that we can create amazing templates using simple technologies like Token-placeholders. And we'll discover how to integrate the image-resizer, use presentation-settings and more. 

What came before

In the previous sections (1.1 Introduction to Beautiful Content and 1.2 Separating Content from Beautiful Templates) we reviewed our goals, what we need to achieve it and various tools. If you have not read those parts, I recommend you start there.

Then in the previous post 1.3 An Introduction to 2sxc you saw the user experience for a simple scenario - and it ended with this template:

So this is a self-contained, responsive, automatically image-resizing content-template. In this post, we'll look at the placeholders and magic behind them.

Preparations to experience this yourself

The example in this blog is part of the default installation of 2sxc. So to try this yourself, all you have to do is install 2sxc (see demo-video) and when you insert the content module, press the large button to install the default templates (see screenshot below).

You can also always fiddle around with the templates either by opening the HTML-files in the [Portal]/2sxc/Content folder or directly online - through this entry:

[Tokens:Description] - What are Tokens?

For simple templates that don't require server-code, it's enough to use placeholders called Tokens. The syntax is a simple [DataSource:Key] - where data-source could be Content, QueryString or something and key any kind of key available in that data-source.

Tokens are limited because they can't do if-statements or database requests, but they are ideal for all these simple scenarios because they are "safer" - since no code is executed, you don't have to worry about server-security.

Basic Content-Tokens

So let's start with the placeholders for Content - these:

Some Tokens from supporting data-sources

The following tokens come from special sources:

  • App is a bit like a module - it can contain custom settings, resources (for multilanguage-templates) and of course general information like "in what path is this template stored".
  • Presentation are optional view-settings just for this one case. So the same information could be displayed multiple times, and the presentation-settings could be different each time. In this case, there are settings for the H1, H2 etc. to define the heading size.
  • You may have noticed the special co-[Presentation:Heading]-hide class. This is a simple trick to hide the title if needed, because we can't use an if-statement; so the co-h2-hide is visible, but co-hide-hide is invisible.

More automatic Helpers

The following highlight shows more features:

  • On link and script tags, the attribute data-enableoptimizations="true" or data-enableoptimizations="101" (or any number) will automatically bundle/zip CSS and JavaScript using the DNN Client Dependency stuff. If you use a number, it will control the order in which the files are included.
  • The tag [Content:Toolbar] will automatically add an edit-toolbar when in edit-mode, while the class "sc-element" (for SexyContent-element) will help float the buttons on mouse-over.
  • ?w=###&h=### etc. will automatically resize and crop the picture. This is very powerful and absolutely necessary if you want to have pre-designed content look great.

Summing Up

That was the brief introduction to Token Templates. As you can see, even such simple tools can create powerful templates if the environment (in this case 2sxc) is powerful. In the next parts, we'll look at how you can adapt the existing templates to your design and how to create new templates - using Token-templates and Razor-Views which offer more power and control.

Stay sexy,

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 600 DNN projects since 1999. He is also chief architect of 2sxc (2SexyContent - see forge), an open source module for creating attractive content and DNN Apps.


There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (22)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (270)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?