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.

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.

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}