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"}
{if 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.
7:01 pm
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
7:37 pm
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.
7:52 pm
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!
10:10 pm
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?
11:11 pm
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.
7:19 pm
@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?
8:07 pm
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
8:36 pm
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.
3:45 pm
@ 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?
6:32 pm
@Sunny: Thanks! Yeah, enlarging the featured image wasn’t requested in the contract, but it would be easy to implement.
5:28 pm
I really like it Darren! I told you so! A Mimbolicious real estate theme will rule the community! ;-)
6:23 pm
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
11:24 pm
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
8:14 pm
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!
7:22 pm
Great Work!
2:11 pm
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!
11:52 am
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
11:51 am
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??
3:36 pm
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. ;-)
10:44 pm
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.
10:03 am
Can’t wait for part III, Google map integration!
Thanks for the tutorials!
10:54 am
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
7:39 pm
Yep – ‘thumbnails’ is just the field name.