EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development

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 EE Sandbox Templating Rapid Build Out Sweet T
ricks

The Old Way How we used to do this

Find all Addons & Install Go to all the 3rd
party developer sites, download install latest versions, conﬁgure 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 ﬁle ﬁeld plugin. Images
had to be manually inserted in templates. The Old Way

EE Sandbox Get Your Shovels and Buckets

EE Sandbox Addons LG Addon Updater LG .htaccess Generator LG
Add Sitename LG Replace LG TinyMCE SL Developer ImgSizr Word Limit Plus Category Checkboxes Freeform Field Frame nGEN File Structure Edit Dropdown

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 oﬀ 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 ﬁelds, create email templates EE
Sandbox Addons

Field Frame Rethink the way you use custom ﬁelds EE
Sandbox Addons

nGen File Field A ﬁeldtype 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 ﬁles EE
Sandbox Addons

Weblog Create a “content” weblog EE Sandbox Setup

Custom Fields Meta Keywords Meta Description Body (Tiny MCE) Images
(FF Matrix) EE Sandbox Setup

File EE Sweet Trick Title Width Height Align AJ Penninga
- http://www.prettysquares.com

ImgSizr Create “sized” directory in /images with appropriate permissions EE
Sandbox Other Stuff SL Developer Create custom tab Extensions Create custom tab Client Member Group Setup new “editor” group with access to ﬁle upoads, Structure, weblogs

Global Variables HTML Opening HTML Closing jQuery Javascript RSS Links
Stylesheets EE Sandbox Global Variables

EE Sandbox Global Variables <!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" /> html_head

EE Sandbox Global Variables </head> html_head_end

EE Sandbox Global Variables  <link rel="alternate" type="application/atom+xml" title="Blog
Title Here" href="#" /> rss

Templates Footer Header Nav Sidebar Content EE Sandbox Templates

EE Sandbox Templates <h4>Navigation Here</h4> <ul> {exp:structure:nav_main include_ul="no" current_class="current"} </ul>
nav

EE Sandbox Templates <h4>Sidebar Here</h4> {exp:structure:nav_sub css_id="sec-nav" show_overview_link="yes" start_from="/{segment_1}" show_depth="2"
} sidebar

EE Sandbox Templates {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} content

EE Sweet Trick {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} Image Replacement Method

Entry List what we’ve installed and any special path changes
when moving servers. EE Sandbox Install Log

Moving Servers Moving your sandbox is faster than installing

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 ﬁles 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)
Moving Servers

Chop it Up & Build it Out Live Demo Time

Thank You! Slides, links and assets available at fortysevenmedia.com

EECI2009 - From Design to Dynamic - Rapid Expre...

EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development

More Decks by FortySeven Media

Other Decks in Design

Featured

Transcript