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.

  • Rich

    Looking Good. I’m loving this series.

    Have you noticed that on the carousel, it allows you to click once more (an moves the thumbs a very small amount to the left) before the arrow becomes inactive?

    I also noticed that there is no scripting collision between timthumb and cabel’s fancyzoom in Safari, where there was one with orderedlist’s version. Also, my collision was on wordpress. I wonder who the culprit is.

    Anyway, I’m looking forward to part 3.

    Rich

  • Darren

    Have you noticed that on the carousel, it allows you to click once more (an moves the thumbs a very small amount to the left) before the arrow becomes inactive?

    Yep, I think it’s the difference of a couple pixels that’s forcing the scroll. I’ll be making small tweaks here and there as the client continues organizing his content.

    Re: FancyZoom, I’m not sure the difference caused between OrderedList and Cabel’s. I don’t think the choice of CMS should be affecting it. Let me know if you spot anything in the code.

  • http://www.unfinitydesign.com/ Nathan Kleyn

    Once again, brilliant tutorial Darren! I was going to give you a heads up on the extra click, but Rich beat me to it above.

    A more major issue, if you double click any image before the animation is finished (whilst loading the image to display), the script goes into a freak out attack. You might need to add a bool switch in there upon the users first click, just to make sure the extra click won’t work.

    Nice design though! Clean, crisp, and easy to follow, a lot more than I can say for other home building websites these days!

  • Darren

    A more major issue, if you double click any image before the animation is finished (whilst loading the image to display), the script goes into a freak out attack

    Hmm, none of the images should be double-clicked and I can’t recreate the issue of clicking an arrow, then clicking a thumbnail fast enough while still animating. Is that what you meant?

  • Rich

    This is sort of unrelated but is there a way to accomplish what the ‘The “File” Extension’ plugin does for EE in wordpress…In the sense that I would like to display a list of, say, images as thumbnails via custom fields, but I do not want to predefine the number. I.E., the user can upload 3, or 5, or 10 depending on the situation via custom fields, and these thumbnails will float alongside each other.

    This is an easy fix when you predetermine the number of thumbs.
    If there are four, you just create custom fields: thmb1, thmb2, thmb3, thmb4, and it works like butter.

    But, say, for a portfolio, some projects may have 3 worthwhile thumbs, another might have 5, and so on.

    This has been vexing me for some time.

    Thanks.

  • Pingback: Creating Custom Listings with Expression Engine, Part II : thegameoflove()

  • Darren

    @rich: if I’m hearing you right, WP’s native image-upload function already allows multiple uploads, plus the new [gallery] feature allows you to insert them all pretty cleanly — is that what you meant?

  • Rich

    I’m not sure if we are talking about the same thing or not.

    I understand how to add multiple images to a typical post, and I can see how the [gallery] feature works. But in a non-typical post, like a portfolio page, where you wanted thumbnails of different portfolio images to be displayed (as few or as many as the user would like), how would that be set up, and how would the user upload the images and cal them to the portfolio page? I guess I am just confused.

    Like I was saying, I understand how you could use custom fields to display thumbnails if you knew that the user would always have the same number on each portfolio page–I would use the custom fields: pic1, pic2, pic3 and then style them accordingly. But I don’t understand how to set this up if portfolio pages don’t always have the same number of thumbnails.

    Am I making sense, or does this just sound like gibberish?

    Rich

  • Darren

    You could always have a separate post category called “Portfolio” and each post would contain a name, description and series of thumbnails (handled by custom fields), something like this.

  • http://www.wppro.org/ Sunny

    @ Darren

    Looks nice and works even better. The main image displayed in the listing (above the carousel) can not be clicked and enlarged, that is by design I am guessing?

  • Darren

    @Sunny: Thanks! Yeah, enlarging the featured image wasn’t requested in the contract, but it would be easy to implement.

  • Pingback: Weekly Link Round-Up #52 | Trevor Davis()

  • Pingback: Wordpress Blog Services - ExpressionEngine Developer’s Toolbox()

  • http://spanskafastigheter.se/ swedish blonde

    I really like it Darren! I told you so! A Mimbolicious real estate theme will rule the community! ;-)

  • Pingback: ExpressionEngine Developer’s Toolbox | Web Burning Blog()

  • Pingback: Avatars in Blog Comment Design | Vandelay Website Design()

  • http://www.vivianfoate.com Mike Foate

    Darren,
    Looking forward to part three! (Do you have an eta on part three? ;-) ) I will be working my way through parts one and two this week! Thank you so much for this and for you kind email to me.
    Mike

  • Pingback: Avatars in Blog Comment Design()

  • http://www.pricelessweddings.com.au Decapper

    Its alot to take in. But I like your style. This series is one to keep an eye on.. Thanks mate for keep us in the loop

  • Don

    Darren,

    Wonderful stuff! I’m anxiously awaiting part III, mostly because of the Google mapping integration! I’ve done it myself with EE but I’m always curious to how others have done it — usually much better than anything I’ve done. :)

    Keep up the great work!

  • http://www.abramovitch-gruppe.de/unternehmensberatung-russland.html Unternehmensberatung ist Russland

    Great Work!

  • http://www.creativesoapbox.com Ktrain

    This is fantastic. I searched for the best way to get thumbnails going for our ee sites for clients. I have the instructions, now if only I could get it working.

    I am eagerly awaiting part 3. Thanks!

    • http://www.blackknave.com BEN SHRIMPTON

      did you get it working, i’d love to know how? i can make it work with PATHS to images, but not with EE TAGS for images in custom fields

  • http://www.blackknave.com BEN SHRIMPTON

    I have been using both TIMTHUMB and PHPTHUMB in EE, but cannot get either to resize an image when it is pulled from a custom field with an EE TAG, for example, I can resize images when I specify a path to the images folder, but when placing the EE tag inside the code instead of the path, nothing happens and in PHP THUMB i get a GIF saying “image does not exist”.

    How do I get TIMTHUMB/PHP THUMB to recognize this custom field as an image and do some resizing??

  • http://www.mindwarpentertainment.com Octavio Corral

    I’ve also been waiting for part 3! I’m sure you’re very busy, but just curious if it’s still on the way. ;-)

  • http://christian-singlesonline.com RP

    Really great tutorial. I’ve just started using EE and was looking for a site like this that really breaks it down. Especially regarding the plugins.

  • lena

    Can’t wait for part III, Google map integration!

    Thanks for the tutorials!

  • http://www.newvibes.com KJ

    I’ve got a potentially stupid question, but is the {thumbnails} tag in The Template Code section a native EE tag, or is that the name of the file field? I can’t seem to get it to work with my images field which is called ‘images’.

    Hope you can help.
    KJ

    • Darren

      Yep – ‘thumbnails’ is just the field name.