Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

@47m http://fortysevenmedia.com

Slide 5

Slide 5 text

Met in Highschool Guitar Write Songs Band

Slide 6

Slide 6 text

2002 First Website Flash

Slide 7

Slide 7 text

2005 First 47m Website Flash

Slide 8

Slide 8 text

2006 First HTML/CSS Notice the EE brackets

Slide 9

Slide 9 text

2007 First EE Site - one page

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

2009 Full Circle - Nate and I keep making music

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

TYPES OF TEMPLATES Hint: there’s more than one

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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?

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

GLOBAL VARIABLES {html_head} Title of Page {blog_feeds} {stylesheets} {html_head_end} Types of Templates

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

GLOBAL VARIABLES Register To Sell {register} Types of Templates

Slide 32

Slide 32 text

GLOBAL VARIABLES Register To Sell Types of Templates *****Any Questions?

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

EMBEDDING TEMPLATES It’s fun and easy!

Slide 37

Slide 37 text

NAVIGATION

Slide 38

Slide 38 text

NAVIGATION

Site Name Here

global/nav
  • Overview
  • Another One
  • A Third One
Embedding Templates
Content
NOT useful

Slide 39

Slide 39 text

NAVIGATION

Site Name Here

{embed="global/nav"} Embedding Templates
Content
NOT USEFUL

Slide 40

Slide 40 text

PASSING VARIABLES BREAK Passing Stuff

Slide 41

Slide 41 text

PASSING VARIABLES {embed="global/nav" name="jonathan"} Embedding Templates
  • {embed:name}
  • Another One
  • A Third One
  • Jonathan
  • Another One
  • A Third One

Slide 42

Slide 42 text

NAVIGATION

Site Name Here

global/nav
  • Overview
  • Another One
  • A Third One
Embedding Templates
Content

Slide 43

Slide 43 text

Site Name Here

{embed="global/nav" loc="home"} Embedding Templates
Content
NAVIGATION *****Any Questions?

Slide 44

Slide 44 text

FOOTER

Slide 45

Slide 45 text

SiteName

Content Here

© {current_time format="%Y"} FortySeven Media. All Rights Reserved

Embedding Templates FOOTER global/footer

Slide 46

Slide 46 text

SiteName

Content Here
{embed="global/footer"} Embedding Templates FOOTER Could also be snippet *****Any Questions?

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

  • Overview
  • Another One
  • A Third One
Callouts Go Here
Embedding Templates SIDEBAR global/sidebar

Slide 49

Slide 49 text

Header Here

Paragraph

{embed="_global/sidebar"}

© 2010. All Rights Reserved>

Embedding Templates SIDEBAR *****Any Questions? LEVEL UP!!!!!!

Slide 50

Slide 50 text

LEVEL UP!

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

SEGMENT VARIABLES

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

SEGMENT VARIABLES {segment_1} {segment_2} {segment_3} If & Statements http://site.com/blog/entry/title/ {exp:weblog:entries url_title="{segment_3}"}

{title}

{body}

{/exp:weblog:entries} *****Any Questions?

Slide 55

Slide 55 text

CONDITIONALS BREAK fun with If statements

Slide 56

Slide 56 text

CONDITIONALS {if username == "Mr. T"}

Pity the Fool!

{/if} If & Statements BASIC VARIABLE {if username == "peanut_butter" AND username == "jelly"}

Sandwich Time!

{/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

Slide 57

Slide 57 text

CONDITIONALS {if username == "weezer"}

"Say it ain't so!"

{if:elseif username == "radiohead"}

"I'm a creep."

{if:else}

It's all just rock and roll.

{/if} If & Statements ELSE & ELSEIF Looks for Weezer first, then radiohead. If neither are logged in, defaults to generic.

Slide 58

Slide 58 text

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.

Slide 59

Slide 59 text

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?

Slide 60

Slide 60 text

LISTING & SINGLE ENTRY IN ONE TEMPLATE

Slide 61

Slide 61 text

LISTING & SINGLE ENTRY IN ONE TEMPLATE {if segment_3} {exp:weblog:entries weblog="{my_weblog}" limit="1"} {title} | Events | About | Edgepoint Church {/exp:weblog:entries} {if:else} Events| About | Edgepoint Church {/if} If & Segments HEADER

Slide 62

Slide 62 text

{if segment_3} {exp:weblog:entries weblog="news" limit="1" url_title="{segment_3}"}

{title}

{body} {/exp:weblog:entries} {if:else}

Upcoming Events

    {exp:weblog:entries weblog="news" limit="50" }
  • {title}
    • {/exp:weblog:entries}
{/if} LISTING & SINGLE ENTRY IN ONE TEMPLATE If & Segments BODY *****Any Questions?

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

CUSTOM CATEGORY URL'S {if segment_2=="" AND segment_3==""} {exp:weblog:categories weblog="yours" style="linear"}

{category_name}

{/exp:weblog:categories} If & Segments THE CATEGORIES PAGE

Slide 69

Slide 69 text

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}"}

{title}

{/exp:weblog:entries} {/exp:query} If & Segments THE CATEGORY ENTRIES PAGE Low Seg2Cat option

Slide 70

Slide 70 text

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?

Slide 71

Slide 71 text

REAL WORLD EXAMPLES is stuff really happened!

Slide 72

Slide 72 text

DESIGNERS MUSIC AJAX TOOLTIP

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

DESIGNERSMUSIC AJAX TOOLTIP Real World Examples

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Real World Examples {exp:weblog:entries weblog="music" orderby="artist|title" sort="desc" limit="1" dynamic="off"}

{artist}

{exp:imgsizer:size src="{artwork}" width="140" height="140" alt="{title}"}

{title}

{/exp:weblog:entries} DESIGNERSMUSIC AJAX TOOLTIP CALLS IN MAIN TEMPLATE

Slide 77

Slide 77 text

{exp:weblog:entries weblog="music" limit="1" }
{exp:imgsizer:size src="{artwork}" width="64" height="64" alt="{title}" }

{title}

{artist}

{if artist-website} Artist Website {artist-website} {/if} Recommended by {author} {if location} from {location}{/if} CALLS IN MAIN TEMPLATE DESIGNERSMUSIC AJAX TOOLTIP *****Any Questions?

Slide 78

Slide 78 text

KINGDOM LANDSCAPES GROUPED PROJECTS

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

DESIGNERSMUSIC AJAX TOOLTIP Real World Examples

Slide 81

Slide 81 text

Real World Examples {exp:weblog:categories weblog="projects" show="6" style="linear"}

{category_name} Projects

View {category_name} projects {/exp:weblog:categories} {exp:weblog:entries weblog="projects" category="6" orderby="random" limit="2" } {exp:imgsizer:size src="{main_image}" width="198" height="142" alt="{title}" }

{title}{entry_date format="%d/%m/%y"}

{exp:word_limit_plus stop_after="18"}{exp:html_strip} {description}{/exp:html_strip}{/exp:word_limit_plus}

View Project {/exp:weblog:entries} KINGDOM LANDSCAPES GROUPED PROJECTS CALLS IN MAIN TEMPLATE

Slide 82

Slide 82 text

Real World Examples {exp:weblog:categories weblog="projects" show="{embed:cat}" style="linear"}

{category_name} Projects

View {category_name} projects {/exp:weblog:categories} {exp:weblog:entries weblog="projects" category="{embed:cat}" orderby="random" limit="2" } {exp:imgsizer:size src="{main_image}" width="198" height="142" alt="{title}" }

{title}{entry_date format="%d/%m/%y"}

{exp:word_limit_plus stop_after="18"}{exp:html_strip} {description}{/exp:html_strip}{/exp:word_limit_plus}

View Project {/exp:weblog:entries} KINGDOM LANDSCAPES GROUPED PROJECTS PROJECT ARTICLE

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

FOLIAGE DESIGN ARTICLES

Slide 85

Slide 85 text

FOLIAGE DESIGN ARTICLES Real World Examples

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

FOLIAGE DESIGN ARTICLES Real World Examples {exp:weblog:entries weblog="projects" limit="3" dynamic="off"}
{projects limit="1"} {exp:imgsizer:size src="{img}" width="200" height="100"} {/projects}

{exp:trunchtml chars="25"}{title}{/exp:trunchtml}

View Project
{/exp:weblog:entries} THE ARTICLE

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

FOLIAGE DESIGN ARTICLES Real World Examples {exp:weblog:entries weblog="{embed:weblog}" limit="{embed:limit}" {embed:dynamic} }
{{embed:ff_shortname} limit="1"} {exp:imgsizer:size src="{img}" width="{embed:width}" height="{embed:height}" alt="{caption}" } {/{embed:ff_shortname}}

{if '{embed:loc}' == 'sidebar'}{exp:trunchtml chars="20" inline="..."}{title}{/exp:trunchtml}{if:else}{exp:trunchtml chars="25" inline="..."}{title}{/exp:trunchtml}{/if}

View {embed:type}
{/exp:weblog:entries} THE ARTICLE *****Any Questions?

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

DESIGNERS MUSIC AUTO COMPLETE

Slide 92

Slide 92 text

DESIGNERSMUSIC AJAX TOOLTIP Real World Examples

Slide 93

Slide 93 text

Real World Examples {exp:weblog:entry_form weblog="music" return="submit/ success" } Album Name Artist Name Artist Website {/exp:weblog:entry_form} DESIGNERSMUSIC AJAX AUTOCOMPLETE

Slide 94

Slide 94 text

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?

Slide 95

Slide 95 text

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?

Slide 96

Slide 96 text

$().ready(function() { function findValueCallback(event, data, formatted) { $("
  • ").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");} function formatItem(row) { return row[0] + " (id: " + row[1] + ")";} 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?

    • Slide 97

    Slide 97 text

    SMITH STUDIOS MULTI- MEDIA LIGHTBOX Photography Campaigns

    Slide 98

    Slide 98 text

    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

    Slide 99

    Slide 99 text

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

    Slide 100

    Slide 100 text

    SMITH STUDIOS MULTI-MEDIA LIGHTBOX Real World Examples

    Slide 101

    Slide 101 text

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

    Slide 102

    Slide 102 text

    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}

    Slide 103

    Slide 103 text

    Real World Examples {exp:weblog:entries weblog="content" limit="1" } {images limit="1" offset="{embed:row_id}" } {/images} {/exp:weblog:entries} QUICKTIME SMITH STUDIOS MULTI-MEDIA LIGHTBOX *****Any Questions?

    Slide 104

    Slide 104 text

    FOLIAGE FLEXIBLE CONTACT FORM

    Slide 105

    Slide 105 text

    DESIGNERSMUSIC AJAX TOOLTIP Real World Examples

    Slide 106

    Slide 106 text

    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

    Slide 107

    Slide 107 text

    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"} Current Page FOLIAGE FLEXIBLE CONTACT FORM Send info about what page they were on Embed Required

    Slide 108

    Slide 108 text

    Real World Examples {if '{embed:type}' == 'project'} Budget* Choose One... $10,000 - $30,000 $30,000 - $80,000 $80,000 - $150,000 $150,000+ $ prices in TTD {/if} FOLIAGE FLEXIBLE CONTACT FORM

    Slide 109

    Slide 109 text

    Real World Examples {if '{embed:type}' == 'rental'} Budget* Choose One... $500 - $1,000 per mo. $1,000 - $1,500 per mo. $1,500 - $2,000 per mo. $2,000+ per mo. $ prices in TTD {/if} FOLIAGE FLEXIBLE CONTACT FORM

    Slide 110

    Slide 110 text

    Real World Examples {if '{embed:type}' == 'irrigation'} Budget* Choose One... $10,000 - $20,000 $20,000 - $30,000 $30,000 - $50,000 $50,000+ $ prices in TTD {/if} FOLIAGE FLEXIBLE CONTACT FORM

    Slide 111

    Slide 111 text

    Real World Examples {if '{embed:type}' == 'lighting'} Budget* Choose One... $2,000 - $5,000 $5,000 - $10,000 $10,000 - $30,000 $30,000+ $ prices in TTD {/if} FOLIAGE FLEXIBLE CONTACT FORM

    Slide 112

    Slide 112 text

    Real World Examples {if '{embed:type}' == 'water_features'} Budget* Choose One... $8,000 - $15,000 $15,000 - $30,000 $30,000 - $80,000 $80,000+ $ prices in TTD {/if} FOLIAGE FLEXIBLE CONTACT FORM

    Slide 113

    Slide 113 text

    Real World Examples {if '{embed:type}' == 'generic'} Choose One... Landscaping Project Plant Rental Garden Maintenance ← Choose Type... prices in TTD {/if} {/exp:freeform:form} FOLIAGE FLEXIBLE CONTACT FORM

    Slide 114

    Slide 114 text

    Real World Examples 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]; } } FOLIAGE FLEXIBLE CONTACT FORM

    Slide 115

    Slide 115 text

    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

    Slide 116

    Slide 116 text

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

    Slide 117

    Slide 117 text

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

    Slide 118

    Slide 118 text

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

    Slide 119

    Slide 119 text

    SARAH LONGNECKER VIDEO LIGHTBOX Real World Examples

    Slide 120

    Slide 120 text

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

    Slide 121

    Slide 121 text

    Real World Examples Click to Play SARAH LONGNECKER VIDEO LIGHTBOX LIGHTWINDOW PARAMS

    Slide 122

    Slide 122 text

    Real World Examples Click to Play SARAH LONGNECKER VIDEO LIGHTBOX GLOBAL_VIDEOLINK

    Slide 123

    Slide 123 text

    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?

    Slide 124

    Slide 124 text

    STRUCTURE & IMAGE REPLACEMENT

    Slide 125

    Slide 125 text

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

    Slide 126

    Slide 126 text

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

    Slide 127

    Slide 127 text

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

    Slide 128

    Slide 128 text

    STRUCTURE & IMAGE REPLACEMENT Real World Examples MATRIX SETUP

    Slide 129

    Slide 129 text

    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?

    Slide 130

    Slide 130 text

    FOLIAGE SIDEBAR

    Slide 131

    Slide 131 text

    FOLIAGE SIDEBAR Real World Examples SIDEBAR CALLOUT • Highlight Navigation • Show different callouts based on parameter

    Slide 132

    Slide 132 text

    Real World Examples
    {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}
    FOLIAGE SIDEBAR CALLS IN MAIN TEMPLATE

    Slide 133

    Slide 133 text

    Simple secondary navigation

    Slide 134

    Slide 134 text

    Real World Examples {if '{embed:mainloc}' == 'services'}

    In This Section

    • Overview
    • Water Features
    • Irrigation
    • Lighting
    • Maintenance
    {/if} FOLIAGE SIDEBAR Simple secondary navigation

    Slide 135

    Slide 135 text

    Simple secondary navigation

    Slide 136

    Slide 136 text

    Real World Examples {if '{embed:mainloc}' == 'projects'}
    • Overview
      • {exp:weblog:categories weblog="projects" style="linear" id="project_categories"}
    • {category_name}
      • {/exp:weblog:categories}
    • All Projects
    {/if} FOLIAGE SIDEBAR Secondary nav with category highlighting

    Slide 137

    Slide 137 text

    Simple secondary navigation

    Slide 138

    Slide 138 text

    Real World Examples {if '{embed:mainloc}' == 'rentals'}
    • Overview a>
    • Plants
        {exp:weblog:categories weblog="rentals" style="linear"}
      • {category_name}
        • {/exp:weblog:categories}
      • All Plants
    {/if} FOLIAGE SIDEBAR *****Any Questions?

    Slide 139

    Slide 139 text

    FACILITY DUDE CALLOUTS Talk about Facility Dude Manage Facilities with Software

    Slide 140

    Slide 140 text

    FACILITY DUDE CALLOUTS Real World Examples

    Slide 141

    Slide 141 text

    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

    Slide 142

    Slide 142 text

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

    Slide 143

    Slide 143 text

    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

    Slide 144

    Slide 144 text

    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

    Slide 145

    Slide 145 text

    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}

    {title}

    Real World Examples CALLOUT_RELATED Lots of conditionals GO SLOW

    Slide 146

    Slide 146 text

    FACILITY DUDE CALLOUTS Real World Examples CALLOUT_RELATED {if callout_desc}

    {callout_desc}

    {if:else} {callout_related}

    {product-short-desc}{product-group-short-desc}{short-desc}

    {/callout_related} {/if} {if callout_link} Learn More {if:else} {callout_related} Learn More {/callout_related} {/if} {/exp:weblog:entries} GO SLOW

    Slide 147

    Slide 147 text

    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}

    {title}

    *****Any Questions?

    Slide 148

    Slide 148 text

    EMBEDDING TEMPLATES MULTIPLE TIMES

    Slide 149

    Slide 149 text

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

    Slide 150

    Slide 150 text

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

    Slide 151

    Slide 151 text

    EMBEDDING TEMPLATES MULTIPLE TIMES Real World Examples

    Slide 152

    Slide 152 text

    Real World Examples BTL-433 - 4 cu. ft. SH-241 - 0.8 cu. ft. BTL-433 - 4 cu. ft. SH-241 - 0.8 cu. ft. BTL-433 - 4 cu. ft. SH-241 - 0.8 cu. ft. EMBEDDING TEMPLATES MULTIPLE TIMES

    Slide 153

    Slide 153 text

    Real World Examples {exp:weblog:entries weblog="content" } {title} {/exp:weblog:entries} {exp:weblog:entries weblog="content" } {title} {/exp:weblog:entries} {exp:weblog:entries weblog="content" } {title} {/exp:weblog:entries} EMBEDDING TEMPLATES MULTIPLE TIMES

    Slide 154

    Slide 154 text

    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

    Slide 155

    Slide 155 text

    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?

    Slide 156

    Slide 156 text

    WILL ALL THIS WORK IN EE 2?

    Slide 157

    Slide 157 text

    Will all this work in EE2? Yes.

    Slide 158

    Slide 158 text

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

    Slide 159

    Slide 159 text

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

    Slide 160

    Slide 160 text

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