05 - Loading Static Front End Code into ExpressionEngine

Now that we have a decently-thought-out Content Model for our ExpressionEngine-based portfolio site it’s time to start building. In this installment we’ll bring the static HTML provided by the Folder Theme into the EE Template Manager and in the process learn how to continue to work with the code as static file-based files.

 

Template Options
There are two ways to work with EE templates.  The first is through EE’s Control Panel where you work via the browser and write code, and when you save the template the code gets stored into EE’s database.  The downside of this is you aren’t working in a full-featured text editor.  One way to mitigate this is to use the It’sAllText Firefox addon that creates a bridge between Firefox textareas and a text editor of your choice. Here’s something similar for Chrome users (apparently Linux only).

One advantage with this approach is that there are other places - besides templates - to store code & logic in ExpressionEngine. Those other code-storage tools don’t natively allow saving out to files, so working with your templates via the Control Panel might be easier because you are always in the Control Panel.

The second way to work with ExpressionEngine templates is to configure EE to see them as files on the file server. With this approach EE creates (or recognizes) files on the server file system that you can then open and edit with any appropriate editor.  Saved changes via the editor are then used by ExpressionEngine to produce your rendered pages.  With this approach it’s easier to have multiple templates open at once and you can take advantage of all the automation that a good text editor can offer.  If you prefer this way of coding templates you might then want to check out some 3rd party addons (like LibrarEE) that give you the ability to save the other code-storage places in EE out as text files as well.

Actually, there’s a 3rd way (or maybe it’s way number 2.5 because it’s only available for MAC users?).  At any rate MountEE lets you mount your ExpressionEngine site as a drive in Finder.  Your templates will show up in folders without having to configure EE to save them as files. 

Overall there is no one right way to code in EE (no matter what you might read on Twitter). Find an approach that suits your personal preferences, meets any business requirements (especially if you are in a team environment), serves the project needs, and ignore anyone who says “if you aren’t doing it my way you are doing it wrong”.

Performance Note
One sidenote from a performance perspective: Having EE work with templates as files means you’re adding a step into the page-rendering process (EE having to go get the template from the file system). As part of a final pre-launch performance tweak, consider a final synchronization of your templates to get the most recent versions into EE’s database, and then turning off the templates as files option. 

Control Panel Prep
A bit of pre-work in the ExpressionEngine Control Panel will ease the process here.  First, we need to tell EE that we want to save our templates out as text files.  The ExpressionEngine User Guide has the process covered.  The key thing in those instructions is getting the path to the base folder set correctly and to ensure the permissions are appropriate.

Import HTML
Now we want ExpressionEngine to see our HTML files.  I’ve found the following steps to be the quickest way to do that:

  • In the EE Control Panel navigate to Design > Templates > Template Manager
  • Use the New Group button and create a new Template Group called page-comps
  • Edit the page-comps / index template, and down near the bottom of the screen flag it as “Save as File”
  • Click “Update & Finished”
  • Check file level - EE should have created a templates / default_site / page-comps.group folder with index.html in it
  • Copy the 12 html files from the downloaded Folder Theme into that new folder (overwrite EE’s index.html with the index.html from the Folder template)
  • Back in the EE Control Panel - refresh your view and those templates should be showing


Template Revisioning
ExpressionEngine has a basic template revisioning feature. Let’s take a moment to get that turned on before continuing.  Better now than when you could use it and then find that it wasn’t turned on.

  • In the EE CP again navigate back to Design > Templates > Template Manager > Global Template Preferences
  • Set Save Template Revisions? to Yes
  • Set Maximum Number of Revisions to Keep to 10

I’d recommend taking a few minutes and experimenting - make a change at the file level and then go back into the CP and look at the template there, and vice/versa. Also check template synchronizing and template revisions and get comfortable with how they work.

Moving CSS, JS and Image Files
EE has the ability to work with CSS & JS code in the same way we just did for HTML. In the past I’ve stored CSS inside of EE - which adds the advantage of being able to use a pathing variable in the code. This Folder theme has a lot of CSS and JS files however, so I’m going to keep them all outside of EE and link to them in the standard fashion for the sake of my sanity.

We do need to find a place for the files where EE can see them.  Again, this is an organizational decision where there is no one right way.  I’m going to create an /assets/ folder off the site root and just move the entire folder structure provided by the Folder Theme under it - so I’ll have mysite.com/assets/css/ and mysite.com/assets/js/ etc.

Our First Variable
We’ve moved all of the files now from the Folder Theme download into our EE installation. Just like when you move you need to update your mailing address, we now need to tell the HTML where all of the CSS, JS and Images have gone to live.  We’ll do that in a moment, but as part of that work we’ll use an EE Global Variable for the first time.  EE has a number of Standard Global Variables that are set upon installation.  The one I want to use here is site_url, which will return the root path of where our EE install is located.  By using this variable our links will render with fully specified paths (which are more reliable than relative paths when using EE) and we’ll also be able to update that path easily if the site domain changes as part of the launch process.

Updating Paths
Let’s do the work now.  This is where a nice text editor with a Find & Replace function comes in handy. Note that the site_url variable includes the trailing slash so accommodate that in your updated path.

You’ll need to run 4 Find & Replace functions on all 12 HTML files:

replace src="/js with src="{site_url}assets/js
replace href="css/ with href="{site_url}assets/css
replace href="player-skin/ with href="{site_url}assets/player-skin
replace src="img/ with src="{site_url}assets/img


View Results
With the paths updated and all your HTML templates saved, you should be able to go into the EE Control Panel, and use the “View” link by each template to render it in the browser.  The templates should load and look and function the same as they did when you first downloaded the Theme, but now they are being served up (in a most basic fashion) by ExpressionEngine.

What’s Next?
Next up we’ll take advantage of working in a CMS and make our templates more DRY by splitting them up and storing reusable bits in one place within ExpressionEngine.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Tony

by Tony

Date: Tuesday, June 26th, 2012
Comment: #1

Thank you!

Picture of ramonekalsaw

by ramonekalsaw

Date: Wednesday, July 18th, 2012
Comment: #2

Hello Mike,

In the section on ‘Find an Replace functions’ ... in index.html I’m not finding the ‘player-skin’ variable. I do find

<!—SKIN—>
  <link rel=“stylesheet” media=“all” href=“css/skin.css”/>

Am I looking at the correct file ... ‘index.html’?

Thanks.

Ramone

Picture of Boyink

by Boyink

Date: Wednesday, July 18th, 2012
Comment: #3

You should be looking at all of the HTML files.

Picture of ramonekalsaw

by ramonekalsaw

Date: Monday, July 23rd, 2012
Comment: #4

Hello Mike,

I followed your instructions outlined under “Moving CSS, JS and Image Files” ...but I’m not connecting to the CSS.

I’m building the site using MAMP ... so would there be another level to account for in the directory address I’m pointing to?

Any troubleshooting tips would be appreciated : )

Thanks.

Picture of Boyink

by Boyink

Date: Tuesday, July 24th, 2012
Comment: #5

Troubleshooting paths is always a practice in comparison.  Compare the path that EE is generating with what the path needs to be.

The site_url variable should neutralize any system/os differences.

Picture of ramonekalsaw

by ramonekalsaw

Date: Tuesday, July 24th, 2012
Comment: #6

“Troubleshooting paths is always a practice in comparison.” ~ That’s poetry : )

Picture of Jim Lakey

by Jim Lakey

Date: Tuesday, August 21st, 2012
Comment: #7

For some of the plugins the theme uses, there are also css files that need to be linked e.g.

href=”{site_url}assets/js/prettyPhoto/css/prettyPhoto.css”

You’ve connected up all the javascript files, but not their dependencies.

Thanks, by the way, for this tutorial. I just finished Ryan Irelan’s book and really didn’t enjoy it but going through your tutorials, it makes the process much clearer so now I think I might pick up your EE2 book as well!

Picture of Boyink

by Boyink

Date: Tuesday, August 21st, 2012
Comment: #8

Thanks Jim - I think I ran across this in later chapters but not sure I called attention to it. 

Just so you know, the book has had way more attention to those sorts of details than the free tutorials have.  Consider the Free Tutorials as a first-draft..;)

Picture of Jimmy Hansen

by Jimmy Hansen

Date: Monday, December 24th, 2012
Comment: #9

Thanks for the great tutorials!

For the first find/replace:

replace src=”/js with src=”{site_url}assets/js

Should there be a leading slash before js? I didn’t find anything that way; it looks like the code references it by js/somefile.js.

Picture of Ben Dunmore

by Ben Dunmore

Date: Monday, January 28th, 2013
Comment: #10

This line its wrong: replace src=”/js with src=”{site_url}assets/js

It should be (at least I think): replace src=“js/ with src=”{site_url}assets/js/

Also, for anyone who got lost like I did trying to figure out where these variables were that I was supposed to be replacing, it’s the 12 HTML files.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, January 28th, 2013
Comment: #11

I updated the js link - thanks!

Picture of Kyle Skrinak

by Kyle Skrinak

Date: Saturday, February 9th, 2013
Comment: #12

It’s good to know about variables, and this is good stuff, thanks! However, if assets will be off the root directory, why must we add the site URL info? Would not
/assets/css/file.css suffice? Or was this a vehicle for a simple demonstration of using a variable in a template? Or…? Much thanks for a super tutorial!

Picture of Boyink

by Boyink

Date: Sunday, February 10th, 2013
Comment: #13

Hey Kyle -

I’ve had issues where relative paths didn’t work for deeper-level templates and URLs, so just use the variable for fully-specified paths everywhere.

Picture of Steven

by Steven

Date: Tuesday, February 12th, 2013
Comment: #14

Hi,
you said you updated the /js link but you did not…;)
Other question: the index html is overwritten with the updated paths but keeps blank when trying to view it?

Picture of Boyink

by Boyink

Date: Tuesday, February 12th, 2013
Comment: #15

Do you mean on the page or in the companion files?

Not sure what you mean on the second - are you loading it from the Control Panel - so the index template?

Picture of Steven

by Steven

Date: Wednesday, February 13th, 2013
Comment: #16

Hi,
about the /js, i meant in the code; you said you corrected it after someone else’s comment about it. It’s not /js but js/......
About the index template. When i upload the corrected file in my ftp program it is still empty in the EE template console. So i had to paste the code directly in EE instead of using a text editor or Mountee….

steven

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, February 14th, 2013
Comment: #17

Not sure what’s going on there (maybe you need to Synchronize Templates) but if the code works when pasted in then I’m good..;)

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>