Fluid for Designers

Inspiring people toshareFluid for Designers

Fluid for DesignersBerit Jensen <[email protected]>

Bastian Waidelich <[email protected]>Sebastian Kurfürst <[email protected]>

mailto:[email protected]







What is a Template Engine?

DataDataData Template

Template Engine

DataDataRendered Data


Marker vs. Fluid


News: Display category title

{article.category.title}

###NEWS_CATEGORY###




###NEWS_CATEGORY###

###CATWRAP_B###

###TEXT_CAT_LATEST###

###CATWRAP_E###



###NEWS_CATEGORY###

###CATWRAP_B###

###TEXT_CAT_LATEST###

###CATWRAP_E###

<p><f:translate key=“categoryLabel“ /> {article.category.title}</p>


News: Display list

###TEMPLATE_LATEST###

###TEMPLATE_LIST###

###TEMPLATE_LIST2###


News: Display list

<f:for each="{articles}" as="article" iteration="iteration"><h2>{article.title}</h2><f:if condition="{iteration.cycle} == 1">

<f:image src="{article.image}" maxWidth="500" /></f:if>

</f:for>


What markers are available?

NEWS_UID - ID number (uid) of the news itemNEWS_TITLE - News item title

NEWS_AUTHOR - name of authorNEWS_EMAIL - email of author

NEWS_DATE - dateNEWS_TIME - time

NEWS_AGE - age of news item in minutes, hours, days or yearsNEWS_SUBHEADER - subheader, if empty main content is inserted here in LIST and LATEST

NEWS_CONTENT - main contentNEWS_LINKS - news links

NEWS_CATEGORY - news item categoryNEWS_CATEGORY_IMAGE - news item category image

NEWS_RELATED - links to related newsNEWS_IMAGE - news item images

NEWS_CATEGORY_ROOTLINE - category rootline

PAGE_UID - Page id of the parent page (pid)PAGE_TITLE - Title of the parent page of the news item

PAGE_AUTHOR - Page author, if anyPAGE_AUTHOR_EMAIL - Page author email, if any

<em>News Language Markers (see pi/locallang.php):</em>LATEST_HEADER - header for the LATEST element

GOTOARCHIVE - link to archive page in latest templateARCHIVE_HEADER - same for AMENU

MORE - more ;-)TEXT_CAT - text output before categories and category images in LIST view (eg: 'categories:')

TEXT_CAT_LATEST - the same in a shorter form for the LATEST element (eg: 'cat:')BACK_TO_LIST - link back to list-view in single-view template

ARCHIVE_EMPTY_MSG - no items in archiveSEARCH_EMPTY_MSG - message for empty search results

TEXT_NEWS_AGE - text inserted before the age of the news item

!?!?

The shown personas are models and have nothing to do with the depicted work context.


... three weeks later ...


A Marker is missing!

Wait a second, I'll create something.



http://center.gordonswine.com /stuff/contentmgr/files/fce82a1b415a4b47138a8b5e58b74dc2/images/33_smoking_cosmos_on_the_bar.jpg

http://center.gordonswine.com/stuff/contentmgr/files/fce82a1b415a4b47138a8b5e58b74dc2/images/33_smoking_cosmos_on_the_bar.jpg

http://center.gordonswine.com/stuff/contentmgr/files/fce82a1b415a4b47138a8b5e58b74dc2/images/33_smoking_cosmos_on_the_bar.jpg


I need this marker...

Wait, it's a lot easier now!

:-)

Articletitledatecontentimagecategory

Categorytitleimage


UML is scary!


Articletitledatecontentimagecategory

Categorytitleimage

{article.title}


UML is not scary!

Sneak Preview


?????????????

inspiring people to share.

Fluid for Designers

Technology

Transcript of Fluid for Designers