A collection of XSL utilities for use with Symphony CMS.
Created by The Workers unless otherwise stated. Inspired by many.
- 2.2 — unsure
- 2.1.2 — yes
- less than 2.1.2 — unsure
Please do fork or send comments to us, if only to let us know this interests to you.
- XSL utilities for use with Symphony CMS.
- HTML templating engine for use with Symphony CMS.
- Namespaced
- Keep detached from Symphony CMS
- Imperfect
- Identify & distigush framework
- Template Engine
- XSL independance
- Allow for editing by front-end developers
- Avoid XSL jargon
- Separation of Templates & Logic (admirable aspiration?)
- Templates should be editable editable without touching XSL
- Simplicity in XSL for Pages (Symphony v3 Views)
- Intuitive syntax and logic for edit by a non-XSL specialised developer
- Allow for editing by front-end developers
- Use HTML syntax in Templates
- tag
- separation of including templates file and CSM/Symphony Data
- see: W.template-engine suggested Style Guidelines
- separation of including templates file and CSM/Symphony Data
- tag
- Style Guidelines
- Develop an style implementation of the template engine
- Unified usage
- Allow for support
- Examples
- Develop an style implementation of the template engine
- Documentation
- XSL independance
- Example Code
- XSL
- Possible Ensemble?
- Tests
- Possible?
- Supportive Frontend Libraries
- JavaScript Fragments
(aka: Watch What You Wish For)
- w.xsl as a:
- jQuery of Symphony CMS and XSL
- A $.each() of the Muenchain Method
- A $.ninja ha! disucss
- jQuery of Symphony CMS and XSL
- Symphony CMS Forum Thread
- Work in Progress
- See: let us know this is of interest to you
- Work in Progress
(aka: an XSL Ninja to for use with HTML Templates)
Default import of all w.template-engine utilities:
- W.template-engine.ninja.xsl
- W.template-engine.helpers.xsl
To selective include w.template-engine create your own include file.
Include an HTML file:
<cms include="template.html" />
<cms include="news.story.html" />
Replace with information form symphony:
<cms select="navigation" />
<cms select="title" />
Email Obfuscation
turns user@domain.com into domain.com[at]user
@todo: include .js exa.ple
- Created by Nick Dunn *
This is a date formatting utility. The named template "format-date" takes 2 parameters:
- date - [required] takes an ISO date (2005-12-01)
- format - [optional] takes a format string.
Y - year in 4 digits e.g. 1981, 1992, 2008
y - year in 2 digits e.g. 81, 92, 08
M - month as a full word e.g. January, March, September
m - month in 3 letters e.g. Jan, Mar, Sep
N - month in digits without leading zero
n - month in digits with leading zero
D - day with suffix and no leading zero e.g. 1st, 23rd
d - day in digits with leading zero e.g. 01, 09, 12, 25
x - day in digits with no leading zero e.g. 1, 9, 12, 25
T - time in 24-hours e.g. 18:30
t - time in 12-hours e.g. 6:30pm
W - weekday as a full word e.g. Monday, Tuesday
w - weekday in 3 letters e.g. Mon, Tue, Wed
M => January
d M => 21 September
m D, y => Sep 21st, 81
n-d-y => 09-21-81
d/n/y => 21/09/81
d/n/y t => 21/09/81 6:30pm
From: http://github.com/tmslnz/Magical-JIT-Resizer
Image resizer using a Symphony CMS upload-field.
Generated tags. Fallbacks to DummyImage generator.
upload
: takes an xPath of Symphony's<upload>
node- if
upload
is omitted, it will generate a dummy image with the specified dimensions (w
andh
dimensions required in that case)
'w'
: the requested width'h'
: the requested height (both can be set)- (standard
<img/>
attributes.class
,id
,title
,name
,longdesc
, etc.) value-only
: if set to either'w'
or'h'
will return only the result number not the whole<img/>
tag.mode
:'normal'
,'fit'
,'max'
- normal: none,
'w'
,'h'
,'w'
and'h'
- fit:
'w'
and'h'
- max:
'w'
,'h'
,'w'
and'h'
In normal mode the scaler takes whateverh
and/orw
is passed and scales the specified dimensions to whatever value was passed.
If eitherw
orh
are passed, then the missing value is derived proportionally. If both values are passed then both are applied, effectively constraining the image to a specified size.
In fit mode both h and w are required. The two values define the area within which the scaler has to proportionally fit the image. JITmode
: JIT modes (see docs on Symphony-CMS.com)JITcenter
: JIT center1
to9
JITexternal
:0
orurl
(without thehttp://
part)
No explicit size = original size
<xsl:call-template name="img">
<xsl:with-param name="upload" select="$upload"/>
</xsl:call-template>
Specifying both dimensions, using no explicit mode, will output exactly what you asked for.
<xsl:call-template name="img">
<xsl:with-param name="upload" select="$upload"/>
<xsl:with-param name="w" select="300"/>
<xsl:with-param name="h" select="200"/>
</xsl:call-template>
To trigger this simply omit one dimension
<xsl:call-template name="img">
<xsl:with-param name="upload" select="$upload"/>
<xsl:with-param name="w" select="300"/>
</xsl:call-template>
This is useful if you want to proportinally constrain your images to set dimensions.
<xsl:call-template name="img">
<xsl:with-param name="upload" select="$upload"/>
<xsl:with-param name="mode" select="'fit'"/>
<xsl:with-param name="w" select="400"/>
<xsl:with-param name="h" select="400"/>
</xsl:call-template>
Makes sure that any automatically calculated value will be a (nearest neighbor) multiple of the grid you set.
<xsl:call-template name="img">
<xsl:with-param name="upload" select="$upload"/>
<xsl:with-param name="mode" select="'trim'"/>
<xsl:with-param name="gridsize" select="50"/><!-/- This will set a 50px grid -/->
<xsl:with-param name="w" select="400"/>
<!-/- i.e.: 'h' will be trimmed to the nearest neighbor grid -/->
</xsl:call-template>
Straighforward. W and H values are used as multiplier in this case.
<xsl:call-template name="img">
<xsl:with-param name="upload" select="$upload"/>
<xsl:with-param name="gridsize" select="50"/><!-/- This will set a 50px grid -/->
<xsl:with-param name="w" select="3"/> <!-/- When in 'pure' grid mode, these values act as multipliers -/->
<xsl:with-param name="h" select="2"/>
</xsl:call-template>
w and h needed as we don't have XML metadata on the fetched image
<xsl:call-template name="img">
<xsl:with-param name="upload" select="'images.apple.com/home/images/mbp_hero20110224.png'"/>
<xsl:with-param name="w" select="400"/>
<xsl:with-param name="h" select="200"/>
</xsl:call-template>
Note that we are not passing any upload param in this case.
<xsl:call-template name="img">
<xsl:with-param name="w" select="200"/>
<xsl:with-param name="h" select="150"/>
</xsl:call-template>
<xsl:apply-templates match="upload">
<xsl:with-param name="w" select="300"/>
</xsl:apply-templates>
<xsl:call-template name="img">
<xsl:with-param name="upload" select="$upload"/>
<xsl:with-param name="w" select="500"/>
<xsl:with-param name="class" select="'someclass anotherclass'"/>
<xsl:with-param name="id" select="'myID'"/>
<xsl:with-param name="title" select="'Herr Title'"/>
</xsl:call-template>
When this template is used as a match rather than called by name, the DummyImage mode is effectively inaccessible.
Besides, it wouldn't make sense since you if have a match, then you have an upload.