ExpressionEngine Relationships and Related Entries

August 9th, 2010 • 10

Update: @onebrightlight was kind enough to point me to YouTubEE which makes embedding YouTube vidoes much simpler, doing away with all the embed code that I had to use in both sets of templates.

Even after you’ve wrapped your head around the way ExpressionEngine works, it still takes a bit of effort to understand the way relationships work. Of course, the first place to start would be to have a look at the Relating Entries bit of documentation which does a fairly good job of explaining them. But if you want to see a real world example of developing a site that makes pretty neat use of related entries, read on.

Instead of rehashing what the documentation explains, I think the best way of learning is always by doing, so we’ll jump into the example right away. Just a note, the code being used is from ExpressionEngine 1.6.9, but it’s pretty simple to covert ExpressionEngine 1 code to ExpressionEngine 2 code. The concept behind relationships and related entries has not changed in ExpressionEngine 2.

The Real World Problem

I recently had the chance to develop the acla:works website, a website for one of the Caribbean’s most renowned architectural firms. Their website contains a number of projects from their portfolio, and in some cases, these projects have YouTube videos that help to better showcase the work that they’ve done, going beyond static images. Just add another field in the Projects field group to capture the YouTube link right?

acla:works project page

The interesting bit is that the client also wanted to have a random YouTube video show up in the sidebar of some sections of the website. If we added YouTube vidoes as a field in each Project’s field group it would be very tedious to show a random image. So the best solution was to have a separate Multimedia channel to hold the YouTube videos alone.
acla:works random video in sidebar

Now we could have done this the long way and created a videos channel with the videos as entries so we could easily show a random one whenever required. And then also create our projects channel and have a custom field for videos so it can show up on each project’s page. But doing it this way would require my client to enter videos twice, and if a video gets updated or changed sometime in the future, they’d have to make that update twice. Not very user-friendly at all.

The Solution – Using ExpressionEngine’s Related Entries

I created one channel that captured only YouTube videos. Next, I created a new channel for the projects and took advantage of ExpressEngine’s freedom and flexibility to assign a field group with over 15 fields so that we could easily capture every bit of information that was needed for each project, but no field for videos. Why? Because I’ll use ExpressionEngine’s related entry functionality to link individual YouTube videos to particular projects.

This way I get to randomly pick an entry from the videos channel to show up in the sidebar quite easily, and when I add a project I can simply select a video as a related entry, effectively saying “this video is related to this entry” and then pull the video on to the project’s page. This way videos only have to be added once while we get the flexibility of showing a random one whenever we want, and we can also include them on the project’s page.

Another useful feature is that this allows us to simply have our client enter the YouTube id of the video and in our templates we can control the size that it gets displayed at automatically from within our templates. For example, random videos are in the sidebar, so they’re small. However, on project pages the videos are much larger (see the screenshots, or better yet, visit the site).

The Details

When creating the custom fields for the Projects channel, add an extra one and in the Type dropdown select Relationship. When you do this you’ll be prompted to select which channel it’s related to. The related channel can be a different channel, or you can relate a channel to itself. In this case we wanted to relate it to the Multimedia channel which houses our YouTube videos.
ExpressionEngine relationships screen

It’s as easy as that! Now when you add a project this field allows you to easily select a related entry from the multimedia channel, which in our case is a related video. Now that it’s all set up all you need to do is build it out. Here’s a look at the code to simply show a random entry and then how to pull in related entries.

Random Videos from the Multimedia Channel

{exp:weblog:entries weblog="multimedia" disable="member_data|pagination|trackbacks|categories|category_fields" limit="1" dynamic="off" orderby="random"}
embed code here
{/exp:weblog:entries}



My template code is being eaten up so I’ve attached it as a txt file here. What we’re simply doing is calling entries, specifying our channel, disabling everything we don’t need for good measure, limiting it to display only one, setting dynamic to off so that the URL won’t be taken into account and finally ordering the entries by random. So that part is taken care of.

Showing the Related YouTube Video when Displaying a Project

Now for the interesting bit – getting the related entry from another channel to show.

{exp:weblog:entries weblog="projects" disable="member_data|pagination|trackbacks|categories|category_fields" limit="1"}
	{title}				

		{related_entries id="project_youtube"}
			{if no_related_entries}
			{/if}
                        {title}
			embed code here
		{/related_entries}	

{/exp:weblog:entries}


Here's the code in full.

The first thing we do is display an entry from the projects channel and then specify the field that's been set to the Relationship type - project_youtube. It's always good practice to check first to see if there is any data in a custom field before we try to display it, and that's what the if no_related_entries conditional does. In most cases it would be good to give the user a message, but for this project it was best to just have nothing display.

The most interesting bit is what happens inside of the related_entries tags - in here you are free to display any of the fields that are in the other channel. So within our projects channel, we're checking for a related entry in the multimedia channel, and if a related entry exists we can show all of the fields in that multimedia channel. Pretty nice right?

In this case all we needed to do was pass the ID of the YouTube video into our embed code which ensures that a larger version of the video shows up on the Project page.

Related Entries are a very useful part of ExpressionEngine and can do some pretty neat things. You can even take it further with Playa by Pixel and Tonic (commercial) which allows you to create multiple relationships.

Further reading on ExpressionEngine's Related Entries

Filed under Development, ExpressionEngine, Tutorial.

Follow me on twitter and subscribe to the RSS feed.

10 Responses to “ExpressionEngine Relationships and Related Entries”

  1. Brendan Underwood August 9th, 2010 at 9:51 pm

    Tony, do you know of any way of retrieving both forward and reverse relationships in one hit (ie. not having to do two queries on related_entries as well as reverse_related_entries)?

    Cheers
    Brendan

  2. Tony Geer August 9th, 2010 at 10:30 pm

    Hey Brendan, I’ve never had the need to do that or seen it done. Is it a performance issue you’re worried about?

  3. Brendan Underwood August 10th, 2010 at 12:11 am

    Not really a performance issue, but say I have a site that has relationships going between many different channels (or types of content such as news, product, services, case studies etc etc), it’s never a simple task to just ask for all the relations to and from an entry and have them listed.

    It was something that I had available to me under another CMS called Plone (based on Zope) where you could just return relationships, and be able to specify whether you wanted to see both forward and reverse.

    A single return, would then allow within the template whether or not a ‘relationship’ block (ie. ) would need to be rendered.

  4. Tony Geer August 10th, 2010 at 12:31 am

    Oh yep, I can see how that would be useful.

  5. Daniel Coats August 10th, 2010 at 12:55 am

    Great article, though after reading it I think I need to get myself a copy of EE to begin with. Just wondering, following your splurge of EE posts and obvious liking of the system, will your website ever be ported or redesigned onto the platform?

  6. Tony Geer August 10th, 2010 at 1:01 am

    Thanks Daniel! I’ll definitely be moving over to EE once I get some free time apart from client projects and a big personal project I’m working on. I cringe every time I need to add a new portfolio item as it’s a mix of templates and WP :(

    I’ll have all three of my personal sites (this one, mojoshowcase and mojolayouts all running on one installation of EE with the Multisite Manager eventually.

  7. RyanDownie August 10th, 2010 at 4:48 am

    Forgive me, as only skimmed the post. Will read it fully later on.

    Could you not have created the channel and added a custom field, and for the sidebar use Randomizer?

  8. Martin Luff August 10th, 2010 at 7:27 am

    Brendan, EE does reverse related entries, or you could try TiedEntries plugin http://devot-ee.com/add-ons/tied-entries/ or if that isn’t sufficient then try ‘Related Entries’ from Solspace http://devot-ee.com/add-ons/related-entries/ or Playa http://devot-ee.com/add-ons/playa/ from Pixel & Tonic…

  9. Tony Geer August 10th, 2010 at 8:04 am

    If I understand you correctly, you mean keeping only the Projects channel, and in the sidebar load up a random project using orderby=”random” and only display the custom field containing the YouTube video?

    If so, that did occur to me, but I forgot to mention in the article that not every Project has a YouTube video so if the project that gets randomly pulled doesn’t have a video, the sidebar would be blank.

    Thinking long term too, if it ever happens that they have 2 videos for a particular project, then we can easily just add Playa and pull in both of those related entries on the Project page, and still easily be able to put a random one from the multimedia channel in the sidebar.

  10. Tony Geer August 10th, 2010 at 8:09 am

    @Martin: Thanks for the heads up on those plugins!

Subscribe to RSS Feed

RSS feed