EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development

Slide 1

Slide 1 text

From Design to Dynamic Rapid Development with ExpressionEngine

Slide 2

Slide 2 text

Hello My Name is Jonathan Longnecker @necker47 jon@fortysevenmedia.com

Slide 3

Slide 3 text

@47m http://fortysevenmedia.com

Slide 4

Slide 4 text

Overview What We’re Covering Today

Slide 5

Slide 5 text

The Problem EE Developers Are Too Awesome

Slide 6

Slide 6 text

The Problem 15+ Add-Ons for Each Site Using the Same Template Patterns Doing it Over and Over Again

Slide 7

Slide 7 text

The Solution EE Sandbox Templating Rapid Build Out Sweet T ricks

Slide 8

Slide 8 text

The Old Way How we used to do this

Slide 9

Slide 9 text

Find all Addons & Install Go to all the 3rd party developer sites, download install latest versions, conﬁgure to liking. The Old Way

Slide 10

Slide 10 text

Templates Manually create templates for each major page, use gobal embeds where possible. The Old Way

Slide 11

Slide 11 text

Image Placement Confusing mess using the ﬁle ﬁeld plugin. Images had to be manually inserted in templates. The Old Way

Slide 12

Slide 12 text

EE Sandbox Get Your Shovels and Buckets

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Leevi Graham The man EE Sandbox Addons

Slide 15

Slide 15 text

LG Addon Updater Let your 3rd party addons check home for updates EE Sandbox Addons

Slide 16

Slide 16 text

LG .htaccess Generator Remove index.php and much, much more EE Sandbox Addons

Slide 17

Slide 17 text

LG Add SiteName Enable CP admin page title replacements EE Sandbox Addons

Slide 18

Slide 18 text

LG Tiny MCE Turn oﬀ source formatting, spans and br’s Take out image upload, add blockquote EE Sandbox Addons

Slide 19

Slide 19 text

SL Developer Info Get to all your developer information quickly by keeping it in one place EE Sandbox Addons

Slide 20

Slide 20 text

Image Sizer Resizes, crops and thumbnails your images intelligently EE Sandbox Addons

Slide 21

Slide 21 text

Freeform Make forms using custom ﬁelds, create email templates EE Sandbox Addons

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

nGen File Field A ﬁeldtype for the FieldFrame framework EE Sandbox Addons

Slide 24

Slide 24 text

Structure Radically change the way you handle content pages and navigation EE Sandbox Addons

Slide 25

Slide 25 text

Structure Manage content weblog with Structure Choose “content” template EE Sandbox Addons

Slide 26

Slide 26 text

Template Preferences Turn on revisions Save templates as ﬁles EE Sandbox Addons

Slide 27

Slide 27 text

Weblog Create a “content” weblog EE Sandbox Setup

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

EE Sandbox Global Variables html_head

Slide 33

Slide 33 text

EE Sandbox Global Variables html_head_end

Slide 34

Slide 34 text

EE Sandbox Global Variables rss

Slide 35

Slide 35 text

Templates Footer Header Nav Sidebar Content EE Sandbox Templates

Slide 36

Slide 36 text

EE Sandbox Templates

Navigation Here

{exp:structure:nav_main include_ul="no" current_class="current"} nav

Slide 37

Slide 37 text

EE Sandbox Templates

Sidebar Here

{exp:structure:nav_sub css_id="sec-nav" show_overview_link="yes" start_from="/{segment_1}" show_depth="2" } sidebar

Slide 38

Slide 38 text

EE Sandbox Templates {html_head} {exp:weblog:entries weblog="content" disable="member_data| pagination|trackbacks"} {/exp:weblog:entries} {exp:structure:titletrail separator="|"} {rss} {stylesheets} {js} {jquery} {html_head_end} content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Moving Servers Moving your sandbox is faster than installing

Slide 43

Slide 43 text

Export the Database Export from your sandbox install. Moving Servers

Slide 44

Slide 44 text

Import Database Create a new blank database and import. Moving Servers

Slide 45

Slide 45 text

Move Files Move all your ﬁles to the new server. Moving Servers

Slide 46

Slide 46 text

Check Permissions Check permissions against the installation instructions Moving Servers

Slide 47

Slide 47 text

Config File Update your new database info in the config.php file. Moving Servers