Use ImageSizer to Scale Lightbox Gallery Images in ExpressionEngine

by Jonathan Longnecker

I still remember the day I found the ImageSizer plugin from Lumis. “Holy crap, I can upload any file and this thing will crop it and resize it on the fly in multiple places throughout my whole ExpressionEngine site?” To say I was psyched would be an understatement.

We often use ImageSizer in conjunction with the FF Matrix FieldFrame field type to let users add as many images as they want with captions. Then we pull at the first one and give a link to view the rest in a lightbox gallery. Works great! Until my clients started putting images in themselves.

Oh no! The lightbox is too big for the window.

You see they don’t realize that those pictures they take with their tiny cameras are actually really large files. File size notwithstanding, the pixel dimensions are out of control. Now some lightboxes will scale the image to fit in the visible area, but either way it’s still having to load up images that are way too big for the web.

My first attempt to fix this problem was to put instructions on the field: “900px wide max.” Yeah that worked. I was mostly met with blank stares on that one. And then the question of…”so you’re saying I have to resize all my images before I even upload them? I thought you said this was supposed to be easy.” Ouch. Sometimes we get so wrapped up in the way we use computers we forget that everyone else is still scared of them.

File Upload Instructions

So with the last site I was working on, I was determined to come up with a solution to this. It turned out to be pretty easy, but not without limitations. Let’s start with the original code we would use:

{exp:weblog:entries weblog="weblog_name"}

    {ff_matrix limit="1"}
        {exp:imgsizer:size src="{img}" width="634" height="248" 
        alt="{caption}"}
        <a class="button gallery" rel="gallery" title="{caption}" 
        href="{img}">View Gallery</a>
    {/ff_matrix}

    <div class="hidden">
        {ff_matrix offset="1"}
            <a class="gallery" rel="gallery" href="{img}">{caption}</a>
        {/ff_matrix}
    </div>

{/exp:weblog:entries}

You can see that inside our ff_matrix loop we’re using ImageSizer for the preview image and then linking to it with a button overlay. Then right below we’re offsetting by that first image and creating links to all the other images. By making sure the rel tag is set to the same we get a lovely numbered gallery with just about any lightbox script out there.

We know that ImageSizer will resize and create new images based on your parameters so how do we create a resized image and link to it inside the lightbox? It’s pretty easy, actually. You can create a loop with ImageSizer tags, too. Then you pass variables to anything inside that loop.

For instance, instead of

<a class="button gallery" rel="gallery" title="{caption}" 
href="{img}">View Gallery</a>

We can do this and resize the longest side to 750px. The big difference is that {sized} link instead of linking directly to the source file.

{exp:imgsizer:size src="{img}" auto="750"}
    <a class="button gallery" rel="gallery" title="{caption}" 
    href="{sized}">View Gallery</a>
{/exp:imgsizer:size}

Presto! This image in the lightbox should now load quickly and not be too big for the browser. Here’s the whole code with the new pairs.

{exp:weblog:entries weblog="weblog_name"}

    {ff_matrix limit="1"}
        {exp:imgsizer:size src="{img}" width="634" height="248"}
            <img src="{sized}" width="{width}" height="{height}" 
            alt="{title}"/>
        {/exp:imgsizer:size}

        {exp:imgsizer:size src="{img}" auto="750"}
            <a class="button gallery" rel="gallery" title="{caption}" 
            href="{sized}">View Gallery</a>
        {/exp:imgsizer:size}
    {/ff_matrix}

    <div class="hidden">
        {ff_matrix offset="1"}
            {exp:imgsizer:size src="{img}" auto="750"}
                <a class="gallery" rel="gallery" href="{sized}" 
                title="{caption}">{caption}</a>
            {/exp:imgsizer:size}
        {/ff_matrix}
    </div>

{/exp:weblog:entries}

I did notice that if you try using the single ImageSizer tag and the loop version together right after each other things get screwy. Use all loops or all singles if you don’t want to start pulling your hair out. Also, know that you can’t make the image itself a link as far as I can tell. Then you’d be trying to specify two different sizes at the same time. If anyone has any ideas for that please, share in the comments.

Update: Eagle eyed reader Joshua Clanton came up with a simple way to make the image link work. The key is to start the a tag, but close it after the image. See below:

exp:weblog:entries weblog="weblog_name"}
    {ff_matrix limit="1"}
        {exp:imgsizer:size src="{img}" auto="750"}
            <a class="button gallery" rel="gallery" title="{caption}" 
            href="{sized}">
        {/exp:imgsizer:size}

        {exp:imgsizer:size src="{img}" width="634" height="248"}
            <img src="{sized}" width="{width}" height="{height}" 
            alt="{title}"/>
        {/exp:imgsizer:size}
          </a>
    {/ff_matrix}
{/exp:weblog:entries}

February 12, 2010

Tutorials, ExpressionEngine

Comments

  1. Great writeup! Do you have a live example or a site you’ve used this on, so we can see it in action?

  2. @Jim I will have a live example once this site I’m working on launches. Thanks for reading!

  3. Jonathan, perhaps I’m missing something, but is there any reason you couldn’t do the following to make the image a link?

    {exp:imgsizer:size src=”{img}” auto=“750”}
    <a href=”{sized}”>
    {/exp:imgsizer:size}

      {exp:imgsizer:size src=”{img}” width=“634” height=“248”}
      <img src=”{sized}” width=”{width}” height=”{height}” alt=”{title}”/>
      {/exp:imgsizer:size}

    </a>

  4. Good call Josha; I knew there was something simple I was missing smile. I’ll append the post. Thanks!

  5. Does this have an effect on the site by the user uploading images that maybe around 1mb, or is there no effect becuase of ImageSizer?

  6. @Nathan ImageSizer crops and scales based on the dimensions you give it. So barring a PHP upload limit of 7-8 mb yeah they could upload whatever and ImageSizer will scale it down appropriately.

  7. I use this Article to show my assignment in college.it is useful For me Great Work. Thanks For sharing this Superb article.  Kartikeya Sharma & Robert Vadra

Behold our Amazing Portfolio

Check it Out