EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development


Published on

Learn how we setup ExpressionEngine for rapid development.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development

  1. 1. From Design to Dynamic Rapid Development with ExpressionEngine
  2. 2. Hello My Name is Jonathan Longnecker @necker47
  3. 3. @47m
  4. 4. Overview What We’re Covering Today
  5. 5. The Problem EE Developers Are Too Awesome
  6. 6. The Problem 15+ Add-Ons for Each Site Using the Same Template Patterns Doing it Over and Over Again
  7. 7. The Solution w Ticks eet r S EE Sandbox Templating Rapid Build Out
  8. 8. The Old Way How we used to do this
  9. 9. The Old Way Find all Addons & Install Go to all the 3rd party developer sites, download install latest versions, configure to liking.
  10. 10. The Old Way Templates Manually create templates for each major page, use gobal embeds where possible.
  11. 11. The Old Way Image Placement Confusing mess using the file field plugin. Images had to be manually inserted in templates.
  12. 12. EE Sandbox Get Your Shovels and Buckets
  13. 13. EE Sandbox Addons LG Addon Updater Category Checkboxes LG .htaccess Generator Freeform LG Add Sitename Field Frame LG Replace nGEN File LG TinyMCE Structure SL Developer Edit Dropdown ImgSizr Word Limit Plus
  14. 14. EE Sandbox Addons Leevi Graham The man
  15. 15. EE Sandbox Addons LG Addon Updater Let your 3rd party addons check home for updates
  16. 16. EE Sandbox Addons LG .htaccess Generator Remove index.php and much, much more
  17. 17. EE Sandbox Addons LG Add SiteName Enable CP admin page title replacements
  18. 18. EE Sandbox Addons LG Tiny MCE Turn off source formatting, spans and br’s Take out image upload, add blockquote
  19. 19. EE Sandbox Addons SL Developer Info Get to all your developer information quickly by keeping it in one place
  20. 20. EE Sandbox Addons Image Sizer Resizes, crops and thumbnails your images intelligently
  21. 21. EE Sandbox Addons Freeform Make forms using custom fields, create email templates
  22. 22. EE Sandbox Addons Field Frame Rethink the way you use custom fields
  23. 23. EE Sandbox Addons nGen File Field A fieldtype for the FieldFrame framework
  24. 24. EE Sandbox Addons Structure Radically change the way you handle content pages and navigation
  25. 25. EE Sandbox Addons Structure Manage content weblog with Structure Choose “content” template
  26. 26. EE Sandbox Addons Template Preferences Turn on revisions Save templates as files
  27. 27. EE Sandbox Setup Weblog Create a “content” weblog
  28. 28. EE Sandbox Setup Custom Fields Meta Keywords Meta Description Body (Tiny MCE) Images (FF Matrix)
  29. 29. EE Sweet Trick AJ Penninga - File Title Width Height Align
  30. 30. EE Sandbox Other Stuff ImgSizr SL Developer Extensions Create “sized” directory Create custom tab Create custom tab in /images with appropriate permissions Client Member Group Setup new “editor” group with access to file upoads, Structure, weblogs
  31. 31. EE Sandbox Global Variables Global Variables HTML Opening HTML Closing jQuery Javascript RSS Links Stylesheets
  32. 32. EE Sandbox Global Variables html_head <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="Shortcut Icon" href="/favicon.ico"/> <meta name="author" content="FortySeven Media" /> <meta name="copyright" content="©2009 Company Name" />
  33. 33. EE Sandbox Global Variables html_head_end </head>
  34. 34. EE Sandbox Global Variables rss <!--Blog Feeds--> <link rel="alternate" type="application/atom+xml" title="Blog Title Here" href="#" />
  35. 35. EE Sandbox Templates Templates Footer Header Nav Sidebar Content
  36. 36. EE Sandbox Templates nav <h4>Navigation Here</h4> <ul> {exp:structure:nav_main include_ul="no" current_class="current"} </ul>
  37. 37. EE Sandbox Templates sidebar <h4>Sidebar Here</h4> {exp:structure:nav_sub css_id="sec-nav" show_overview_link="yes" start_from="/{segment_1}" show_depth="2" }
  38. 38. EE Sandbox Templates content {html_head} {exp:weblog:entries weblog="content" disable="member_data| pagination|trackbacks"} <meta name="keywords" content="{keywords}" /> <meta name="description" content="{short-desc}" /> {/exp:weblog:entries} <title>{exp:structure:titletrail separator="|"}</title> {rss} {stylesheets} {js} {jquery} {html_head_end}
  39. 39. EE Sweet Trick Image Replacement Method {exp:weblog:entries weblog="content" limit="1" disable="member_data|pagination|trackbacks"} {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}
  40. 40. EE Sandbox Install Log Entry List what we’ve installed and any special path changes when moving servers.
  41. 41. Moving Servers Moving your sandbox is faster than installing
  42. 42. Moving Servers Export the Database Export from your sandbox install.
  43. 43. Moving Servers Import Database Create a new blank database and import.
  44. 44. Moving Servers Move Files Move all your files to the new server.
  45. 45. Moving Servers Check Permissions Check permissions against the installation instructions
  46. 46. Moving Servers Config File Update your new database info in the config.php file.
  47. 47. Moving Servers Check Paths Change paths all through CP (there’s a lot)
  48. 48. Chop it Up & Build it Out Live Demo Time
  49. 49. Thank You! Slides, links and assets available at