In this chapter of the Building an ExpressionEngine Site series, we will develop the right-column listing of “Latest Products”.  This is a spot where using a couple plugins will help negate the need for additional content fields for site admins to enter and maintain.

OK - so way back in Chapter 2 of this series we created an embedded template for the right-column listing of “Latest Products”, and it’s just been sitting there with static placeholder content in it.  Now that we have our Products section implemented all the necessary content is in place, we just need to re-coded that embedded template to now pull content from the “bees_products” weblog dynamically.  Once it’s working, the product content will immediately appear on all of our content pages because all of them have that template embedded—definitely one of those moments where using a embedded templates will shine.

Template Requirements
So let’s take a look at what’s going on in that Latest Products section (view the site from Chapter 12).  For each product there is a small thumbnail and a blurb of text.  Well, cool - we have both of those already in the Products weblog as product_thumbnail and product_description fields.

Hold on though. 

Our thumbnails are all currently 150px by 112px - quite a bit larger than the 59px x 54px thumbnails currently specified in the Latest Products code.  And - our descriptions are quite a bit longer than we really want in this right-column space as well.

What to do?

One option would be to create two additional fields in the “bees_products” custom field group - one for a smaller thumbnail and another for a short description.  Those fields could then be used in the Latest Products embedded template.

Workable, but that approach would increase the content required for each entry.  You would also have to train a content admin to know what fields show where on the site, and rely on them to create the thumbnails in each size correctly.  Overall - not an elegant solution - especially when the necessary content is already in ExpressionEngine, just not quite formatted to our liking.

The second option?

Plugins to the Rescue
Yes - it’s a good spot to use some plugins to extend the functionality of “out of the box” ExpressionEngine.  If you haven’t yet browsed the EE Plugin Library now is a good time to do so.  For our purposes today we’ll need two plugins from the library:

• Word Limiter
• HTML Strip

We’ll also be using a relatively new plugin that I noted recently in the EE forums - the Image Resizer published by user Lumis (Lumis I’ll gladly credit you by proper name if you want...).

Installing Plugins using the Plugin Manager
There are two basic ways to install plugins - using the Plugin Manager, and not using the Plugin Manager. 

Since the first two plugs we need are available in the EE library, you should be able to install them via the manager.  Note: This assumes you have entered your EE license number in the Control Panel under: CP Home > Admin > System Preferences > General Configuration.  If the license has not been entered, the list of available plugins will not appear when you browse to the Plugin Manager at CP Home > Admin > Utilities > Plugin Manager will not appear in the right column. To proceed you can either enter your license number, or install all three plugins via the second method using FTP.

OK - if the Plugin Manager shows (and neither the HTML Strip or Word Limit plugin is already installed), simply browse the list of available plugins until you find both of these and click the “Install” link.  The plugin should install and then appear under the left-column list of installed plugins.

Installing Plugins without the Plugin Manager
Regardless of how you installed the first two plugins, you’ll need to install the Image Resizer plugin using the approach because it’s not—as of this writing - offered via the EE plugin library.  To install this plugin:

• Visit the author’s site and download the plugin.
• Unzip the archive file to extract the plugin file
• Using FTP, upload the plugin file to your site.  It needs to go in the plugins folder, which is located in your EE system directory.
• The new plugin should now show in the installed list on the Plugin Manager page in your Control Panel

Using Plugins
OK, now what?

By installing plugins, you now have some additional tags you can use in your templates.  You can usually get details of the plugins-specific tags and parameters by clicking it’s title in the Plugin Manager page.  I’ll let you explore the different parameters of these specific plugins on your own, and just show you how I’ve used them here.

Working up the Template
OK - we could just jump to the finished product, but let’s take this in steps so can see the logic of using the plugins.

First-up - the template with no plugins, using our existing content.

Here’s the code - the weblog:entries tag will stay the same through all of these examples and is pretty straightforward. Limiting to 3 will get us the last 3 products entered, all unnecessary data is disabled for performance, and the dynamic="off" will ensure the last 3 products will appear no matter what page this code is rendered on.

And here’s the result.  It’s usable, but not as nice as the original template styling:

OK - let’s tackle that thumbnail size first.  Here’s the code modified to use the image sizer plugin.  You can see I’ve specified a fixed height of 54px, and the plugin will resize the image to the correct width dynamically:

And here’s the result.  Our images look better, but our text spacing is still off:

If you do a view/source and look at the rendered code, you’ll see that our main culprit is paragraph tags.  The product_description field is set to be formatted as XHTML - so that returns one set of P tags.  The template is also providing P tags - wanting to wrap each product’s image and text in one paragraph.  So let’s use the HTML Strip plug-in to remove the P tags from the product description field for round three:

And here’s the result:

Much better - no nested P tags coming out now.  But - some of those descriptions are long for that space. Let’s use the the word_limit plugin to truncate those down.  Here’s the new code - note that you can nest plugins for the desired results:

And the result?  Here’s the rendered site: Chapter 13 Site.  Correct thumbails, one paragraph per product, and truncated descriptions all without addtional content fields to maintain.  All within an embedded template so any changes are instantly reflected across your entire site.  Definitely cool.

Just for good measure, here is the text version of the final latest products embedded template: chapter_13_latest_products.txt.

Next up?  Starting the Services section.

Back to Chapter 12.
On to Chapter 14.