The Soulpass Project

Thanks to the team at WPG2 (Wordpress Gallery2), it is now relatively easy for us to fully integrate Gallery2 into WordPress. I like to use the default Matrix theme (and this tutorial is designed for it), but there is a feature of this theme that can create problems with a fixed-width layout. This can potentially affect any integrated setup, not just WordPress. By default, if you go to single-image view, it gives the user the option of displaying the image at different sizes. You can change the default 640×480 initial size, but that’s not the main issue of this tutorial. Just in case you aren’t sure how to do that, though, these steps are for you:

1. Login.
2. Go to Edit Album -> Album.
3. In that area, you should see a section called “Resized Images.” Change the first target width row to the maximum width that will fit in your layout. Make sure that the row is “Active.” Also be sure that all of the other sizes are blank.
4. In the “Recreate thumbnails and resizes” section, select “Recreate resized images.”
5. Save the changes.

My understanding is that you’ll have to repeat this process for all sub-albums. As far as I know Gallery2 has no provision for applying the changes to all albums below the parent album. So, click on each album to open it, and then repeat the process from step 2. UPDATE: It looks like that feature has been added since this post was first written.

Even after this change, another problem persists. This brings us to the main point of this tutorial. When viewing a single image, a user has the option of viewing the image full-size. The problem is that the full-sized image is displayed inline with the layout. So, if the width of the image is larger than the width of your layout, the image will extend beyond the intended bounds of your layout.

I checked the Gallery forums to see if there were any solutions to this problem. There weren’t, so I started a new thread. Here is the first reply:

mindless writes: siriux theme shows the resize and a link to download the full size. PGtheme (documentation/user contributions) has an option for showing full size in a separate window. you can learn from these examples and modify matrix to behave however you like

This is one way the solution can be implemented:

Navigate to the directory of your Gallery2 theme. Go to the templates directory of your theme (in my case /gallery/ themes/ matrix/ templates/), and create a new subdirectory in there called local. This ensures that we don’t overwrite the original template files. Gallery will use files in this directory before it looks in the main templates directory. Anyway, copy the photo.tpl file from the main templates directory into your new local directory.

In the new copy of photo.tpl (in the local directory), delete line 38:
{g->block type="core.PhotoSizes" class="giInfo"}

Replace it with the following code (taken from the Siriux theme):

                <a href="{g->url arg1="view=core:DownloadItem" arg2="itemId=`$theme.item.id`"}">
                  {if $theme.sourceImage.mimeType != $theme.item.mimeType}
                    {g->text text="Download %s in original format" arg1=$theme.sourceImage.itemTypeName.1}
                  {else}
                    {g->text text="Download %s" arg1=$theme.sourceImage.itemTypeName.1}
                  {/if}
                  {if !empty($theme.sourceImage.width)}
                    {g->text text="(%dx%d)" arg1=$theme.sourceImage.width arg2=$theme.sourceImage.height}
                  {/if}
                </a>

Or, if you want the image to open in a new window (compliant with XHTML 1.0 Strict), you can use this code:

                <a href="{g->url arg1="view=core:DownloadItem" arg2="itemId=`$theme.item.id`"}" onclick="window.open(this.href); return false;">
                  {if $theme.sourceImage.mimeType != $theme.item.mimeType}
                    {g->text text="Download %s in original format" arg1=$theme.sourceImage.itemTypeName.1}
                  {else}
                    {g->text text="Download %s" arg1=$theme.sourceImage.itemTypeName.1}
                  {/if}
                  {if !empty($theme.sourceImage.width)}
                    {g->text text="(%dx%d)" arg1=$theme.sourceImage.width arg2=$theme.sourceImage.height}
                  {/if}
                </a>

If you copy and paste that code as it is, the proper indenting should be preserved. That’s why the spaces are there.

I hope this helps someone. As always, if it does, it would be great to hear from you. If it doesn’t, it would also be great to hear from you so we can work out why it’s not working.

This entry was posted on Tuesday, January 24th, 2006 at 3:36 pm and is filed under Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.