04 - Creating a Content Model for an ExpressionEngine Site - Part 2

In part one of creating our portfolio-site content model we identified all the types of content on the site and broke them down into their composite elements.  The work was CMS-agnostic, however, so in this installment we’ll mash it together with what we learned about how EE thinks about content and come up with an ExpressionEngine - specific Content Model that will help guide our implementation.

 

Let’s start by defining our Channel Field Groups and Category Groups.

Field Groups & Fields
As we were identifying the little bits that make up each type of content we were doing most of the work of figuring out our EE fields.  However we can take advantage of working with a CMS to make things a bit more efficient in places - mostly around images and summary type fields.  We can dynamically create those so we (or our Content Administrators) won’t have to.

Also important to keep in mind is that ExpressionEngine provides some fields by default (including title, author and entry date), so we won’t need to create those in our Field Groups.

Home Page Images Field Group

  • Slideshow Image, File field type, mapped to an Upload Destination with an Image Manipulation specified to create the thumbnail version.
  • Slideshow Text, Textarea field type, no formatting.
  • Slideshown Link, text field, no formatting.

Blog - Video Field Group
A bit of a decision point here as the fields for the Video and Audio content types are pretty much the same - if you think about the core content being a media file.  I could create one Blog - Media Field Group and assign it to both the Blog - Audio and Blog - Video channels.  The only thing keeping me from doing that is knowing there are some nice add-on field types that make it easy to find and link to videos hosted on either YouTube or Vimeo (assuming we aren’t uploading Video files directly due to the large file sizes they require).  While it might seem counter-intuitive that more fields and field groups will be easier in the end you’ll just have to trust me on this one.

  • Video File, custom field type.
  • Video Description, Rich Text Field

Blog - Audio Field Group
The only complexity I can see here is allowing audio files to be either uploaded or linked to.  We’ll handle it with two fields and some logic in our templates.

  • Uploaded Audio File, File field type, mapped to a specific audio uploads directory.
  • Linked Audio File, Text field type.

Blog - Link Field Group

  • Link Target, Text field type.
  • Link Text, Text field type

Blog - Quote Field Group

  • Quote Author, Text field type.
  • Quote Text, Textarea field type, XHTML formatting.

Blog - Post Field Group

  • Blog Post Image, File field, mapped to a specific Upload Destination with an Image Manipulation to create the footer thumbnails.
  • Blog Post Text, Rich Textarea field, XHTML formatting.

Blog - Image Field Group
I may change my mind about this one as the essential elements of the Blog - Image are the same as the Blog - Post.  One field group may be possible, but for now I will assume a dedicated one for each.

  • Blog Image, File field type, mapped to a specific Upload Destination location.
  • Image Description, Textarea field type, XHTML formatting.

About Field Group

  • Main Content, Rich Textarea field type, XHTML formatting.
  • Sidebar Content, Rich Textarea field type, XHTML formatting.
  • Footer Blurb, Rich Textarea field type. XHTML formatting.

Work Field Group

  • Work Image, File field type, mapped to an Upload Destination with Image Manipulations for smaller versions.
  • Work Description, Rich Textarea field type, XHTML formatting.
  • Work Client, text field, no formatting.
  • Work Link, text field, no formatting.

File Upload Directories & Image Manipulations
It might be a stretch to consider the organization of uploaded files as part of a Content Model, but since EE’s Image Manipulations need to be defined before content is added (and indeed are involved in creating content) it’s probably best to map out what Upload Destinations we’ll need along with related Image Manipulations.  One thing to consider here is how bullet-proof EE needs to be with regard to uploaded images.  Do you trust yourself (or your users) to upload the correct full-size version, or should we just have EE do that as well?  I’m going to choose the safe route and have EE create all necessary sizes of images for the site. I may need to revisit this as I figure out how the site’s “responsiveness” is implemented, but for now this will do:

Home Page Destination

  • Main Image = 882px by 344px
  • Small Image = 188px by 73 px

Blog Post Destination

  • Main Image: 640px by 250px
  • Footer Image:  54px by 54px

Blog Image Destination

  • Main Image: 640px by 250px
  • Popup Image: 940px wide

Blog Audio Destination

  • No manipulations

Work Image Destination

  • Related Image: 220px wide
  • Gallery Image: 300px wide
  • Main Image: 940 px wide

Category Groups
Our sample portfolio site uses categories in two sections: Blog and Work.  These could possibly all share one Category Group but we’ll split it up into two just for the fun of it:

Blog Category Group
We’ll manufacture some specific categories here when we get to that point.

Work Category Group

  • Print
  • Photography
  • Web
  • Video

Tags?
Just so we don’t overlook it, our design also includes tagging - which will require a 3rd party module to pull off.  Other that noting it here there isn’t much impact to our Content Model as tags are inherently ad-hoc.

Status Groups?
ExpressionEngine has Status Groups that could also be part of a Content Model - for handling such things as Featured Content, or Featured Photos, etc. Our front-end design just didn’t have any aspects to it that I felt would best be served with a custom Status of any sort, so we’ll just use the default Status Group that EE installs with which allows entries to be Open or Closed.

Channels
Remembering our 1 channel == 1 content type rule the list of channels is pretty straightforward.  They will all be assigned to the default Status Group.  They will each be assigned their specific Field Group, the Blog channels will all share the Blog Category Group, and the Work Channel will be assigned the Work Category Group.

  • Home Page Slideshow
  • Blog - Audio
  • Blog - Video
  • Blog - Link
  • Blog - Quote
  • Blog - Post
  • Blog - Image
  • About
  • Work

So There You Have It
So there’s our completed ExpressionEngine Content Model - at least a rough one.  We’ll refine things more as we start implementation by creating a good naming schema, etc. But for now it’s good enough to move forward with.

What’s Next?
In our next installment we’ll begin moving the sample HTML code into EE.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Me

by Me

Date: Wednesday, June 20th, 2012
Comment: #1

This is such a fantastic tutorial series. Have followed everything to the letter so far, can;t wait to get this into some working pages.

Picture of Todd

by Todd

Date: Thursday, June 21st, 2012
Comment: #2

Great post, Mike.  Can’t wait to read the next ones.  I know there are so many ways to do things in EE, which is why I love it.  However, I really appreciate seeing how others dissect things when setting up the back-end, and I always take something away from it.

A question that I was hoping you could touch on a little more, however, is why the different channels for the different blog types?  I see the rationale of “1 channel == 1 content type”, but couldn’t some additional fields be added to one field group (and maybe separated into tabs on the Publish form for clarity) and some categories have been used instead?  Would you then have separate templates for each, or how would you pull the correct data?  I’m not questioning but simply trying to better understand.

Again, great articles!

Picture of Boyink

by Boyink

Date: Thursday, June 21st, 2012
Comment: #3

Hey Todd -

No worries, there is always >1 way to build out a site in EE.

I choose this approach because for me the blog is just a container of different content types. 

The single entry views will likely be different templates.

For the blog index template I’ll know the HTML and fields to pull based on channel.

This way the content is more resusable with being able to build image galleries, video galleries, quote pages, etc without having to run a bunch of conditionals to pull the appropriate content & apply the right HTML.

This approach would also force a client to choose the type of content they are posting rather than assuming they’ll always chose a category - I can set a default category in EE natively but it takes add-ons to make them required.

YMMV but this is the way I’d build it out.

Picture of Todd

by Todd

Date: Thursday, June 21st, 2012
Comment: #4

Thanks Mike.  As you say, forcing a client to choose the type of content they are posting rather than assuming they will do it makes sense.  This is why I like to learn from others. 

Obviously, this adds 5 more options under Publish than having them separate.  I know you’ve used EE a lot more than I have.  What has been your experience with clients when they have a lot of choices/channels when they go to Publish?  I have tried thus far to keep it more simple, thinking that it’s confusing than having more specific choices.  But in reality, it might be confusing them.  :(

Todd

Picture of Boyink

by Boyink

Date: Thursday, June 21st, 2012
Comment: #5

Hasn’t been an issue - in many cases there are few people who see all the Publish options anyway.

Looking at it another way - the site has a given amount of complexity. Clients will somehow need to designate a chunk of content as a certain content type. We can move that complexity around and put it in different places (Publish menu, category menu, drop-down field, etc) but ultimately the choice has to be made somewhere.

Picture of Todd

by Todd

Date: Thursday, June 21st, 2012
Comment: #6

Great - thanks Mike!

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>