Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for FortySeven Media FortySeven Media
September 27, 2011
Design
1
100

EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development

Using ExpressionEngine, Structure and some other tricks to build out a site super fast.
Avatar for FortySeven Media

FortySeven Media

September 27, 2011
Tweet

More Decks by FortySeven Media

See All by FortySeven Media
Customizing EE2's Publish Area
Avatar for FortySeven Media fortysevenmedia
1
110
EECI 2010 - The Power of ExpressionEngine's Dynamic Templates
Avatar for FortySeven Media fortysevenmedia
4
280
Why ExpressionEngine is Great for Designers
Avatar for FortySeven Media fortysevenmedia
5
140

Other Decks in Design

See All in Design
UXデザインはなぜ定着しないのか？
Avatar for Inside Design Studio designstudiopartners
0
740
タイミーでフィールドワークしたら、サービスデザインが始まった
Avatar for 太田賢一 kenichiota0711
1
2k
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
Avatar for 株式会社カミナシ kaminashi
2
1.7k
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
Avatar for Aki spring_aki
4
300
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
Avatar for Gaku Oyanagi gakuoya
1
690
AI時代に淘汰されないデザインのしごと
Avatar for Akinen akinen
1
140
札幌の雪を観光資源に変える：デザインプログラムSESSAの挑戦
Avatar for Ittyanm ittyann
0
260
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
140
portfolio_YumiYasuda
Avatar for yumi yasuda yum0418
0
290
Design Studio Deck | インクルーシブデザインスタジオCULUUM
Avatar for インクルーシブデザインスタジオCULUMU culumu
3
1.8k
Kid Cowboy 103
Avatar for Marilu Molina marilutwin
0
270
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
Avatar for trivia trivia
0
480

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
281
13k
Scaling GitHub
Avatar for Zach Holman holman
460
140k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.7k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k

Transcript

  1. From Design to Dynamic Rapid Development with ExpressionEngine

  2. Hello My Name is Jonathan Longnecker @necker47 [email protected]

  3. @47m http://fortysevenmedia.com

  4. Overview What We’re Covering Today

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

    ricks

  8. The Old Way How we used to do this

  9. Find all Addons & Install Go to all the 3rd

    party developer sites, download install latest versions, configure to liking. The Old Way

  10. Templates Manually create templates for each major page, use gobal

    embeds where possible. The Old Way

  11. Image Placement Confusing mess using the file field plugin. Images

    had to be manually inserted in templates. The Old Way

  12. EE Sandbox Get Your Shovels and Buckets

  13. 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

  14. Leevi Graham The man EE Sandbox Addons

  15. LG Addon Updater Let your 3rd party addons check home

    for updates EE Sandbox Addons

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

    Sandbox Addons

  17. LG Add SiteName Enable CP admin page title replacements EE

    Sandbox Addons

  18. LG Tiny MCE Turn off source formatting, spans and br’s

    Take out image upload, add blockquote EE Sandbox Addons

  19. SL Developer Info Get to all your developer information quickly

    by keeping it in one place EE Sandbox Addons

  20. Image Sizer Resizes, crops and thumbnails your images intelligently EE

    Sandbox Addons

  21. Freeform Make forms using custom fields, create email templates EE

    Sandbox Addons

  22. Field Frame Rethink the way you use custom fields EE

    Sandbox Addons

  23. nGen File Field A fieldtype for the FieldFrame framework EE

    Sandbox Addons

  24. Structure Radically change the way you handle content pages and

    navigation EE Sandbox Addons

  25. Structure Manage content weblog with Structure Choose “content” template EE

    Sandbox Addons

  26. Template Preferences Turn on revisions Save templates as files EE

    Sandbox Addons

  27. Weblog Create a “content” weblog EE Sandbox Setup

  28. Custom Fields Meta Keywords Meta Description Body (Tiny MCE) Images

    (FF Matrix) EE Sandbox Setup

  29. File EE Sweet Trick Title Width Height Align AJ Penninga

    - http://www.prettysquares.com

  30. 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 file upoads, Structure, weblogs

  31. Global Variables HTML Opening HTML Closing jQuery Javascript RSS Links

    Stylesheets EE Sandbox Global Variables

  32. 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

  33. EE Sandbox Global Variables </head> html_head_end

  34. EE Sandbox Global Variables <!--Blog Feeds--> <link rel="alternate" type="application/atom+xml" title="Blog

    Title Here" href="#" /> rss

  35. Templates Footer Header Nav Sidebar Content EE Sandbox Templates

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

    nav

  37. 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

  38. 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
  39. None

  40. 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

  41. Entry List what we’ve installed and any special path changes

    when moving servers. EE Sandbox Install Log

  42. Moving Servers Moving your sandbox is faster than installing

  43. Export the Database Export from your sandbox install. Moving Servers

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

    Servers

  45. Move Files Move all your files to the new server.

    Moving Servers

  46. Check Permissions Check permissions against the installation instructions Moving Servers

  47. Config File Update your new database info in the config.php

    file. Moving Servers

  48. Check Paths Change paths all through CP (there’s a lot)

    Moving Servers

  49. Chop it Up & Build it Out Live Demo Time

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