ExpressionEngine 2: Total Domination


Published on

The ExpressionEngine 2 panel at SXSW 2010!

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • Twitee module by Shapeshed (not yet available for 2.0)
    Could use Twitter Timeline -- free plugin converted to EE 2
  • Using magpie plugin to pull in Twitpic RSS feed for Riot Racing.
    Using a bit of PHP to make things pretty.
  • Custom plugin that uses the Twitvid API to pull in latest videos.
    Originally written for EE 1.6.x but now available for EE 2.0

  • I will be talking about these wonderful things called Starter Files and how you can use them for ExpressionEngine 2
  • I will also be making some bad overused jokes
  • So what are starter files. Pretty simply they are
  • a reusable set of folder, files and code snippets that we use to begin the start of a project.
  • Daniel Mall, Mark Huot and I began using starter files at happy cog a couple of years ago to kick off all our template builds. We were seeing similarities between each of our projects and we started using them to save a bit of time when it came to reusable code and folder structures.
  • So here’s an example of what they can look like - So for instance, we always use CSS files on our sites, so there’s a c folder that we start with on every project that holds our commonly used CSS files - such as one for ie and one for print styles. As well as some empty include files like a header and a footer - that we will use to markup those global sections. So even though we might not know the specific styles that are going to go in those css files or we don’t know what kind of navigation markup will go into our header file, 98% of the time, we will need these files created to fill in with our project specific markup.
  • Once I started working with ExpressionEngine, I found more and more the need to write some of the same code I had written previously. Things like contact forms and search forms and search results. There all very common components from project to project. I was consistently going to the user guide or to past projects I worked on to grab the some of the same code snippets for almost every project I worked on.
  • So with that in mind, I created to demo these ExpressionEngine2 starter file templates.
  • is a small site built on ExpressionEngine 2 that features these components that I have often found myself needing to reuse from project to project. Things like...
  • a Simple search form - I’d say pretty close to 100% of sites Ive worked on have had some type of search. This search form has an example of pre-filled values in it to provide some additional context for users. I’ve also included some JavaScript to clear out the form on focus and reset the text if there is no change.
  • Search Results page
    That also has a link to an Advanced Search Page

  • For this search form, Ive updated the example from the user guide to have a bit cleaner fieldsets as well as I’ve added labels for all the fields for added accessibility. Lastly for this one, Ive removed the table markup that the user guide suggests.
  • No Results page for searches that don’t return any results. But also includes a suggestion for the user to try the advanced search.

  • A contact page using the email contact form. Again, this is another example to where Ive added labels for the inputs and text areas.

  • An about page that can be repurposed for other basic content pages that has a corresponding Page Channel and Custom Fields for the page channel

  • Login functionality that lives in the header can be accessed from any page with ease using a JavaScript based popup. This popup is using the jquery load method to pull in the content from a login page.

  • And its done this way so the login page exists For users without JavaScript enabled who will not get the popup.

  • A news landing page with pagination based on dynamic content from the News Channel. This could also be a basis for a site blog.

  • Theres a news detail page template for all news or blog entries that feature the full text for the entry. Also on these news detail pages is the code for comments and the commenting form

  • Also on these news detail pages is the code for comments and the commenting form. You’ll notice the image in the comment section - I’ve included the code for the gravatar plugin for this. Ive also included the built in captcha

  • the twitter_timeline plugin is also included. and currently is featuring the public timeline. You’ll also see that the CSS3 styles included for talk bubbles.

  • Ive also added some simple logic to make the site logo the h1 on the home page and a strong tag on the others - in order to let the page headings on sub pages be the h1

  • With ExpressionEngine2, All I have to do is copy these templates to my default site folder, load up the template manager and hit refresh and these templates are ready to go.
  • with the Starter Files can be as detailed or general as you like.
    If you need different types of fieldsets or listing styles - or prefer your heading structure different - all these things can be tailored to how you code your projects.
    The Starter Files that Im showing in these slides are available to download for free on the starter files site - and you can use all of the parts or some of the parts to start off your ExpressionEngine 2 site as well!

  • ExpressionEngine 2: Total Domination

    1. 1. ExpressionEngine 2: Total Domination! #expressionengine
    2. 2. Wilkommen, Amigos.
    3. 3. Panel
    4. 4. Released on Dec 2nd, 2009
    5. 5. Built on the CodeIgniter Framework
    6. 6. Is a powerful, friendly content management system
    7. 7. Snippets of ExpressionEngine
    8. 8. We’re not here to talk sh*t ‘bout Wordpress
    9. 9. We’re not here to discuss pay vs. free software
    10. 10. We’re not being paid by EllisLab*
    11. 11. * We’ll TOTALLY take EllisLab’s precious, precious money.
    12. 12. “Content Management is about storing and retrieving your content.” - Barack Obama
    13. 13. ExpressionEngine excels at content entry. like a fox ...a sexy fox
    14. 14. We create a FORM assign it to a channel and enter CONTENT
    15. 15. EE2 Video Upload Form (theoretically)
    16. 16. Flynn Lives
    17. 17. Form Fields. “Is there anything more exciting than form fields? No. There is not.” - Zeus, Lord of Olympus
    18. 18. Forms are created by little pieces called Fieldtypes
    19. 19. Fieldtypes Native to EE2: * File * Select Drop-down * Relationship * Checkboxes * Multi Select * Radio Buttons * Textarea * Text Input * Love™* * May be lacking from your EE2...or stalled, horrible relationship.
    20. 20. Global Field Settings
    21. 21. Sample Fieldtype Settings File: Relationship: Select Dropdown:
    22. 22. Content Entry Form = Group of Fieldtypes
    23. 23. Here’s a field group It’s pretty sweet. We named it “video”.
    24. 24. “Let’s assign our field group to a channel. It will be so awesome, everyone will get pregnant.” - Bill & Ted, Historians
    25. 25. *guitar solo*
    26. 26. Channels are content of the same type.
    27. 27. “We enter content.” - Optimus Prime
    29. 29. Create your field group. Assign it to a channel. Enter content. Booyah!
    30. 30. tw. @kennymeyers e. kenny.meyers at
    31. 31. {live event Ryan Irelan
    32. 32. Riot Racing • riot racing website screenshot • talk about what they are and what they asked us to do
    33. 33. {compo
    34. 34. {compo ★Twitter Updates
    35. 35. {compo ★ Twitter Updates ★ Twitpics
    36. 36. {compo ★ Twitter Updates ★ Twitpics ★ Twitvids
    37. 37. {ste
    38. 38. {ste ★ Create Race in Control Panel
    39. 39. {ste ★ Create Race in Control Panel ★ Toggle Entry Status on Race Day
    40. 40. {code}
    41. 41. {code}
    42. 42. {code}
    43. 43. {code}
    44. 44. @ryanirelan eequickstartguide.c om
    45. 45. Starter Files For ExpressionEngine 2 (the quickening)
    46. 46. Starter Files For ExpressionEngine 2 (the quickening) ...I’ll be here all day folks
    47. 47. What are Starter Files?
    48. 48. What are Starter Files? A reusable set of folders, files, and code snippets - used to begin a project.
    49. 49. Front-End Template Starter Files Every project is different. And every project is a little bit the same.
    50. 50. Front-End Template Starter Files
    51. 51. ExpressionEngine Starter Files Every EE project is different. And every Simple Search Form is a little bit the same.
    52. 52. Starter Files
    53. 53.
    54. 54. Search Forms
    55. 55. Search Results
    56. 56. Advanced Search Form
    57. 57. No Search Results
    58. 58. Contact Page
    59. 59. Content Page
    60. 60. Login Functionality
    61. 61. Login Functionality
    62. 62. News Landing
    63. 63. News Detail
    64. 64. News Detail
    65. 65. Twitter Timeline
    66. 66. Heading Logic inc/header
    67. 67. So How Can I Use These?
    68. 68. So How Can I Use These? EE 1 : Save templates as flat files. EE 2 : Create templates from files!
    69. 69. Download
    70. 70. @jennlukas
    71. 71. ACCESSORIES Handbags for your EE Control Panel.
    72. 72. What are Accessories?
    73. 73. What are Accessories? • Handbags
    74. 74. What are Accessories? • Handbags • Persistent, or not
    75. 75. What are Accessories? • Handbags • Persistent, or not • 1337 hax0rs
    76. 76. Anatomy (ew)
    77. 77. Victory!
    78. 78. Victorious Again!
    79. 79. Boring.
    80. 80. Google Analytics
    81. 81. Add-on Updater
    82. 82. Pimp Your Book
    83. 83. Lots more...
    84. 84. Lots more... • Screencasts
    85. 85. Lots more... • Screencasts • One-off controls
    86. 86. Lots more... • Screencasts • One-off controls • Support form
    87. 87. Lots more... • Screencasts • One-off controls • Support form • Site Stats
    88. 88. THANKS @mrwarren
    89. 89. EE2 API
    90. 90. What’s an API “Documented” way of interacting with an application Standard way of interacting with data That means it won’t change, at least not without notice
    91. 91. What is the EE2 API?
    92. 92. Five Children API Categories Channels Entries Fields Templates
    93. 93. Five Children API Categories Channels Entries Fields Templates
    94. 94. The Parent Class Notable Methods instantiate() _set_error() _unique_url_title()
    95. 95. The Entries Class Notable Methods entry_exists() submit_new_entry() update_entry() update_related_cache()
    96. 96. Advantages Validation Automatic date setting Automatic site_id setting Automatic high ASCII conversion
    97. 97. Advantages Automatic relationship updates Automatic cache busting Hook execution
    98. 98. Let’s Use It
    99. 99. Instantiate
    100. 100. Run
    101. 101. Return
    102. 102. That’s it. Seriously.
    103. 103. Why I’m Excited 1. Extensions can co-exist now 2. Upgrades will be smoother
    104. 104. @markhuot
    105. 105. Questions? @jennlukas @kennymeyers @mrwarren @markhuot @ryanirelan