13 - Using a Plethora of Plugins to Make Content Management Easier
In this chapter 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 administrators to enter and maintain.
In Chapter 2 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 and all the necessary content is in place, we just need to re-code that embedded template to now pull content from the 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 an embedded template will shine.
Template Requirements
The Latest Products sidebar element has a small thumbnail and a blurb of text for each product shown. 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 Products Field Group - one for a smaller thumbnail and another for a short description. Those fields could then be used in the embeds/latest_products template.
Workable, but that approach would increase the content required for each entry. You would also have to train a content administrator 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 EE, 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:
We’ll also be using a relatively new plugin that I noted recently in the EE forums - the Image Sizer published by ExpressionEngine user Lumis.
The Image Sizer plugin does have some server-side requirements - make sure to read them and see that your environment will support it.
Installing Plugins Using the Plugin Manager
There are two basic ways to install plugins - using the EE Plugin Manager and not using the Plugin Manager.
Since the first two plugins 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 in the right column when you browse to the Plugin Manager at CP Home > Admin > Utilities > Plugin Manager. 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 Sizer plugin using the second 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.
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 its title in the Plugin Manager. 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.
Template Version 1
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.
We’re going to be working with the embeds/latest_products template.
First-up - the template with no plugins, using our existing content.
Here’s the code - the exp:weblog:entries tag will stay the same through all of these examples and is pretty straightforward. Limiting to 3 will get us the last three products entered, all unnecessary data is disabled for performance, and the dynamic=“off” will ensure the last three products will appear no matter what page this code is rendered on.
<h3>Latest Products</h3>
<div class="lcontent">
{exp:weblog:entries weblog="products" limit="3" disable="categories|pagination|trackbacks|member_data" dynamic="off"}
<p>
<a href="{url_title_path=products/detail}"><img src="{product_thumbnail}"/></a>
<strong>{title}: </strong>{product_description}
<a href="{url_title_path= products/detail }">more >></a>
</p>
{/exp:weblog:entries}
</div>
Version 1 Results
Load the rendered template to view your results. Usable? Yes - but, not as nice as the original template and a bit long for my taste.
Template Version 2
OK - let’s tackle that thumbnail size first. Here’s the embeds/latest_products 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:
<h3>Latest Products</h3>
<div class="lcontent">
{exp:weblog:entries weblog="products" limit="3" disable="categories|pagination|trackbacks|member_data" dynamic="off"}
<p>
<a href="{url_title_path= products/detail}">{exp:imgsizer:size src="{product_thumbnail}" height="54" alt="{title}"}</a>
<strong>{title}: </strong>{product_description}
<a href="{url_title_path= products/detail}">more >></a>
</p>
{/exp:weblog:entries}
</div>
Version 2 Results
The rendered result of version 2 looks better, but our text spacing is still off. 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.
Template Version 3
So let’s use the HTML Strip plug-in to remove the p tags from the product_description field for round three:
<h3>Latest Products</h3>
<div class="lcontent">
{exp:weblog:entries weblog="products" limit="3" disable="categories|pagination|trackbacks|member_data" dynamic="off"}
<p>
<a href="{url_title_path= products/detail}">{exp:imgsizer:size src="{product_thumbnail}" height="54" alt="{title}"}</a>
<strong>{title}: </strong>{exp:html_strip}{product_description}{/exp:html_strip}
<a href="{url_title_path= products/detail}">more >></a>
</p>
{/exp:weblog:entries}
</div>
Version 3 Results
If you load the template again you’ll see that it’s much better - no nested p tags are coming out now. But some of those descriptions are long for that space. Let’s use the Word Limiter plugin to truncate those down.
Template Version 4
Here’s version 4 (V4) of the template code - note that you can nest plugins for the desired results:
<h3>Latest Products</h3>
<div class="lcontent">
{exp:weblog:entries weblog="products" limit="3" disable="categories|pagination|trackbacks|member_data" dynamic="off"}
<p>
<a href="{url_title_path=products/detail}">{exp:imgsizer:size src="{product_thumbnail}" height="54" alt="{title}"}</a>
<strong>{title}: </strong>{exp:word_limit total="15"}{exp:html_strip}{product_description}{/exp:html_strip}{/exp:word_limit}
<a href="{url_title_path=products/detail}">more >></a>
</p>
{/exp:weblog:entries}
</div>
Version 4 Results
And the result? Looking at my working example you can see it has correct thumbnails, one paragraph per product, and truncated descriptions—all without additional content fields to maintain. All of this within an embedded template so any changes are instantly reflected across your entire site.
Definitely cool.
Note: The imgsizer plugin is third-party - if you’ve installed it and coded it per my instructions here and it doesn’t work, please either contact the plugin author or post in the related support thread on ExpressionEngine.com. Alternatively you can just create an additional custom field to hold resized versions of your images rather than using the plugin.
Category Navigation
Previous Comments
by Mike Boyink (Author)
Date: Friday, November 28th, 2008
Comment: #2
Hi Victor:
Thanks for the comment. The img sizer plugin is a third party piece with some specific server requirements. If you’ve installed and coded it per my example here and it doesn’t work, I’ll have to point you to the author or the support thread on the EE forums.
Alternatively you can just create an additional custom field to hold the thumbnails.
by Gaurav
Date: Friday, December 12th, 2008
Comment: #3
In my case also nothing shows uo Not even a “X” to specify no image. And what exactly are the server requirements for this plugin?
Date: Friday, March 20th, 2009
Comment: #4
First of all, this is a great tutorial! It helps me a lot bringing my website completely to EE. Thanks!
Now for the Imagesizer plugin:
I noticed that it just adds a height and width attritbute to the img tag, right? Wouldn’t it be much easier to hard code a CSS class to that img tag and control height and width of the thumbnails via CSS?
by Mike Boyink (Author)
Date: Monday, March 23rd, 2009
Comment: #5
Hey - looks like I missed a few comments in an email move so I apologize for that.
What’s nice about the image sizer plugin is that it actually resizes the image and caches it. And you an use it in a bunch of different places without having to go add CSS declarations each time.
The CSS approach might work - but for me it’s not easier.
by Hogan Lee
Date: Wednesday, April 15th, 2009
Comment: #6
Hi there,
Being a newcomer to EE, I just want to start off by saying a big thank you for such a great series of tutorials. This Building a Small Business Site tutorial is exactly what’s missing from the EE docs.
I was reading some of the comments, and I just wanted to share that I was also having trouble getting the thumbnail images to show up using the imgsizer plugin. Since I’m doing this tutorial in a local environment, I don’t really need to “upload” anything. Instead of using the upload option, I simply needed to drag the product thumbnail image into a directory (that I created) called products within the images directory. I then manually entered the image file path in the product_thumbnail field like so:
{site_url}images/products/product_thumb.jpg
If you use the upload button and choose the URL Only option, it will automatically enter this into the product_thumbnail field:
{filedir_2}product_thumb.jpg
The number after filedir_ might differ depending on how many different upload directories you have created.
I tested it out and found that only the filedir_2 path will work properly with the imgsizer plugin. So I just changed all my product_thumbnail fields to use the filedir_2 variable and things worked perfectly.
I hope that helps anyone who might be having similar troubles.
Thanks again, Mike!
by Mike Boyink (Author)
Date: Wednesday, April 15th, 2009
Comment: #7
Thanks for the input Hogan—glad you’re finding the content useful.
by (JavaScript must be enabled to view this email address)
Date: Friday, June 19th, 2009
Comment: #8
I have installed all the plugins you have mentioned here but I am confused as I am running Core and did not think I could install them on Core. They are all showing up fine in my Plugin Manager and EE is saying that I have 7 plugins installed including all the ones featured in this tutorial. Now, the page does not seem to work when I implement your code and does return an error, so does that mean EE has not installed the plugins and just saying it has… not really sure what the norm is here I was just wondering if you could give me a heads up with this.
by (JavaScript must be enabled to view this email address)
Date: Friday, June 19th, 2009
Comment: #10
the error line is repeated 3 times at top of the page and is the following:
Warning: mkdir() [function.mkdir]: Permission denied in /var/www/vhosts/designmarks.co.uk/httpdocs/ee/balloon/plugins/pi.imgsizer.php on line 205
Don’t know if it means anything to you.
by Mike Boyink (Author)
Date: Friday, June 19th, 2009
Comment: #11
The image sizer needs to create cached version of the images - so make sure your image directories have a cache directory under them with a 777 permission.
by (JavaScript must be enabled to view this email address)
Date: Friday, June 19th, 2009
Comment: #12
My images are in the EE default images folder… images/uploads. When I click get info on these folders using my FTP program it says ‘UNIX equivalent 777’. Is this what you mean. Also in the ‘uploads’ folder there is a folder called ‘cache’. This also has a ‘UNIX equivalent 777’ when I click the get info button using my FTP. Sorry I’m a bit lost. Does any of that make any sense or have any relevance to the problem?
by Mike Boyink (Author)
Date: Friday, June 19th, 2009
Comment: #13
Yes—it still sounds like the plugin isn’t able to create the directory it wants to.
I’ve had a number if folks have trouble with this plugin—so at this point either need to refer you to the author of it, or can tell you how to implement the page without it.
by (JavaScript must be enabled to view this email address)
Date: Friday, June 19th, 2009
Comment: #14
I see… thanks well I guess I will just have to leave this step out of the tutorial for now and perhaps try and get in touch with the author… Thanks for you help.
by Victor
Date: Thursday, November 27th, 2008
Comment: #1
Hi, and thanks! Great Book!
I’m new in EE world and i start reading some blogs and following this book.
I have installed the Image Sizer V 2.1.2 in my example site, but the tag
{exp:imgsizer:size src=”{product_thumbnail}” height=“54” alt=”{title}”}
don’t work, this tag does not display anything.
Here is my code of lastests_products template:
<h3>Latest Products</h3>
<div class=“lcontent”>
{exp:weblog:entries weblog=“products” limit=“3” disable=“categories|pagination|trackbacks|member_data” dynamic=“off”}
[url=”{url_title_path=products/detail}”]
{exp:imgsizer:size class=“category_image” src=”{product_thumbnail}” height=“50” width=“50” alt=”{title}” title=”{title}”} [/url]
{title}: {exp:word_limit total=“15”}{exp:html_strip}{product_description}{/exp:html_strip}{/exp:word_limit}
more >>
{/exp:weblog:entries}
</div>
In advance, thank you very much.