SlideShare a Scribd company logo
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

<!--Blog Feeds-->
<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

What's hot (20)

PPT
Introduction to Basic Concepts in Web
Jussi Pohjolainen
 
PPTX
Introduction to Web Development
Parvez Mahbub
 
PDF
Introduction to web development
Mohammed Safwat
 
PPTX
CSS Eye for the Programmer Guy
Dennis Slade Jr.
 
PDF
What the heck is HTML 5?
Simon Willison
 
PDF
Web Development for UX Designers
Ashlimarie
 
PDF
Basic Introduction to Web Development
Burhan Khalid
 
PPTX
Doing More with LESS for CSS
Todd Anglin
 
PDF
Front End Best Practices
Holger Bartel
 
KEY
Introduction to HTML5/CSS3 In Drupal 7
Mediacurrent
 
PPTX
The Rich Standard: Getting Familiar with HTML5
Todd Anglin
 
PDF
HTML5 & CSS3 in Drupal (on the Bayou)
Mediacurrent
 
PPTX
Web Standards And Protocols
Steven Cahill
 
PPTX
Html workshop 1
Lee Scott
 
PPTX
HTML5 and CSS3 Techniques You Can Use Today
Todd Anglin
 
PDF
BEM it! Introduction to BEM methodology
Varya Stepanova
 
PDF
Front end development best practices
Karolina Coates
 
PPTX
An Introduction to Umbraco
Jeremy Branham
 
PPTX
Edge of the Web
Todd Anglin
 
PPTX
Wordpress theme submission requirement for Themeforest
Enayet Rajib
 
Introduction to Basic Concepts in Web
Jussi Pohjolainen
 
Introduction to Web Development
Parvez Mahbub
 
Introduction to web development
Mohammed Safwat
 
CSS Eye for the Programmer Guy
Dennis Slade Jr.
 
What the heck is HTML 5?
Simon Willison
 
Web Development for UX Designers
Ashlimarie
 
Basic Introduction to Web Development
Burhan Khalid
 
Doing More with LESS for CSS
Todd Anglin
 
Front End Best Practices
Holger Bartel
 
Introduction to HTML5/CSS3 In Drupal 7
Mediacurrent
 
The Rich Standard: Getting Familiar with HTML5
Todd Anglin
 
HTML5 & CSS3 in Drupal (on the Bayou)
Mediacurrent
 
Web Standards And Protocols
Steven Cahill
 
Html workshop 1
Lee Scott
 
HTML5 and CSS3 Techniques You Can Use Today
Todd Anglin
 
BEM it! Introduction to BEM methodology
Varya Stepanova
 
Front end development best practices
Karolina Coates
 
An Introduction to Umbraco
Jeremy Branham
 
Edge of the Web
Todd Anglin
 
Wordpress theme submission requirement for Themeforest
Enayet Rajib
 

Similar to EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development (20)

PDF
Build Your First EE2 Site
Ruthie BenDor
 
PPT
Fms Web Cms Training
Ahsan Uddin Shan
 
PDF
Deployment with ExpressionEngine
Green Egg Media
 
PDF
Flexible web publishing with Expression Engine
Harvard Web Working Group
 
PPT
Fms Web Cms Training
Ahsan Uddin Shan
 
PPT
Webme Slide Tutorial
mariamcgarry
 
KEY
ExpressionEngine 2: Total Domination
guestf9c0bc
 
PDF
Wordpress intro
the-colab
 
KEY
How to start developing your own ExpressionEngine addons
Leevi Graham
 
PDF
EECI 2010 - The Power of ExpressionEngine's Dynamic Templates
FortySeven Media
 
PPTX
Intro to ExpressionEngine and CodeIgniter
brightrocket
 
PPT
WebHosting Performance / WordPress - Pubcon Vegas - Hendison
Search Commander, Inc.
 
PPT
Site Manager rocks!
Gareth Saunders
 
PPTX
Theming Drupal 6 - An Introduction to the Basics
Erik Baldwin
 
PDF
Tuning web performance
George Ang
 
PDF
Tuning Web Performance
Eric ShangKuan
 
PDF
No gEEk? No Problem!
carolinecblaker
 
PDF
Edison learning cms_manual
Jennifer Pricci
 
PDF
presentation
tutorialsruby
 
PDF
Add-On Development: EE Expects that Every Developer will do his Duty
reedmaniac
 
Build Your First EE2 Site
Ruthie BenDor
 
Fms Web Cms Training
Ahsan Uddin Shan
 
Deployment with ExpressionEngine
Green Egg Media
 
Flexible web publishing with Expression Engine
Harvard Web Working Group
 
Fms Web Cms Training
Ahsan Uddin Shan
 
Webme Slide Tutorial
mariamcgarry
 
ExpressionEngine 2: Total Domination
guestf9c0bc
 
Wordpress intro
the-colab
 
How to start developing your own ExpressionEngine addons
Leevi Graham
 
EECI 2010 - The Power of ExpressionEngine's Dynamic Templates
FortySeven Media
 
Intro to ExpressionEngine and CodeIgniter
brightrocket
 
WebHosting Performance / WordPress - Pubcon Vegas - Hendison
Search Commander, Inc.
 
Site Manager rocks!
Gareth Saunders
 
Theming Drupal 6 - An Introduction to the Basics
Erik Baldwin
 
Tuning web performance
George Ang
 
Tuning Web Performance
Eric ShangKuan
 
No gEEk? No Problem!
carolinecblaker
 
Edison learning cms_manual
Jennifer Pricci
 
presentation
tutorialsruby
 
Add-On Development: EE Expects that Every Developer will do his Duty
reedmaniac
 
Ad

Recently uploaded (20)

PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PPTX
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
DOCX
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
PDF
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
Kit-Works Team Study_20250627_한달만에만든사내서비스키링(양다윗).pdf
Wonjun Hwang
 
PPTX
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
PPTX
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
PDF
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PDF
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Kit-Works Team Study_20250627_한달만에만든사내서비스키링(양다윗).pdf
Wonjun Hwang
 
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Ad

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 [email protected]
  • 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