an introduction to

The Open Melody Software GroupByrne Reese

for designers

what’dya gonna talk about?

• Why Melody?

• Templating Language

• Templates and Themes

• Theme Options & Config Bundles

• Great Tools & Plugins for Designers

about melody

Melody is an open source CMS built by professional service

providers for people who share a passion for community and

creating great web sites.

why melody?

• Easy to use with no knowledge of a programming language required.

• Highly extensible with tons of plugins to choose from.

• Build powerful, secure and reliable web sites with no additional plugins or software needed.

• Create feature rich, social-media aware web sites for customers.

why designers like melody

• Simple, semantic and intuitive templating language.

• Easy to build web sites quickly.

• Focus on features that allow for supportable and maintainable themes and code.

• Upgrade without breaking everything.

getting started:templating language

The Melody Templating Language is a mark-up language

just like:

The Melody Templating Language is a mark-up language

just like:

HTML

<h1>My Website Name</h1>

if this looks familiar...

<h1><$mt:BlogName$></h1>

then so should this.

basic syntax

• Markup Language

• Case Insensitive

• XML-ish

• Examples:

• Function: <$mt:MyTag$>

• Loop: <mt:MyLoop>...</mt:MyLoop>

lotsa variation

These are all equivalent:

• <mt:Foo>

• <MTFoo>

• <$mt:Foo$>

• <mtfoo>

function tags

• <$mt:EntryTitle$>

• <$mt:AuthorName$>

• <$mt:AuthorUserpic$>

• <$mt:AssetThumbnailURL width=”100”$>

• <$mt:CommentText$>

Plus hundreds more...

variables

• Setting a variable:<mt:var name=”foo” value=”bar”>

• Outputting a variable:<mt:var name=”foo”>

• Setting a variable block:<mt:SetVarBlock name=”foo”> <mt:Entries> <$mt:EntryTitle$> </mt:Entries></mt:SetVarBlock>

loops & container tags

• <mt:Entries>

• <mt:Comments>

• <mt:Authors>

• Sort and filter:

• sort, sort_direction, lastn, <filter by>

And many more...

special loop variables

•These are maintained for you:

• __first__

• __last__

• __counter__

• __even__

• __odd__

e.g. <$mt:var name=”__counter__”$>

special loop variables

•These are maintained for you:

• __first__

• __last__

• __counter__

• __even__

• __odd__

e.g. <$mt:var name=”__counter__”$>

Yes, those are two underscores.

includes & encapsulation

• Share HTML and template code between templates

<$mt:include module=”Module Name”$>

• Include:

• Modules

• Widgets

• Files

modifiers

• Can be used to transform any tag

• <$mt:EntryTitle lower_case=”1”$>

• encode_html=”1” (js, xml, etc)

• upper_case=”1”, lower_case=”1”

• count_words=”1”

• trim

• Many more...

<$mt:EntryTitle$> => My “Blog”

<$mt:EntryTitle upper_case=”1”$> => MY “BLOG”

<$mt:EntryTitle lower_case=”1”$> => my “blog”

<$mt:EntryTitle encode_html=”1”$> => My &quot;Blog&quot;

<$mt:EntryTitle count_words=”1”$> => 2

for example...

conditionals

• <mt:if name=”foo” eq=”Byrne”>

• <mt:else name=”foo” eq=”Jay”>

• <mt:else>

• <mt:if name=”foo” ne=”$bar”>

conditional operators

• Equals?<mt:if name=”foo” eq=”Byrne”>

• Not equal to?<mt:if name=”foo” ne=”Byrne”>

• Greater than?<mt:if name=”foo” gt=”10”>

• Less than?<mt:if name=”foo” lt=”366”>

• Plus: le (less then or equal to), ge (greater than or equal to)

<mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if></mt:Entries>

bringing it all together

<mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if></mt:Entries>

bringing it all together

loops

<mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if></mt:Entries>

bringing it all together

conditional tags

<mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if></mt:Entries>

bringing it all together

variables & meta-loop variables

templates

packaging

theme structure

• Themes are broken up into three components:

• a configuration file, a.k.a. “config.yaml”

• templates

• static files (images, stylesheets, javascript, etc)

name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml

config.yaml

name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml

config.yaml

What’s on the file system:plugins/MyTheme/config.yamlplugins/MyTheme/templates/ (your “base path”)plugins/MyTheme/templates/index.mtml (your “Main Index” template)mt-static/plugins/MyTheme/base.cssmt-static/plugins/MyTheme/logo.gif

name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml

config.yaml

What’s on the file system:plugins/MyTheme/config.yamlplugins/MyTheme/templates/ (your “base path”)plugins/MyTheme/templates/index.mtml (your “Main Index” template)mt-static/plugins/MyTheme/base.cssmt-static/plugins/MyTheme/logo.gif

name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml

config.yaml

What’s on the file system:plugins/MyTheme/config.yamlplugins/MyTheme/templates/ (your “base path”)plugins/MyTheme/templates/index.mtml (your “Main Index” template)mt-static/plugins/MyTheme/base.cssmt-static/plugins/MyTheme/logo.gif

total control

• Your config.yaml let’s you:

• Name all the templates.

• Define modules, widgets, sidebars, archives and more.

• Set caching preferences.

• And more...

applying a theme

theme options

“Can you make me a button that does...?

– Famous Customer Quote

“Can you make me a button that does...?

– Famous Customer Quote

“Can you make me a button that does...?

– Famous Customer Quote

“Can you make me a button that does...?

– Famous Customer Quote

“Can you make me a button that does...?

– Famous Customer Quote

“Can you make me a button that does...?

– Famous Customer Quote

“Can you make me a button that does...?

– Famous Customer Quote

• Give customers the controls they need.

• Prevent your users from hanging themselves.

• Extend Melody in seconds.

• Say “goodbye” to PHP and Perl.

name: My Themetemplate_sets: my_theme: label: The Best Theme in the World options: fieldsets: feeds: label: Feeds and Syndication feedburner_id: label: Feedburner URL type: text tag: FeedburnerURL use_feedburner: label: Use Feedburner? hint: Turn on if you want to use Feedburner instead of... type: checkbox tag: IfFeedburnerEnabled?

config.yaml

Supported Option Types

• Simple Text Inputs

• Text Areas

• Radio Buttons

• Checkboxes

• Pull-down Menus

• Blog Selectors

• Entry Selectors

• Image Radio Buttons

Supported Option Types

• Simple Text Inputs

• Text Areas

• Radio Buttons

• Checkboxes

• Pull-down Menus

• Blog Selectors

• Entry Selectors

• Image Radio Buttons

Extensible!

Example: Homepage Manager

Example: Homepage Manager

Fieldsets

Image Radios

Entry Selectors

configuration bundles

Installation Instructions:

Thank you for installing my theme. To get started lets configure your system properly:

1. Navigate to “Comment Preferences” and turn off TrackBacks

2. Navigate to Facebook Plugin preferences and enter in “dc123213b2d96f71458cb8eddd5f3427” as your Application Key.

3. Navigate to “Registration Preferences” and make sure Facebook is checked or enabled.

4. Turn on Twitter Authentication by navigating to plugin settings and entering in the following for your API key:

Installation Instructions:

Thank you for installing my theme. To get started lets configure your system properly:

1. Navigate to “Comment Preferences” and turn off TrackBacks

2. Navigate to Facebook Plugin preferences and enter in “dc123213b2d96f71458cb8eddd5f3427” as your Application Key.

3. Navigate to “Registration Preferences” and make sure Facebook is checked or enabled.

4. Turn on Twitter Authentication by navigating to plugin settings and entering in the following for your API key:

• Make it easy for your clients to configure their system.

• Give them multiple, pre-approved and supported configuration options.

• Pre-configure Melody and plugins.

• Create bundles quickly just by editing a config file.

great tools & pluginsfor designers

Custom CSS

Give clients control without sacrificing supportability and warrantability.

• Dedicated CSS Editor.

• Easily accessible from menu.

• No republishing necessary.

Custom Header

Provide rich user experiences when customizing a design.

• Give clients control over the things they need.

• Provides gratifying and rich user experience.

Image Cropper

Professionally produced images for your web site.

• Define thumbnail sizes for your theme.

• Allow users to crop and annotate images.

• Adjust image size and quality.

Template Profiler

Produce performant code.

• Troubleshoot performance problems.

• Isolate what plugins may be contributing to poor performance.

• Just make things faster!

for later study...

Advanced Topics

• Template Functions

• Global Templates

• Module Caching

• Template Performance Profiling

• Websitehttp://openmelody.org/

• Documentationhttp://docs.openmelody.org/

• Downloadhttp://openmelody.org/code/downloads

• Mailing Listhttp://groups.google.com/group/openmelody

Thank you.