Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

FortySeven Media
September 27, 2011

EECI 2010 - The Power of ExpressionEngine's Dynamic Templates

An in-depth view of the types of Templates in ExpressionEngine and some crazy ways to use them.

FortySeven Media

September 27, 2011
Tweet

More Decks by FortySeven Media

Other Decks in Design

Transcript

  1. THE POWER OF EE'S DYNAMIC TEMPLATES welcome to Welcome Thank

    Robert and Sponsors Spoke in Netherlands last year
  2. 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
  3. Types of Templates Hint: there’s more than one TEMPLATE GROUP

    Global Variables Embedded Templates Snippets (2.0) TEMPLATE
  4. 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
  5. 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?
  6. CSS STYLESHEET Types of Templates *Icons om Espresso Serve the

    Template as "text/css" MIME type. No EE tags; served "as is."
  7. 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
  8. JAVASCRIPT Types of Templates Hint: there’s more than one Used

    for outputting Javascript code. Sends "text/javascript" MIME type. *Icons om Espresso
  9. 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
  10. XML Types of Templates Hint: there’s more than one Used

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

    template groups by uploading folders. Just add .group to group name. *****Any Questions?
  12. 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
  13. 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} <!--Blog Feeds--> <link rel="alternate" title="Projects and Rentals" href="/site/feed" /> <!--Stylesheets--> <link href="reset.css" media="screen" /> <link href="design.css" media="all" /> </head> Types of Templates
  14. 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/first pick Used 3rd party to login, manage your items for sale. Barcodes, POS, etc...
  15. 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
  16. 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
  17. 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>
  18. 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>
  19. <body> <div id="header"><h1>SiteName</h1></div> <div id="content">Content Here</div> <div id="footer"> <p>&copy; {current_time

    format="%Y"} FortySeven Media. All Rights Reserved</p> </div> </body> Embedding Templates FOOTER global/footer
  20. <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><!--End Sidebar--> Embedding Templates SIDEBAR global/sidebar
  21. <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!!!!!!
  22. 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?
  23. 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
  24. 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 first, then radiohead. If neither are logged in, defaults to generic.
  25. 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.
  26. 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?
  27. 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
  28. <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?
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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?
  34. DESIGNERSMUSIC AJAX TOOLTIP Real World Examples AJAX TOOLTIP • Cluetip

    jQuery shows external webpage • Used 1 template and added entry_id
  35. DESIGNERSMUSIC AJAX TOOLTIP Real World Examples ALBUM • Album Name

    • Artist • Artwork • Website • Preview • Purchase Link
  36. 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
  37. {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?
  38. KINGDOM LANDSCAPES GROUPED PROJECTS Real World Examples CATEGORY GROUPS •

    Overview Projects Page • Group entry by category • Reuse same template
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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?
  45. 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
  46. 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
  47. var artist = [{exp:query sql="SELECT DISTINCT field_id_4 FROM exp_weblog_data WHERE

    exp_weblog_data.weblog_id=1" backspace="2"}"{field_id_4}", {/exp:query}]; var website = [{exp:query sql="SELECT DISTINCT field_id_6 FROM exp_weblog_data WHERE exp_weblog_data.weblog_id=1" backspace="2"}"{field_id_6}", {/exp:query}]; var album_title = [{exp:query sql="SELECT title FROM exp_weblog_titles WHERE exp_weblog_titles.weblog_id=1" backspace="2"}"{title}", {/exp:query}]; LOCALDATA DESIGNERSMUSIC AJAX AUTOCOMPLETE *****Any Questions?
  48. 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?
  49. $().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?
  50. 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 first image, offset the others
  51. SMITH STUDIOS MULTI-MEDIA LIGHTBOX Real World Examples GALLERY • Using

    Matrix • File Upload • Movie or SWF • Width & Height
  52. 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
  53. Real World Examples {exp:weblog:entries weblog="content" limit="1" } {images limit="1" offset="{embed:row_id}"

    } <!-- begin embedded QuickTime file... --> <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?
  54. 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
  55. 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
  56. 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
  57. 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
  58. Real World Examples {if '{embed:type}' == 'irrigation'} <label class="required">Budget*</label> <select

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

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

    name="budget"> <option value="">Choose One...</option> <option value="$8,000 - $15,000">$8,000 - $15,000</option> <option value="$15,000 - $30,000">$15,000 - $30,000</option> <option value="$30,000 - $80,000">$30,000 - $80,000</option> <option value="$80,000+">$80,000+</option> </select> <span class="price">$ prices in TTD</span> {/if} FOLIAGE FLEXIBLE CONTACT FORM
  61. 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="">&larr; 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
  62. 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
  63. 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
  64. SARAH LONGNECKER VIDEO LIGHTBOX Real World Examples VIDEO LIGHTBOX •

    Lightview serving up Vimeo embed • Needed a template to reuse throughout the whole site
  65. 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
  66. 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?
  67. STRUCTURE & IMAGE REPLACEMENT Real World Examples IMAGE REPLACE •

    Entire Site is managed with Structure • LG Image Replace • Matrix • Image Sizer
  68. 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?
  69. 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><!--End Sidebar--> FOLIAGE SIDEBAR CALLS IN MAIN TEMPLATE
  70. 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
  71. 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
  72. 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?
  73. 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
  74. FACILITY DUDE CALLOUTS Real World Examples CHANNEL SETUP • Title

    • Playa field w/ access to products and blog entries • Image override • Description override • Link override
  75. FACILITY DUDE CALLOUTS Real World Examples CHOOSE THE CALLOUT •

    Whole site managed by Structure • Callouts will pull randomly unless... • A specific one is chosen for that page
  76. 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 field
  77. 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
  78. 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
  79. 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?
  80. EMBEDDING TEMPLATES MULTIPLE TIMES Real World Examples COMPARE PRODUCTS •

    Useful for comparing multiple entries • Handle in one template • Use segment variables
  81. 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
  82. 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
  83. 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?