Creating Custom Listings with Expression Engine, Part II

In Part I of the tutorial, we learned how to use Expression Engine’s control panel to set up a custom field group which powers our “Homes” listings. The live working example looks like this:

With most of the control panel options already set, let’s install the various image components.

The “File” Extension

Mark Huot’s excellent “File” plugin must be installed first. It allows us to upload and manage images in conjunction with our custom fields. When that’s done, go to Admin › Section Administration › File Upload Preferences and set your preferences:

TimThumb

This thumbnail resize script was developed awhile back for Mimbo Pro and has been used a lot since. TimThumb will take every image we upload with EE and resize them according to height/width parameters we specify in our template. For this project, let’s drop it in our root /scripts/ folder.

The Featured Photo

Each listing will feature one large static photo, specified by the client. This custom field was already created in Part I. Simply go to Publish › Homes and upload your image. Further down, we’ll see how to call it in the template.

The Carousel

First, set up Jan Sorgalla’s jCarousel script and get it working with some sample images. I use this script a lot and have pared down the CSS to make it briefer and easier.

Once you’ve got the styling and positioning how you want, go to Publish › Homes and begin uploading photos:

Because we’ve checked “multiple uploads” in the preferences, EE will generate as many “Browse” fields as you need.

The Zoom Effect

Each thumbnail in the carousel will also use Cabel Sasser’s Fancy Zoom script to display a larger size. Download the files and link them in your <head>, per the instructions.

The Template Code

Now that the components are set up and the images uploaded, we can add some code to the left column of our “Homes” template that will tie it all together:

{exp:weblog:entries weblog="homes"}
{title}
{if thumbnails}
    {thumbnails}
  • {title}
  • {/thumbnails}
{/if} {/exp:weblog:entries}

You’ll notice the exp:weblog:entries tag behaves similarly WordPress’s Loop. Here, it begins by querying entries from the weblog we created in Part I. Accordingly, it inserts our featured photo, applies TimThumb, then generates a list of the thumbnails for the carousel, if they exist.

Despite the complexities happening on the page, you’ll notice the actual template code is relatively clean and readable. For more details, see EE’s docs page.

Next Time…

In Part III, we’ll learn how to create relationships, pagination, Google Map integration, and tie the whole page together.