Google

Client Login.



Justin Long // ExpressionEngine Expert

Channel Images vs Matrix w/ Wygwam

Written by: Justin Long | On: February 27, 2011

A Little Backstory

For a couple of years now (read since EE1) I have been using a Matrix along with either a WYSIWYG field or a textarea field to allow my clients to add photos to their entries with a simple {photo_x} syntax with X being the row number of the Matrix field. My clients have liked it and I liked the flexibility that it gave me as a developer to declare sizes, floats, alt text and what ever else my client might need. Recently I have been working on a client's site that was set up in EE2 by another developer which was using Channel Images. DevDemon just released their latest version 4.0 which offers a new feature for people that are using Wygwam in that a user can now add their Channel Images photos directly to the Wygwam field, and are able to resize them directly in Wygwam. One can not deny that this approach is more user friendly then using a Matrix and having a client add {photo_x} where ever they want the image to appear.

Testing Testing Testing

Whenever there are multiple add-ons that do very similar things I always like to test them and compare them before I make my mind up which ones I am going to use on a production site. A while back I wrote up a blog post about 3 different find and replace add-ons that are available for EE2 and from my testing was able to determine which one I would use for all my clients sites. I am hoping that I will be able to do the same with Channel Images and a Matrix Field for photos.

Custom Fields and Channel

On my testing server I created a new Custom Field Group in which I created 4 new custom fields. In the Matrix field I created 3 columns a file field, a P&T Pill field with widths and a P&T Switch field with float left or right. I then created a new channel and added 3 entries to the channel with 5 photos in each of the Wygwam fields.

Channel Images Template

I then created a template to display the Channel Images fields.

<html>
<
h1>Channel Images in Wygwam</h1>
{exp:channel:entries channel="ci_images" limit="30" sort="asc" disable="categories|category_fields|member_data|pagination"}
This template shows a field created with Wygwam 
and Channel Images 4.0.<br />
<
h2>{title}</h2>
{ci_wygwam}<br />
<
hr />
{/exp:channel:entries}
<h2>Performance Stats</h2>
Total Queries Used{total_queries}<br />
Elapsed Time{elapsed_time}<br />
</
html
Due to the fact that the Channel Images Field is tied into the Wygwam field I only need to put Wygwam field into my template. You can see a live example here.

Matrix Images Template

This template has a little more because I needed to use eMarketSouth's String Plugin to move the Matrix photos into the area where the Wygwam field was being parsed.

<html>
<
h1>Matrix Images in Wygwam</h1>
{exp:channel:entries channel="ci_images" limit="30" sort="asc" disable="categories|category_fields|member_data|pagination"}
This template shows a field created with Wygwam 
and Matrix<br />
<
h2>{title}</h2>
{matrix_photo}
{exp
:string:set name="photo_{row_count}"}
<img src="{matrix_photo_upload}"  style="float: {matrix_photo_float}; max-width:{matrix_photo_width}px; margin:10px; padding: 10px; margin-bottom: 0px;" />
{/exp:string:set}
{
/matrix_photo}
{exp
:string:output}
{matrix_contnet}
<br />
{/exp:string:output}
<hr />
{/exp:channel:entries}
<h2>Performance Stats</h2>
Total Queries Used{total_queries}<br />
Elapsed Time{elapsed_time}<br />
</
html
The first part sets the string name and then when a string name is found in the output the content is replaced. You can see a live example here.

Testing Results

One of the things that I noticed instantly was how many fewer queries the Channel Images approached used over the Matrix approach 28 vs 38 respectively. Even though the memory usage difference was less then 20k bytes and the total execution time was only .02 seconds different in my test.

Pros and Cons

Before I can determine which one I think is right though I need to weigh in the pros and cons of each piece of software.

Matrix Pros

  • Flexibility - You can add as many custom attributes as you need
  • Use for more then just images

Matrix Cons

  • Slightly more server intensive
  • Requires an additional add-on to work
  • No batch uploads
  • Manually have to add {photo_x} to the entry

Channel Images Pros

  • Bulk Uploads
  • Progress Bar
  • Watermarking
  • Images are stored in folders linked to the entry ID
  • Image processing (filters, cropping)

Channel Images Cons

  • Can only be used for images
  • Multiple clicks to float images

Conclusions

Let me start off by saying both are great pieces of software and both developers offer fantastic quick support, Channel Images is $45 where Matrix is $55. At this point in time with Channel Images in its early stages of Wygwam integration there is only one thing stopping me from using it for my clients. As of the current release (4.0) the only way to allow for a user to declare a float is for the user to click on the Channel Images button in Wygwam, select the image and size and hit ok. After the image is added they then need to click on the image and then click on the default Wygwam image button where they can declare the float and then click okay for the second time. If they do not do that the image will be consider inline and you will have some huge whitespace issues. The video below showcases the problem at hand.

Download Video: "If you can not view above"

So until DevDemon fixes this (it's brand new so I know that they will) I will continue to use Matrix for my photo galleries even though the interface is much slicker with Channel Images.

**EDIT**A few people have pointed out to me on Twitter that Wygwam has a built in File Browser and Uploader. First I must say this was news to me, I don't know how I missed it but sure enough it is there. Even with Wygwam's built in file browser I don't know if I would feel comfortable turning that over to a client. One of the things that I like about the Matrix and the Channel Images that I can control the max size of the images being added to the entry. I can also limit the client to only see options or parameters that they I want them to see. For example I do not want my client to be able to add a class or an id to the image nor do I want them to be able to add a border. So when it comes down to to I don't think that I would want my client to be able to use Wygwam's built in file manager.

Do you think I made the right choice? As always if you have any questions or comments post them in the comments section below.

Next entry >>> <<< Previous entry

Comments

<<< Go back to entry list