SlideShare a Scribd company logo

EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development

•
•
FortySeven Media
FortySeven Media

The document discusses ExpressionEngine and how it can be used to rapidly develop sites using templates, addons, and other tools. It introduces the EE Sandbox approach, which involves setting up templates, addons, global variables and other site elements as reusable components. This allows developers to quickly build out new sites using the same patterns. The document provides an overview of the key elements in an EE Sandbox setup and demonstrates how to install the components, create templates, import assets and move the site to a new server.

1 of 50
Download to read offline
From Design to Dynamic Rapid Development with ExpressionEngine
Hello My Name is Jonathan Longnecker @necker47 jon@fortysevenmedia.com
@47m http://fortysevenmedia.com
Overview What We’re Covering Today
The Problem EE Developers Are Too Awesome
The Problem 15+ Add-Ons for Each Site Using the Same Template Patterns Doing it Over and Over Again
The Solution w Ticks eet r S EE Sandbox Templating Rapid Build Out
The Old Way How we used to do this
The Old Way Find all Addons & Install Go to all the 3rd party developer sites, download install latest versions, configure to liking.
The Old Way Templates Manually create templates for each major page, use gobal embeds where possible.
The Old Way Image Placement Confusing mess using the file field plugin. Images had to be manually inserted in templates.
EE Sandbox Get Your Shovels and Buckets
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
EE Sandbox Addons Leevi Graham The man
EE Sandbox Addons LG Addon Updater Let your 3rd party addons check home for updates
EE Sandbox Addons LG .htaccess Generator Remove index.php and much, much more
EE Sandbox Addons LG Add SiteName Enable CP admin page title replacements
EE Sandbox Addons LG Tiny MCE Turn off source formatting, spans and br’s Take out image upload, add blockquote
EE Sandbox Addons SL Developer Info Get to all your developer information quickly by keeping it in one place
EE Sandbox Addons Image Sizer Resizes, crops and thumbnails your images intelligently
EE Sandbox Addons Freeform Make forms using custom fields, create email templates
EE Sandbox Addons Field Frame Rethink the way you use custom fields
EE Sandbox Addons nGen File Field A fieldtype for the FieldFrame framework
EE Sandbox Addons Structure Radically change the way you handle content pages and navigation
EE Sandbox Addons Structure Manage content weblog with Structure Choose “content” template
EE Sandbox Addons Template Preferences Turn on revisions Save templates as files
EE Sandbox Setup Weblog Create a “content” weblog
EE Sandbox Setup Custom Fields Meta Keywords Meta Description Body (Tiny MCE) Images (FF Matrix)
EE Sweet Trick AJ Penninga - http://www.prettysquares.com File Title Width Height Align
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
EE Sandbox Global Variables Global Variables HTML Opening HTML Closing jQuery Javascript RSS Links Stylesheets
EE Sandbox Global Variables html_head <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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" />
EE Sandbox Global Variables html_head_end </head>
EE Sandbox Global Variables rss <link rel="alternate" type="application/atom+xml" title="Blog Title Here" href="#" />
EE Sandbox Templates Templates Footer Header Nav Sidebar Content
EE Sandbox Templates nav <h4>Navigation Here</h4> <ul> {exp:structure:nav_main include_ul="no" current_class="current"} </ul>
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" }
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}
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
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}
EE Sandbox Install Log Entry List what we’ve installed and any special path changes when moving servers.
Moving Servers Moving your sandbox is faster than installing
Moving Servers Export the Database Export from your sandbox install.
Moving Servers Import Database Create a new blank database and import.
Moving Servers Move Files Move all your files to the new server.
Moving Servers Check Permissions Check permissions against the installation instructions
Moving Servers Config File Update your new database info in the config.php file.
Moving Servers Check Paths Change paths all through CP (there’s a lot)
Chop it Up & Build it Out Live Demo Time
Thank You! Slides, links and assets available at fortysevenmedia.com

More Related Content

EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development

  • 1. From Design to Dynamic Rapid Development with ExpressionEngine
  • 2. Hello My Name is Jonathan Longnecker @necker47 jon@fortysevenmedia.com
  • 5. The Problem EE Developers Are Too Awesome
  • 6. The Problem 15+ Add-Ons for Each Site Using the Same Template Patterns Doing it Over and Over Again
  • 7. The Solution w Ticks eet r S EE Sandbox Templating Rapid Build Out
  • 8. The Old Way How we used to do this
  • 9. The Old Way Find all Addons & Install Go to all the 3rd party developer sites, download install latest versions, configure to liking.
  • 10. The Old Way Templates Manually create templates for each major page, use gobal embeds where possible.
  • 11. The Old Way Image Placement Confusing mess using the file field plugin. Images had to be manually inserted in templates.
  • 12. EE Sandbox Get Your Shovels and Buckets
  • 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. EE Sandbox Addons Leevi Graham The man
  • 15. EE Sandbox Addons LG Addon Updater Let your 3rd party addons check home for updates
  • 16. EE Sandbox Addons LG .htaccess Generator Remove index.php and much, much more
  • 17. EE Sandbox Addons LG Add SiteName Enable CP admin page title replacements
  • 18. EE Sandbox Addons LG Tiny MCE Turn off source formatting, spans and br’s Take out image upload, add blockquote
  • 19. EE Sandbox Addons SL Developer Info Get to all your developer information quickly by keeping it in one place
  • 20. EE Sandbox Addons Image Sizer Resizes, crops and thumbnails your images intelligently
  • 21. EE Sandbox Addons Freeform Make forms using custom fields, create email templates
  • 22. EE Sandbox Addons Field Frame Rethink the way you use custom fields
  • 23. EE Sandbox Addons nGen File Field A fieldtype for the FieldFrame framework
  • 24. EE Sandbox Addons Structure Radically change the way you handle content pages and navigation
  • 25. EE Sandbox Addons Structure Manage content weblog with Structure Choose “content” template
  • 26. EE Sandbox Addons Template Preferences Turn on revisions Save templates as files
  • 27. EE Sandbox Setup Weblog Create a “content” weblog
  • 28. EE Sandbox Setup Custom Fields Meta Keywords Meta Description Body (Tiny MCE) Images (FF Matrix)
  • 29. EE Sweet Trick AJ Penninga - http://www.prettysquares.com File Title Width Height Align
  • 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. EE Sandbox Global Variables Global Variables HTML Opening HTML Closing jQuery Javascript RSS Links Stylesheets
  • 32. EE Sandbox Global Variables html_head <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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. EE Sandbox Global Variables html_head_end </head>
  • 34. EE Sandbox Global Variables rss <!--Blog Feeds--> <link rel="alternate" type="application/atom+xml" title="Blog Title Here" href="#" />
  • 35. EE Sandbox Templates Templates Footer Header Nav Sidebar Content
  • 36. EE Sandbox Templates nav <h4>Navigation Here</h4> <ul> {exp:structure:nav_main include_ul="no" current_class="current"} </ul>
  • 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. 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}
  • 40. 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}
  • 41. EE Sandbox Install Log Entry List what we’ve installed and any special path changes when moving servers.
  • 42. Moving Servers Moving your sandbox is faster than installing
  • 43. Moving Servers Export the Database Export from your sandbox install.
  • 44. Moving Servers Import Database Create a new blank database and import.
  • 45. Moving Servers Move Files Move all your files to the new server.
  • 46. Moving Servers Check Permissions Check permissions against the installation instructions
  • 47. Moving Servers Config File Update your new database info in the config.php file.
  • 48. Moving Servers Check Paths Change paths all through CP (there’s a lot)
  • 49. Chop it Up & Build it Out Live Demo Time
  • 50. Thank You! Slides, links and assets available at fortysevenmedia.com