EECI 2010 - The Power of ExpressionEngine's Dynamic Templates

THE POWER OF EE'S DYNAMIC TEMPLATES welcome to Welcome Thank
Robert and Sponsors Spoke in Netherlands last year

HELLO My Name is Jonathan Longnecker @necker47 [email protected]

HELLO His Name is Nate Cro @natecroft [email protected]

@47m http://fortysevenmedia.com

Met in Highschool Guitar Write Songs Band

2002 First Website Flash

2005 First 47m Website Flash

2006 First HTML/CSS Notice the EE brackets

2007 First EE Site - one page

2008 - PRESENT Full EE Site - Blog, portfolio Lots
of recognition Rebrand

2009 Full Circle - Nate and I keep making music

2009 And create a site to ﬁnd new music from
other designers built on EE

WHAT ARE TEMPLATES? A brief overview Naming Confusion *****Questions are
ok!!

What are Templates? A brief description SEPARATION REUSABILITY PRESENTATION Organize
Parts of Site However You Want Alter Template Presentation Based on Variables Chop Your Site into Maintainable Reusable Chunks Document for Code Reusablity - Slyman Analytics

TYPES OF TEMPLATES Hint: there’s more than one

Types of Templates Hint: there’s more than one TEMPLATE GROUP
Global Variables Embedded Templates Snippets (2.0) TEMPLATE

TEMPLATE GROUPS • Groups of templates • Like folders on
your server • Can setup URL structure Types of Templates Hint: there’s more than one Explain Screenshot URL's

TEMPLATES • Building blocks of your site • Can contain
global variables, snippets, pre- loaded text replacement and other templates • Can also contain HTML/JS, PHP, etc... • Embedded templates can pass variables • Nest multiple templates inside one another Types of Templates Hint: there’s more than one Pass Variables How deep can you embed?

TEMPLATE TYPES Types of Templates Hint: there’s more than one
*Icons om Espresso

CSS STYLESHEET Types of Templates *Icons om Espresso Serve the
Template as "text/css" MIME type. No EE tags; served "as is."

RSS PAGE Types of Templates Hint: there’s more than one
Used for RSS and Atom syndication feeds. Served as "text/xml" MIME type. *Icons om Espresso

JAVASCRIPT Types of Templates Hint: there’s more than one Used
for outputting Javascript code. Sends "text/javascript" MIME type. *Icons om Espresso

STATIC Types of Templates Hint: there’s more than one Useful
for HTML design elements embedded in other templates. No EE tags. *Icons om Espresso

XML Types of Templates Hint: there’s more than one Used
for outputting XML pages. Sends "text/xml" MIME type. *Icons om Espresso

Types of Templates Hint: there’s more than one Create new
template groups by uploading folders. Just add .group to group name. *****Any Questions?

GLOBAL VARIABLES • EE has about 30 built in •
Last thing processed in templates • For static info only • EE tags won’t work • Great for: header, footer, copyright, stylesheet links, etc... Types of Templates Hint: there’s more than one

GLOBAL VARIABLES <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/ html;
charset=utf-8" /> <link rel="Shortcut Icon" href="/favicon.ico"/> {html_head} <title>Title of Page</title> {blog_feeds} {stylesheets} {html_head_end}  <link rel="alternate" title="Projects and Rentals" href="/site/feed" />  <link href="reset.css" media="screen" /> <link href="design.css" media="all" /> </head> Types of Templates

GLOBAL VARIABLES <title>Title of Page</title> {html_head} {blog_feeds} {stylesheets} {html_head_end} Types
of Templates Cleaned up Header *****Any Questions?

GLOBAL VARIABLES Types of Templates Talk about Show and Tell
How many have kids? Buy clothes? Consignment = sell your old clothes, buy new ones. Signup to help and get discounts/ﬁrst pick Used 3rd party to login, manage your items for sale. Barcodes, POS, etc...

GLOBAL VARIABLES <a href="http://itcanchange.com">Register To Sell</a> {register} Types of Templates

GLOBAL VARIABLES <a href="{register}">Register To Sell</a> Types of Templates *****Any
Questions?

SNIPPETS (2.0) • Like an embedded template, but without the
overhead • Processed early in rendering stages • Will parse EE tags • Can share snippets with MSM Types of Templates Hint: there’s more than one Too many database calls with regular templates

GLOBAL VARIABLES © {current_time format="%Y"}. All Rights Reserved {footer} Types
of Templates

GLOBAL VARIABLES © 2010. All Rights Reserved. Types of Templates
*****Any Questions?

EMBEDDING TEMPLATES It’s fun and easy!

NAVIGATION

NAVIGATION <body> <div id="header"><h1>Site Name Here</h1></div> global/nav <ul id="nav"> <li><a
href="#">Overview</a></li> <li><a href="#">Another One</a></li> <li><a href="#">A Third One</a></li> </ul> Embedding Templates <div id="content">Content</div> </body> NOT useful

NAVIGATION <body> <div id="header"><h1>Site Name Here</h1></div> {embed="global/nav"} Embedding Templates <div
id="content">Content</div> </body> NOT USEFUL

PASSING VARIABLES BREAK Passing Stuff

PASSING VARIABLES {embed="global/nav" name="jonathan"} Embedding Templates <ul id="nav"> <li><a href="#">{embed:name}</a></li>
<li><a href="#">Another One</a></li> <li><a href="#">A Third One</a></li> </ul> <ul id="nav"> <li><a href="#">Jonathan</a></li> <li><a href="#">Another One</a></li> <li><a href="#">A Third One</a></li> </ul>

NAVIGATION <body> <div id="header"><h1>Site Name Here</h1></div> global/nav <ul id="nav"> <li
{if '{embed:loc}' == 'home'} class="current"{/if}> <a href="#">Overview</a></li> <li {if '{embed:loc}' == 'two'} class="current"{/if}> <a href="#">Another One</a></li> <li {if '{embed:loc}' == 'three'} class="current"{/if}> <a href="#">A Third One</a></li> </ul> Embedding Templates <div id="content">Content</div> </body>

<body> <div id="header"><h1>Site Name Here</h1></div> {embed="global/nav" loc="home"} Embedding Templates <div
id="content">Content</div> </body> NAVIGATION *****Any Questions?

FOOTER

<body> <div id="header"><h1>SiteName</h1></div> <div id="content">Content Here</div> <div id="footer"> <p>© {current_time
format="%Y"} FortySeven Media. All Rights Reserved</p> </div> </body> Embedding Templates FOOTER global/footer

<body> <div id="header"><h1>SiteName</h1></div> <div id="content">Content Here</div> {embed="global/footer"} Embedding Templates FOOTER
Could also be snippet *****Any Questions?

SIDEBAR Came in from the side! It's the little things.

<div id="sidebar"> <ul id="nav"> <li><a href="#">Overview</a></li> <li><a href="#">Another One</a></li> <li><a
href="#">A Third One</a></li> </ul> <div id="callouts"> Callouts Go Here </div> </div> Embedding Templates SIDEBAR global/sidebar

<div id="content"> <h1>Header Here</h1> <p>Paragraph</p> </div> {embed="_global/sidebar"} <div id="footer"> <p>©
2010. All Rights Reserved></p> </div> Embedding Templates SIDEBAR *****Any Questions? LEVEL UP!!!!!!

LEVEL UP!

IF & SEGMENTS Bend it to your will Holy Crap,
changed the way I use EE

SEGMENT VARIABLES

If & Segments Bend it to your will http://site.com/blog/entry/title/ Segment
1 Segment 2 Segment 3

SEGMENT VARIABLES {segment_1} {segment_2} {segment_3} If & Statements http://site.com/blog/entry/title/ {exp:weblog:entries
url_title="{segment_3}"} <h1>{title}</h1> <p>{body}</p> {/exp:weblog:entries} *****Any Questions?

CONDITIONALS BREAK fun with If statements

CONDITIONALS {if username == "Mr. T"} <h1>Pity the Fool!</h1> {/if}
If & Statements BASIC VARIABLE {if username == "peanut_butter" AND username == "jelly"} <h1>Sandwich Time!</h1> {/if} ADVANCED VARIABLE pair type variables conditionally show or hide information on your pages based on criteria being met Advanced conditionals Parsed after all EE tags

CONDITIONALS {if username == "weezer"} <h1>"Say it ain't so!"</h1> {if:elseif
username == "radiohead"} <h1>"I'm a creep."</h1> {if:else} <h1>It's all just rock and roll.</h1> {/if} If & Statements ELSE & ELSEIF Looks for Weezer ﬁrst, then radiohead. If neither are logged in, defaults to generic.

CONDITIONALS == "equal to" != "not equal to" < "less
than" <= "less than or equal to" > "greater than" >= "greater than or equal to" <> "not equal to" If & Statements OPERATORS You can use any of the following operators to compare a variable to a value: Logical operators compare multiple variables to multiple values, not getting in to that.

CONDITIONALS {if group_id == '3'} {if logged_in} {if logged_out} {if
member_group == '3'} {if member_id == '47'} {if logged_in_member_id == '47'} {if screen_name == 'Mr. T'} {if total_comments > 0} {if total_entries > 0} {if segment_X == 'private'} {if username == 'elvira'} If & Statements GLOBAL CONDITIONALS Don't have to use quotes around numbers *****Any Questions?

LISTING & SINGLE ENTRY IN ONE TEMPLATE

LISTING & SINGLE ENTRY IN ONE TEMPLATE <head> {if segment_3}
{exp:weblog:entries weblog="{my_weblog}" limit="1"} <meta name="description" content="{title}" /> <title>{title} | Events | About | Edgepoint Church</title> {/exp:weblog:entries} {if:else} <meta name="description" content="Upcoming Events" /> <title>Events| About | Edgepoint Church</title> {/if} </head> If & Segments HEADER

<body> {if segment_3} {exp:weblog:entries weblog="news" limit="1" url_title="{segment_3}"} <h1>{title}</h1> {body} {/exp:weblog:entries}
{if:else} <h1>Upcoming Events</h1> <ul id="events"> {exp:weblog:entries weblog="news" limit="50" } <li><a href="{url_title_path="about/events"}">{title}</a></li> {/exp:weblog:entries} </ul> {/if} </body> LISTING & SINGLE ENTRY IN ONE TEMPLATE If & Segments BODY *****Any Questions?

CUSTOM CATEGORY URL'S Custom Furniture Builders Don't know prices Embezzlement?

If & Segments Bend it to your will http://site.com/products/sofas/10-123/ Volunteers:
3 people, one for each segment Nesting Dolls - Person 1 has biggest -on down

If & Segments Bend it to your will http://site.com/products/sofas/

If & Segments Bend it to your will http://site.com/products/

If & Segments Bend it to your will http://site.com/products/sofas/10-123/ Template
Group Segment 1 Category Segment 2 Entry Title Segment 3 EE Wants to add trigger Messy, not a good breadcrumb trail All 3 pages in one template

CUSTOM CATEGORY URL'S {if segment_2=="" AND segment_3==""} {exp:weblog:categories weblog="yours" style="linear"}
<p><a href="{path="template_group/ {category_url_title}"}">{category_name}</a></p> {/exp:weblog:categories} If & Segments THE CATEGORIES PAGE

CUSTOM CATEGORY URL'S {if:elseif segment_2!="" AND segment_3==""} {exp:query sql="SELECT cat_id
FROM exp_categories WHERE cat_url_title = '{segment_2}'"} {exp:weblog:entries weblog="yours" category="{cat_id}"} <p><a href="{title_permalink={segment_1}/ {segment_2}}">{title}</a></p> {/exp:weblog:entries} {/exp:query} If & Segments THE CATEGORY ENTRIES PAGE Low Seg2Cat option

CUSTOM CATEGORY URL'S {if:elseif segment_3!=""} {exp:weblog:entries weblog="yours" limit="1" url_title="{segment_3}"} Call
whatever custom fields you have here {/exp:weblog:entries} {/if} If & Segments THE SINGLE ENTRY PAGE Next/Previous don't work..not sure about pagination Low Seg2cat Only worked because each product had one category *****Any Questions?

REAL WORLD EXAMPLES is stuﬀ really happened!

DESIGNERS MUSIC AJAX TOOLTIP

DESIGNERSMUSIC AJAX TOOLTIP Real World Examples AJAX TOOLTIP • Cluetip
jQuery shows external webpage • Used 1 template and added entry_id

DESIGNERSMUSIC AJAX TOOLTIP Real World Examples

DESIGNERSMUSIC AJAX TOOLTIP Real World Examples ALBUM • Album Name
• Artist • Artwork • Website • Preview • Purchase Link

Real World Examples {exp:weblog:entries weblog="music" orderby="artist|title" sort="desc" limit="1" dynamic="off"} <h2>{artist}</h2>
<a href="{site_url}music/detail/{entry_id}" class="jt artwork" rel="{site_url}music/ajax/{entry_id}"> {exp:imgsizer:size src="{artwork}" width="140" height="140" alt="{title}"}</a> <h3>{title}</h3> {/exp:weblog:entries} DESIGNERSMUSIC AJAX TOOLTIP CALLS IN MAIN TEMPLATE

{exp:weblog:entries weblog="music" limit="1" } <div class="jtip-albumimg">{exp:imgsizer:size src="{artwork}" width="64" height="64" alt="{title}"
}</div> <h1>{title}</h1> <h2>{artist}</h2> {if artist-website} Artist Website <a href="{artist-website}">{artist-website}</a> {/if} Recommended by <a href="/members/profile/{member_id}"> {author}</a> {if location} from {location}{/if} CALLS IN MAIN TEMPLATE DESIGNERSMUSIC AJAX TOOLTIP *****Any Questions?

KINGDOM LANDSCAPES GROUPED PROJECTS

KINGDOM LANDSCAPES GROUPED PROJECTS Real World Examples CATEGORY GROUPS •
Overview Projects Page • Group entry by category • Reuse same template

Real World Examples {exp:weblog:categories weblog="projects" show="6" style="linear"} <h2>{category_name} Projects</h2> <a
href="{path=projects/list}">View {category_name} projects</a> {/exp:weblog:categories} {exp:weblog:entries weblog="projects" category="6" orderby="random" limit="2" } <a href="{url_title_path="projects/archives"}">{exp:imgsizer:size src="{main_image}" width="198" height="142" alt="{title}" }</a> <h3>{title}{entry_date format="%d/%m/%y"}</h3> <p>{exp:word_limit_plus stop_after="18"}{exp:html_strip} {description}{/exp:html_strip}{/exp:word_limit_plus}</p> <a href="{url_title_path="projects/archives"}">View Project</a> {/exp:weblog:entries} KINGDOM LANDSCAPES GROUPED PROJECTS CALLS IN MAIN TEMPLATE

Real World Examples {exp:weblog:categories weblog="projects" show="{embed:cat}" style="linear"} <h2>{category_name} Projects</h2> <a
href="{path=projects/list}">View {category_name} projects</a> {/exp:weblog:categories} {exp:weblog:entries weblog="projects" category="{embed:cat}" orderby="random" limit="2" } <a href="{url_title_path="projects/archives"}">{exp:imgsizer:size src="{main_image}" width="198" height="142" alt="{title}" }</a> <h3>{title}{entry_date format="%d/%m/%y"}</h3> <p>{exp:word_limit_plus stop_after="18"}{exp:html_strip} {description}{/exp:html_strip}{/exp:word_limit_plus}</p> <a href="{url_title_path="projects/archives"}">View Project</a> {/exp:weblog:entries} KINGDOM LANDSCAPES GROUPED PROJECTS PROJECT ARTICLE

Real World Examples {embed="global/project_article" cat="6"} {embed="global/project_article" cat="7"} {embed="global/project_article" cat="8"} {embed="global/project_article"
cat="9"} KINGDOM LANDSCAPES GROUPED PROJECTS CALLS IN MAIN TEMPLATE

FOLIAGE DESIGN ARTICLES

FOLIAGE DESIGN ARTICLES Real World Examples

FOLIAGE DESIGN ARTICLES Real World Examples PROJECT & PLANT ARTICLES
• Project and plant channels had the same format • Needed to be able to use in a variety of sizes • Main, Homepage, Sidebar • Images and text truncating needed to be adjusted

FOLIAGE DESIGN ARTICLES Real World Examples {exp:weblog:entries weblog="projects" limit="3" dynamic="off"}
<div class="article {switch='||last'}"> <a href="{url_title_path="projects"}" title="{title}" > {projects limit="1"} {exp:imgsizer:size src="{img}" width="200" height="100"} {/projects} </a> <h4>{exp:trunchtml chars="25"}{title}{/exp:trunchtml}</h4> <a href="{url_title_path="projects"}">View Project</a> </div> {/exp:weblog:entries} THE ARTICLE

FOLIAGE DESIGN ARTICLES Real World Examples {exp:weblog:entries weblog="{embed:weblog}" {embed:sort} {embed:cat}
{embed:orderby} limit="{embed:limit}" status="{embed:status}" {embed:url_title} disable="member_data|pagination|trackbacks|category_fields" {embed:dynamic} {embed:entry_id} } THE ARTICLE

FOLIAGE DESIGN ARTICLES Real World Examples {exp:weblog:entries weblog="{embed:weblog}" limit="{embed:limit}" {embed:dynamic}
} <div class="article {embed:switch}"> <a class=href="{url_title_path="{embed:path}"}" title="{title}" > {{embed:ff_shortname} limit="1"} {exp:imgsizer:size src="{img}" width="{embed:width}" height="{embed:height}" alt="{caption}" } {/{embed:ff_shortname}} </a> <h4>{if '{embed:loc}' == 'sidebar'}{exp:trunchtml chars="20" inline="..."}{title}{/exp:trunchtml}{if:else}{exp:trunchtml chars="25" inline="..."}{title}{/exp:trunchtml}{/if}</h4> <a href="{url_title_path="{embed:path}"}">View {embed:type}</a> </div> {/exp:weblog:entries} THE ARTICLE *****Any Questions?

FOLIAGE DESIGN ARTICLES Real World Examples {embed="_global/mini_articles" weblog="projects" orderby="orderby='random'" limit="3"
switch="{switch='||last'}" path="projects" width="202" height="129" ff_shortname="project_images" type="Project" cat="category='3'" status="open|featured"} EMBEDDING THE ARTICLE

DESIGNERS MUSIC AUTO COMPLETE

Real World Examples {exp:weblog:entry_form weblog="music" return="submit/ success" } <input type="hidden"
name="field_ft_4" value="none" /> <input type="hidden" name="field_ft_6" value="none" /> <label>Album Name</label> <input class="txt-input album-title" type="text" name="title" id="title" value="{title}" /> <label>Artist Name</label> <input class="txt-input artist-ac" type="text" dir="ltr" id="field_id_4" name="field_id_4" value="" /> <label>Artist Website</label> <input class="txt-input artist-website-ac" type="text" dir="ltr" id="field_id_6" name="field_id_6" value="http://" /> {/exp:weblog:entry_form} DESIGNERSMUSIC AJAX AUTOCOMPLETE

var artist = ["Starflyer 59", "Hammock", "Coldplay", "Heroes or Ghosts",
"The Asteroids Galaxy Tour", "Blindside", "Common Children", "Elliot", "Feeder", "Fleet Foxes", "John Hopkins", "Andrew Bird", "Tyler Melashenko"]; var website = ["http://sf59.com/", "http://hammockmusic.com/", "http://coldplay.com/", "http://heroesorghosts.com", "http://www.theasteroidsgalaxytour.com/" "http://www.myspace.com/fleetfoxes"]; var album_title = ["Starflyer 59 (Gold)", "Maybe They Will Sing for Us Tomorrow", "Kenotic", "Raising Your Voice Trying to Stop an Echo", "Americana", "Leave Here a Stranger", "Silver (Extended Edition)", "My Island", "Dial M"]; LOCALDATA DESIGNERSMUSIC AJAX AUTOCOMPLETE *****Any Questions?

$().ready(function() { function findValueCallback(event, data, formatted) { $("<li>").html( !data ?
"No match!" : "Selected: " + formatted).appendTo("#result");} function formatItem(row) { return row[0] + " (<strong>id: " + row[1] + "</strong>)";} function formatResult(row) { return row[0].replace(/(<.+?>)/gi, '');} $("input.artist-ac").autocomplete(artist); $("input.artist-website-ac").autocomplete(website); $("input.album-title").autocomplete(album_title); }); JAVASCRIPT DESIGNERSMUSIC AJAX AUTOCOMPLETE *****Any Questions?

SMITH STUDIOS MULTI- MEDIA LIGHTBOX Photography Campaigns

SMITH STUDIOS MULTI-MEDIA LIGHTBOX Real World Examples GALLERY • Colorbox
serving images and media • Needed to have images, movies, etc... in the same gallery • Show the ﬁrst image, oﬀset the others

SMITH STUDIOS MULTI-MEDIA LIGHTBOX Real World Examples GALLERY • Using
Matrix • File Upload • Movie or SWF • Width & Height

SMITH STUDIOS MULTI-MEDIA LIGHTBOX Real World Examples

Real World Examples {exp:weblog:entries weblog="content"} {images limit="1"} <a class="img-gallery" href="{img}"
title="{img-caption}"> {exp:imgsizer:size src="{img}" width="460" height="260" alt="{img-caption}" }</a> {/images} {!--Hidden--} {images offset="1"} {if mov} <a class="img-gallery" href="/mov/{entry_id}/{row_count}"> {img-caption}</a> {if:else} <a class="img-gallery" href="{img}">{img-caption}</a> {/if} {/images} SMITH STUDIOS MULTI-MEDIA LIGHTBOX ENTRIES

Real World Examples {exp:weblog:entries weblog="content" limit="1"} {embed="site/quicktime" row_id="{segment_3}"} {/exp:weblog:entries} MOV
SMITH STUDIOS MULTI-MEDIA LIGHTBOX Matrix Updated as of 2 weeks ago to include {row_id}

Real World Examples {exp:weblog:entries weblog="content" limit="1" } {images limit="1" offset="{embed:row_id}"
}  <OBJECT classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width="{mov-width}" height="{mov-height}"> <param name='src' value="{img}"> <EMBED src="{img}" width="{mov-width}" height="{mov-height}"> </EMBED> </OBJECT> {/images} {/exp:weblog:entries} QUICKTIME SMITH STUDIOS MULTI-MEDIA LIGHTBOX *****Any Questions?

FOLIAGE FLEXIBLE CONTACT FORM

FOLIAGE FLEXIBLE CONTACT FORM Real World Examples CONTACT FORM •
On almost every page • Budget changes based on what user is viewing • Use a single template for maintainability

Real World Examples {exp:freeform:form form_name="contact_form" required="name| email|message{embed:required}" notify="me" template="contact_form" return="contact/thanks"
form_id="contact_form"} <label class="required">Current Page</label> <input class="std-input" type="text" name="location" value="{site_url}{segment_1}/{segment_2}" size="50" /> FOLIAGE FLEXIBLE CONTACT FORM Send info about what page they were on Embed Required

Real World Examples {if '{embed:type}' == 'project'} <label class="required">Budget*</label> <select
name="budget"> <option value="">Choose One...</option> <option value="$10,000 - $30,000">$10,000 - $30,000</option> <option value="$30,000 - $80,000">$30,000 - $80,000</option> <option value="$80,000 - $150,000">$80,000 - $150,000</option> <option value="$150,000+">$150,000+</option> </select> <span class="price">$ prices in TTD</span> {/if} FOLIAGE FLEXIBLE CONTACT FORM

Real World Examples {if '{embed:type}' == 'rental'} <label class="required">Budget*</label> <select
name="budget"> <option value="">Choose One...</option> <option value="$500 - $1,000">$500 - $1,000 per mo.</option> <option value="$1,000 - $1,500">$1,000 - $1,500 per mo.</option> <option value="$1,500 - $2,000">$1,500 - $2,000 per mo.</option> <option value="$2,000+">$2,000+ per mo.</option> </select> <span class="price">$ prices in TTD</span> {/if} FOLIAGE FLEXIBLE CONTACT FORM

Real World Examples {if '{embed:type}' == 'irrigation'} <label class="required">Budget*</label> <select

Real World Examples {if '{embed:type}' == 'lighting'} <label class="required">Budget*</label> <select

Real World Examples {if '{embed:type}' == 'water_features'} <label class="required">Budget*</label> <select

Real World Examples {if '{embed:type}' == 'generic'} <select class="twoup first"
name="project_type" id="or" onchange="populate(this)"> <option value="">Choose One...</option> <option value="Landscaping Project">Landscaping Project</option> <option value="Plant Rental">Plant Rental</option> <option value="Garden Maintenance">Garden Maintenance</option> </select> <select class="twoup" name="budget" id="de"> <option value="">← Choose Type...</option> </select><span class="price twoup">prices in TTD</span> {/if} <input type="submit" name="submit" value="Submit" /> {/exp:freeform:form} FOLIAGE FLEXIBLE CONTACT FORM

Real World Examples <script type="text/javascript"> function populate(o) { d=document.getElementById('de'); if(!d){return;}
var mitems=new Array(); mitems['Landscaping Project']=['$10,000 - $30,000','$30,000 - $80,000','$80,000 - $150,000','$150,000+']; mitems['Plant Rental']=['$500 - $1,000','$1,000 - $1,500 per mo.','$1,500 - $2,000 per mo.','$2,000+ per mo.']; mitems['Garden Maintenance']=['n/a']; d.options.length=0; cur=mitems[o.options[o.selectedIndex].value]; if(!cur){return;} d.options.length=cur.length; for(var i=0;i<cur.length;i++) { d.options[i].text=cur[i]; d.options[i].value=cur[i]; } } </script> FOLIAGE FLEXIBLE CONTACT FORM

Real World Examples $(document).ready(function() { $('.dynamic_select').show(); $('select#or').change(function() { if ($("select#or").val()
=== 'Garden Maintenance'){ $('.dynamic_select').hide(); } else{ $('.dynamic_select').show(); } }); }); FOLIAGE FLEXIBLE CONTACT FORM

Real World Examples {embed="_global/contact_form" hidebox="hidebox" type="irrigation" required="|budget"} FOLIAGE FLEXIBLE CONTACT
FORM

SARAH LONGNECKER VIDEO LIGHTBOX Graduated Economy Freelance - Video issues
with FIrefox, Quicktime

SARAH LONGNECKER VIDEO LIGHTBOX Real World Examples VIDEO LIGHTBOX •
Lightview serving up Vimeo embed • Needed a template to reuse throughout the whole site

SARAH LONGNECKER VIDEO LIGHTBOX Real World Examples

SARAH LONGNECKER VIDEO LIGHTBOX Real World Examples LIGHTBOX • Vimeo
ID# • Poster Image • Height • Width

Real World Examples <a class="lightwindow" params="lightwindow_width=350, lightwindow_height=200" title="Title of Entry"
href="http://vimeo.com/moogaloop.swf?clip_id=55555"> Click to Play</a> SARAH LONGNECKER VIDEO LIGHTBOX LIGHTWINDOW PARAMS

Real World Examples <a class="lightwindow" params="lightwindow_width={embed:video_width}, lightwindow_height={embed:video_height}" title="{embed:title}" href="http://vimeo.com/moogaloop.swf?clip_id={embed:video}"> Click
to Play</a> SARAH LONGNECKER VIDEO LIGHTBOX GLOBAL_VIDEOLINK

Real World Examples {exp:weblog:entries weblog="work" orderby="date" sort="desc" limit="5"} {embed="global/global_videolink" title="{title}"
video="{video}" video_width="{video_width}" video_height="{video_height}"} {/exp:weblog:entries} SARAH LONGNECKER VIDEO LIGHTBOX CALLS IN MAIN TEMPLATE Could have made this whole thing a snippet to save template visual clutter? *****Any Questions?

STRUCTURE & IMAGE REPLACEMENT

STRUCTURE & IMAGE REPLACEMENT Real World Examples IMAGE REPLACE •
Entire Site is managed with Structure • LG Image Replace • Matrix • Image Sizer

CREATED BY AJ Penninga @ajp http://www.prettysquares.com/

STRUCTURE & IMAGE REPLACEMENT Real World Examples MATRIX SETUP File
Upload Caption Width Height Align

STRUCTURE & IMAGE REPLACEMENT Real World Examples MATRIX SETUP

Real World Examples {exp:weblog:entries weblog="content" limit="1" } {exp:lg_replace:haystack needles="{images backspace="1"}
image_{row_count}|{/images}"} {body} {images} {exp:lg_replace:replacement needle="image_{row_count}"} {exp:imgsizer:size src="{img}" width="{img-width}" height="{img-height}" alt="{img-caption}" class="{img- align}"} {/exp:lg_replace:replacement} {/images} {/exp:lg_replace:haystack} {/exp:weblog:entries} STRUCTURE & IMAGE REPLACEMENT CALLS IN MAIN TEMPLATE *****Any Questions?

FOLIAGE SIDEBAR

FOLIAGE SIDEBAR Real World Examples SIDEBAR CALLOUT • Highlight Navigation
• Show diﬀerent callouts based on parameter

Real World Examples <div id="sidebar"> {embed="_global/sec_nav" mainloc="{embed:mainloc}" loc="{embed:loc}"} {if '{embed:contact}'
== 'yes'}Contact Info{/if} {if '{embed:recent_project}' == 'yes'}Recent Projects{/if} {if '{embed:callouts}' == 'yes'}Callouts{/if} {if '{embed:history}' == 'yes'}History{/if} </div> FOLIAGE SIDEBAR CALLS IN MAIN TEMPLATE

Simple secondary navigation

Real World Examples {if '{embed:mainloc}' == 'services'} <h3>In This Section</h3>
<ul id="sec-nav"> <li {if '{embed:loc}' == 'overview'}class="current"{/if}><a href="/services/">Overview</a></li> <li {if '{embed:loc}' == 'water_features'}class="current"{/ if}><a href="#">Water Features</a></li> <li {if '{embed:loc}' == 'irrigation'}class="current"{/if}><a href="#">Irrigation</a></li> <li {if '{embed:loc}' == 'lighting'}class="current"{/if}><a href="#">Lighting</a></li> <li {if '{embed:loc}' == 'maintenance'}class="current"{/if} ><a href="#">Maintenance</a></li> </ul> {/if} FOLIAGE SIDEBAR Simple secondary navigation

Real World Examples {if '{embed:mainloc}' == 'projects'} <ul id="sec-nav"> <li
{if segment_2 == ''}{if segment_3 == ''}class="current"{/ if}{/if}><a href="{site_url}projects">Overview</a></li> {exp:weblog:categories weblog="projects" style="linear" id="project_categories"} <li {if category_url_title == segment_4}class="current"{/if} ><a href="{path=projects/list}">{category_name}</a></li> {/exp:weblog:categories} <li {if segment_2 == 'list'}{if segment_3 == ''} class="current"{/if}{/if}><a href="{site_url}projects/ list/">All Projects</a></li> </ul> {/if} FOLIAGE SIDEBAR Secondary nav with category highlighting

Real World Examples {if '{embed:mainloc}' == 'rentals'} <ul id="sec-nav"> <li
{if segment_2 == ''}class="current"{/if}><a href="#">Overview</ a></li> <li {if segment_2 == 'plants'}class="current"{/if} {if segment_2 == 'list'}class="current"{/if}><a href="#">Plants</a> <ul> {exp:weblog:categories weblog="rentals" style="linear"} <li {if category_url_title == segment_4}class="current"{/if}><a href="{path=rentals/list}">{category_name}</a></li> {/exp:weblog:categories} <li {if segment_2 == 'list'}{if segment_3 == ''}class="current"{/ if}{/if}><a href="{site_url}rentals/list/">All Plants</a></li> </ul></li> </ul> {/if} FOLIAGE SIDEBAR *****Any Questions?

FACILITY DUDE CALLOUTS Talk about Facility Dude Manage Facilities with
Software

FACILITY DUDE CALLOUTS Real World Examples

FACILITY DUDE CALLOUTS Real World Examples PRODUCT & SERVICE CALLOUTS
• Product and blog page links needed to be dynamic • Other product info like short description and images needed to be dynamic as well • All of these could be overridden for special callouts

FACILITY DUDE CALLOUTS Real World Examples CHANNEL SETUP • Title
• Playa ﬁeld w/ access to products and blog entries • Image override • Description override • Link override

FACILITY DUDE CALLOUTS Real World Examples CHOOSE THE CALLOUT •
Whole site managed by Structure • Callouts will pull randomly unless... • A speciﬁc one is chosen for that page

FACILITY DUDE CALLOUTS {exp:weblog:entries weblog="content" disable="member_data|pagination|trackbacks" limit="1"} {if sidebar_callout} {sidebar_callout
limit="1" dynamic="off"} {embed="_global/callout_related" entry_id="{entry_id}"} {/sidebar_callout} {if:else} {embed="_global/callout" entry_id="{entry_id}"} {/if} {/exp:weblog:entries} Real World Examples THE SIDEBAR TEMPLATE callout_related callout Look for related ﬁeld

FACILITY DUDE CALLOUTS {exp:weblog:entries entry_id="{embed:entry_id}"} {if callout_img} {exp:imgsizer:size src="{callout_img}" alt="{title}"
} {if:else} {callout_related} {if weblog_id=="2"} {exp:imgsizer:size src="{product-icon-dock}" alt="{title}" } {if:else} {images limit="1"} {exp:imgsizer:size src="{img}" width="156" alt="{title}" } {/images} {/if} {/callout_related} {/if} <h4>{title}</h4> Real World Examples CALLOUT_RELATED Lots of conditionals GO SLOW

FACILITY DUDE CALLOUTS Real World Examples CALLOUT_RELATED {if callout_desc} <p>{callout_desc}</p>
{if:else} {callout_related} <p>{product-short-desc}{product-group-short-desc}{short-desc}</p> {/callout_related} {/if} {if callout_link} <a class="button" href="{callout_link}">Learn More</a> {if:else} {callout_related} <a class="button" href=" {if weblog_id == "6"}{path="products/{url_title}"} {if:elseif weblog_id == "2"} {categories limit="1"}{site_url}products/{category_url_title}/ {url_title}/{/categories} {if:else} {page_url} {/if}">Learn More</a> {/callout_related} {/if} {/exp:weblog:entries} GO SLOW

FACILITY DUDE CALLOUTS Real World Examples CALLOUT {exp:weblog:entries weblog="callouts" orderby="random"
limit="1" dynamic="off"} {if callout_img} {exp:imgsizer:size src="{callout_img}" alt="{title}" } {if:else} {callout_related} {if weblog_id=="2"} {exp:imgsizer:size src="{product-icon-dock}" alt="{title}" } {if:else} {images limit="1"} {exp:imgsizer:size src="{img}" width="156" alt="{title}" } {/images} {/if} {/callout_related} {/if} <h4>{title}</h4> *****Any Questions?

EMBEDDING TEMPLATES MULTIPLE TIMES

SUBMITTED BY Mike Boyink @ boyink http://boyink.com// As if he's
not doing enough with an 8 hour session

EMBEDDING TEMPLATES MULTIPLE TIMES Real World Examples COMPARE PRODUCTS •
Useful for comparing multiple entries • Handle in one template • Use segment variables

EMBEDDING TEMPLATES MULTIPLE TIMES Real World Examples

Real World Examples <form name="compare_products" id="compare_form" method="post" action=""> <input type="button"
class="compare_button" value="Compare" onclick="combineMenus(this.form, this.form.product_1, this.form.product_2, this.form.product_3)" /> <select name="product_1"> <option value ="498/" >BTL-433 - 4 cu. ft.</option> <option value ="251/" >SH-241 - 0.8 cu. ft.</option> </select> <select name="product_2"> <option value ="498/" >BTL-433 - 4 cu. ft.</option> <option value ="251/" >SH-241 - 0.8 cu. ft.</option> </select> <select name="product_3"> <option value ="498/" >BTL-433 - 4 cu. ft.</option> <option value ="251/" >SH-241 - 0.8 cu. ft.</option> </select> EMBEDDING TEMPLATES MULTIPLE TIMES

Real World Examples <form name="compare_products" id="compare_form" method="post" action=""> <input type="button"
class="compare_button" value="Compare" onclick="combineMenus(this.form, this.form.product_1, this.form.product_2, this.form.product_3)" /> <select name="product_1"> {exp:weblog:entries weblog="content" } <option value ="{entry_id}/" >{title}</option> {/exp:weblog:entries} </select> <select name="product_2"> {exp:weblog:entries weblog="content" } <option value ="{entry_id}/" >{title}</option> {/exp:weblog:entries} </select> <select name="product_3"> {exp:weblog:entries weblog="content" } <option value ="{entry_id}/" >{title}</option> {/exp:weblog:entries} </select> EMBEDDING TEMPLATES MULTIPLE TIMES

Real World Examples {embed="compare_products" entry_id="{segment_4}" } {embed="compare_products" entry_id="{segment_5}" } {embed="compare_products"
entry_id="{segment_6}" } EMBEDDING TEMPLATES MULTIPLE TIMES

Real World Examples {exp:weblog:entries weblog="content" entry_id="{embed:entry_id}"} {title} All Custom Fields
{/exp:weblog:entries} EMBEDDING TEMPLATES MULTIPLE TIMES *****Any Questions?

WILL ALL THIS WORK IN EE 2?

Will all this work in EE2? Yes.

Real World Examples {exp:weblog:entries weblog="content" dynamic="off"} WILL ALL THIS WORK
IN EE2?

{exp:channel:entries channel="content" dynamic="no"} WILL ALL THIS WORK IN EE2?

THANK YOU Jonathan Longnecker twitter.com/necker47 [email protected] fortysevenmedia.com

EECI 2010 - The Power of ExpressionEngine's Dyn...

EECI 2010 - The Power of ExpressionEngine's Dynamic Templates

More Decks by FortySeven Media

Other Decks in Design

Featured

Transcript