The Personal Disquiet of

Mark Boulton

Expression Engine - Designers Questions Part 2

– February 9th, 2005 –

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

<

p> 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

<

p> I also needed categories with which to categorise the portfolio entries.

  • Digital
    • Websites
    • Applications
    • User research and strategy
  • Print
    • 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’:

{title}

Then set up the categories:

{title}

Next, set up a new Custom Field Group and call it Portfolio.

{title}

Then, add your content headings choosing the correct field types.

{title}

{title}

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.

<

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

Filed in: design, expression-engine.

Further reading