Google

Client Login.



Justin Long // ExpressionEngine Expert

3 Approaches to Adding Photos to Entries in ExpressionEngine 2

Written by: Justin Long | On: January 9, 2011

The Contenders

The Custom Fields

For the sake of this tutorial I am creating 5 custom fields:

The first 3 fields just contain information about each of the plugins. The Journal Body field is going to contain the content where we are going to add the tags that will eventually be replaced with our images. The last field is going to be our Matrix field which will contain 5 columns.

The Concept

Each of the plugins work in the same way in regards to their function. The first part of the plugin caches all of the content between the create tag pair and stores it in a session. The second part of the plugin retrieves the cached content from the session and outputs in where you want it in the template.

The Code

The template code for each of the add-ons are very similar and require just a few changes.
NSM Transplant:

{exp:channel:entries channel="blog_examples" limit="3" sort="asc"}
{blog_example_nsm_transplant}
{blog_example_journal_photos}
{exp
:nsm_transplant:content id="photo_{row_count}"}
<img src="{blog_journal_photo_upload}"  style="float: {blog_journal_photo_float}; max-width:{blog_journal_photo_width}px; margin:10px; padding: 10px; margin-bottom: 0px;" />
{/exp:nsm_transplant:content}
{
/blog_example_journal_photos}
{exp
:nsm_transplant:body}
<div class="journal_entry">
<
h2>{title}</h2>
{blog_example_journal_body}
</div>    
{/exp:nsm_transplant:body}
<hr />
{/exp:channel:entries} 

You can see a live example of this template here.
String Plugin:

{exp:channel:entries channel="blog_examples" limit="3" sort="asc"}
{blog_example_sting}
{blog_example_journal_photos}
{exp
:string:set name="photo_{row_count}"}
<img src="{blog_journal_photo_upload}"  style="float: {blog_journal_photo_float}; max-width:{blog_journal_photo_width}px; margin:10px; padding: 10px; margin-bottom: 0px;" />
{/exp:string:set}
{
/blog_example_journal_photos}
{exp
:string:output}
<div class="journal_entry">
<
h2>{title}</h2>
{blog_example_journal_body}
</div>
{/exp:string:output}
<hr />
{/exp:channel:entries} 

You can see a live example of this template here.
MX Jumper:

{exp:channel:entries channel="blog_examples" limit="3" sort="asc"}
{blog_example_mx_jumper}
{blog_example_journal_photos}
{exp
:mx_jumper:put name="photo_{row_count}"}
<img src="{blog_journal_photo_upload}"  style="float: {blog_journal_photo_float}; max-width:{blog_journal_photo_width}px; margin:10px; padding: 10px; margin-bottom: 0px;" />
{/exp:mx_jumper:put}
{
/blog_example_journal_photos}
{exp
:mx_jumper:out_global}
<div class="journal_entry">
<
h2>{title}</h2>
{blog_example_journal_body}
</div>
{/exp:mx_jumper:out_global}
<hr />
{/exp:channel:entries} 

You can see a live example of this template here.
As you can see from the templates above the first part we have the plugin set code within the Matrix loop that we created. This allows us to use the Matrix row_count variable to allow for us to have multiple images without extra code. We have set the name to “photo_{row_count}” which now allows you to insert the photos by simply adding {photo_x} to our textarea when you are publishing an entry. Now to get the actual image replacement we need to wrap the output tags around the custom field of the textarea.

The Comparison

With all the template code done and you can see the results the next question that you need to answer is which one are you going to use on your next project. I did some performance test on the 3 templates that I created for this post to see if a particular add-on was noticeably faster, or used less resources. The difference in execution time from the fastest (NSM Transplant) and the middle (String Plugin) was .0023 seconds, and to the slowest (MX Jumper) was .0419 seconds, which is not really something to be worried about. The support factor down to support, I have been equally impressed with the support from Leevi and the team at eMarketSouth, my questions were answered the same day. I have never personally request support for MX Jumper but I can see on his forums that he is quick to answer and helpful with his responses. That leaves the decision down to cost and personal preference really. I use the String Plugin on my site and can not complain.

**EDIT** Max has updated MX Jumper with some new tags (Append & Prepend) which now bring the functionality up to that of both the String Plugin and Transplant. He has also made some great performance increase. In my recent test MX Jumper is now .0003 seconds faster then the String Plugin.


As always if you have any questions or thought post them in the comments.

Next entry >>> <<< Previous entry

Comments

<<< Go back to entry list