Melody Designer Training

an introduction to for designers The Open Melody Software Group Byrne Reese

what’dya gonna talk about? • Why Melody? • Templating Language • Templates and Themes • Theme Options & Conﬁg 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 ﬁlter: • 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__ Yes, those are two • __last__ underscores. • __counter__ • __even__ • __odd__ e.g. <$mt:var name=”__counter__”$>

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...

for example... <$mt:EntryTitle$> => My “Blog” <$mt:EntryTitle upper_case=”1”$> => MY “BLOG” <$mt:EntryTitle lower_case=”1”$> => my “blog” <$mt:EntryTitle encode_html=”1”$> => My "Blog" <$mt:EntryTitle count_words=”1”$> => 2

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)

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 <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> loops

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> conditional tags

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> 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)

config.yaml name: My Theme Pack template_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 Pack template_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml What’s on the file system: plugins/MyTheme/config.yaml plugins/MyTheme/templates/ (your “base path”) plugins/MyTheme/templates/index.mtml (your “Main Index” template) mt-static/plugins/MyTheme/base.css mt-static/plugins/MyTheme/logo.gif

total control • Your conﬁg.yaml let’s you: • Name all the templates. • Deﬁne 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

• Give customers the controls they need. • Prevent your users from hanging themselves. • Extend Melody in seconds. • Say “goodbye” to PHP and Perl.

config.yaml name: My Theme template_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?

Supported Option Types • Simple Text Inputs • Blog Selectors • Text Areas • Entry Selectors • Radio Buttons • Image Radio Buttons • Checkboxes • Pull-down Menus

Supported Option Types • Simple Text Inputs • Blog Selectors • Text Areas • Entry Selectors • Radio Buttons • Image Radio Buttons • Checkboxes • Pull-down Menus Exten sible!

Example: Homepage Manager

Example: Homepage Manager Image Radios Fieldsets Entry Selectors

conﬁguration bundles

Installation Instructions: Thank you for installing my theme. To get started lets conﬁgure 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

• 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 & plugins for designers

Custom CSS Give clients control without sacriﬁcing 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. • Deﬁne 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 Proﬁling

• Website http://openmelody.org/ • Documentation http://docs.openmelody.org/ • Download http://openmelody.org/code/downloads • Mailing List http://groups.google.com/group/openmelody

Thank you.

http://openmelody.org	416
http://docs.openmelody.org	39
http://posterous.orangescale.net	8
http://feeds.openmelody.org	4
http://www.slideshare.net	4
http://posterous.com	3
http://translate.googleusercontent.com	1

Melody Designer Training

by Byrne Reese on Dec 16, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 475

Statistics

Melody Designer Training — Presentation Transcript