Journal
Expression Engine - Designers Questions Part 2
- Posted on: February 09, 2005
- In: Design, Expression Engine
- Comments closed
Following several more emails from designers, I thought i’d compile some of the questions in a follow up to Expression Engine - Designers Questions.
Many of the questions have been related specifically to the reason why I bought EE in the first place - my portfolio. You may recall some of my reasons for changing to EE, one of those reasons was the ability to add custom fields, this makes EE invaluable for both clients sites and designers portfolios.
Some more questions
Why should I spend money on EE when there are free systems which offer more functionality, eg forums, threaded comments etc.
Well, for me it’s not so much a question of out-of-the-box functionality but more that EE fits very well for me as a designer. It allows me to customise the data sets and importantly seperates templates from the tags, that way I can produce valid XHTML code and use CSS for the styling. This is something other CMS’s don’t do, such as Mambo. Although Mambo is a pretty nifty system a lot of the built in modules and plugins produce invalid code which, unless you’re very familiar with php, you have to use.
I’m not picking on Mambo specifically here, a lot of CMS’s, blogging software and CMS frameworks do the same thing.
How do you move from a weblog idea to create sections in a commercial site
This involves thinking slightly differently to EE’s documentation. Where it says ‘weblog’ think ‘section’, where it says ‘entries’ think ‘pages’ and so on. This site is created by several ‘weblogs’, in each one there are categories and then ‘entries’ for the pages of content. They also all have custom fields for their content.
How do you handle global includes such as navigation and footers?
In the past i’ve used php to include files, such as navigation and footers, on my server. You can still do this in EE by turning on php parsing in the template preferences. My preferred method however is to create a seperate template group called ‘includes’ then each template within this group is a template I can include throughout my site using the embed tag. This downside to this is it’s another query for the server, but this is a minor point when you consider all of your content is now accessible and editable from within EE.
Can I use my old design from pMachine?
I’m not that familiar with pMachine, but as far as the html and css goes I can’t see this being a problem. Simply take the html into your favourite html editor, take out the pMachine tags and replace them with the EE tags. it should work ok.
Can I have flash in a post?
Yes you can. There is a plugin available and you have make sure .swf is an acceptable upload file format. You can do this in your weblog settings. You can also have Quicktime embedded as well with a similar plugin.
How did you build your portfolio in EE?
I’ve had so many emails asking this question. I could’ve saved myself a load of typing and posted this weeks ago. Never mind. here’s the run down.
Decide what your content will be
Firstly decide what content is going to be in your portfolio. Is it going to be just images? Images and captions? Detailed text? etc. These are the different requirements I had for my portfolio.
- Title
- Client
- Small promo image
- Small promo text
- Introduction text
- Extended text
- Screenshot 1 title
- Screenshot 1 image
- Screenshot 1 caption
- Screenshot 2 title
- Screenshot 2 image
- Screenshot 2 caption
- Screenshot 3 title
- Screenshot 3 image
- Screenshot 3 caption
- Screenshot 4 title
- Screenshot 4 image
- Screenshot 4 caption
- Screenshot 5 title
- Screenshot 5 image
- Screenshot 5 caption
- Related links
I also needed categories with which to categorise the portfolio entries.
- Digital
- Websites
- Applications
- User research and strategy
- Branding and identity
- Print communications
- Archive
Now I have a basic idea of the content and the categories with which to label the content I can set up the weblog, or section, of my site.
Set up EE
Firstly, create a new weblog called ‘Portfolio’:
Then set up the categories:
Next, set up a new Custom Field Group and call it Portfolio.
Then, add your content headings choosing the correct field types.
Now you have your Custom Field Set. Go into your weblog management and select your new Portfolio weblog. Click Edit Groups, then choose your new portfolio field group from the dropdown menu. Now, when you publish a new entry you should see your new field group being used.
That’s the data side of things covered. After inputting all of your new portfolio information into your new field group you should have all the content ready to start building the templates.
My portfolio templates have basic EE tags controlling all of the dynamic stuff going on and it has many similarities to weblogs. I have four templates.
- Index
- Category
- Detail
- Screenshots
The index page is a bunch of queries to the different categories. The portfolio entries which are pulled out as promos (the one’s with the images across the middle) are simply made ‘sticky’ which brings them to the most recent entry within their category. The index page then queries the database and the category and pulls out the most recent, which is the one i’ve defined as being sticky. this allows me to rotate the promoted portfolio entries very easily.
The other templates are self explanatory. The category templates displays the parent category entries. The detail template shows the extended text and the Screenshot template shows the various screenshots controlled by a simple javascript gallery. I’d like to combine the Detail and Screenshot templates and use simple logic to display the content depending on what you click on the page. I think this can be done with the segment tag, but i’m not quite sure how to do it at this stage.
So basically, that’s about it. You can have whatever you like in your portfolio - flash, quicktime, images, text. The only real limitation is your imagination.
Most recent entries
- Why have a chair when you could have a Sumo
- Design By Community
- Drupal.org
- Don’t screw with conventions
- Design isn’t about tools
- Where’s the D in D&AD?
- Coolspotters: Where people and products meet
- Alys Rose Boulton
- abcdefghijklmnopqrstuvwxyz
- From Poly to Pole
Categories
Search
Journal feeds
Books
Stuff I like
Powered by Expression Engine



I'm a graphic designer from near Cardiff in the UK. I've been a designer for over ten years now and primarily work on the web. I'm still partial to a bit of print every now and then though. I used to work for
Comments
Actually, there is no one-to-one replacement for pMachine tags :-) But mostly, you’re right: Conversion is fairly straightforward. Here are some hints that worked for me…
0. Note down category ids, weblog shortnames and field names in EE and the corresponding pM ids.
1. Copy the page HTML code as a new EE template, remove the PHP include for pMachine on the top.
2. Look out for the pM tags, surrounded by PHP tags ... look up the functionality in the pM docs, replace the corresponding code for the pM tag from templates in the pM CP (with respect to parameters passed).
3. Replace the pM data placeholders and remaining pM basic functions with EE tags. Use the information noted in 0. to call the correct data in the EE tags.
4. Remember that some pM tags limit the output to xx words - use EE plugins, e.g. exp:word_limit, to simulate this behaviour.
5. Test and finetune ... and don’t forget to copy your CSS to a EE template and link it.
6. When finished, continue with the next pM page.
7. In the end, fix all remaining pM-specific links to EE-links.
Worked for me, but you’ll most likely end up with an old HTML4, not a funky XHTML design.
You only have to remember that some pM functionality (forums, ...) aren’t available in EE yet. Oh, BTW: Converted pM-to-EE templates only need PHP enabled if you use non pM-specific PHP-includes or features that could only be simulated in EE by a PHP script.
HTH,
Markus
Markus Stolpmann
Wed 9th Feb 2005
at 8:12 pm
Once again, an excellent and helpful write-up. And I didn’t even know you can customize the EE admin screen. Heh. Thanks!
Lea
Thu 10th Feb 2005
at 8:58 pm
Markus - Thank you for your helpful comments. As I said i’m not that familiar with pMachine and maybe I should have checked a little further before posting this article.
Lea - I only realised that a short while ago. I had a look in the system folder and started playing around with the stylesheets. So, I created my own, added some background images here and there…
Mark Boulton
Thu 10th Feb 2005
at 9:10 pm
This question is very tactical, but has big implications for how I structure things.
One question about “section” (aka “weblogs") management and embedded templates (e.g. EE includes):
If you have different blog for different sections, how do you refer to templates with an absolute path? For example, I like to make global includes for things like top half, bottom half, footer, meta, CSS, et. al. If those have to live in a template in a section, how do you “point” to it?
Does
embed=/includes/templatename}work (note the leading “/")? It would be great to not have to rely on PHP for that.
Allan White
Sat 12th Feb 2005
at 1:01 am
Inspired by this discussion, I rolled an EE solution in about 20 hours to cover my wife’s aid work in Sri Lanka. EE was perfect for this project.
Related question: why did you execute your portfolio as a “regular” blog as opposed to using the Image Gallery module?
Allan White
Sat 12th Feb 2005
at 1:01 am
Mark,
Your explanation for how you designed your site in EE is really awesome!
I am very appreciative for the info that you have laid out.
Hal!
Sun 13th Feb 2005
at 5:39 am
Allan - yes, that’s exactly right. Use {embed=includes/templatename}, but leave off the preceeding slash, it’s not needed.
I like the aid work site, excellent. To answer your question regarding the portfolio, hopefully most of the information is in the very article. I’m in the process of revisiting the design and build of this section to bring the portfolio images higher up, eg. not so many click-throughs to get to the portfolio images. Also, the section is going to be in a subdomain, that way I can tell client the subdomain url and they can go straight to the portfolio.
Hal - No problem!
Mark Boulton
Sun 13th Feb 2005
at 10:46 am
This is great. I can now forward more emailed questions directly to your site! Regarding use of segments, I’ll email you a sample.
Colly
Mon 14th Feb 2005
at 3:11 pm
A fantastic resource for EE. I’m considering moving across from Wordpress, as I need something more than a blog, and thanks to this article I’m just about sold on the idea of EE.
Brilliant!
Nik
Wed 23rd Feb 2005
at 10:38 am
No problem Nik, hope you get on ok with EE. Even a few months on, i’m still blown away with EE - it just keeps on surprising me!
Mark Boulton
Mon 28th Feb 2005
at 9:49 pm
Thanks for going into detail about your experiences and reasons for using Expression Engine. Before I decided on using WordPress for my site I was interested in trying out Expression Engine but the cost to try it out put me off. (I had problems with getting a demo account)
Since I registered with them I recently got an email announcing their new free for personal use version EE Core. I might kick its tires again to see what things are like.
Ian Cheung
Fri 23rd Dec 2005
at 9:09 pm
great article i appreciate it. jus ttried to replicate your Tutorial .. but no luck. either the version has changed enough to not reflect your screenshots or there is some steps left out that i am not able to replicate on my system.
cheers
walter
Fri 30th Dec 2005
at 11:55 pm