Symphony.

Is there a way to work with Symphony's inbuilt image manipulation and use the same image for more that one instance on the page.

I want the client to choose and upload one image. I would like them not to have to think to hard about this and so be able to upload variable sized images.

In the galleries I would like to have a thumbnail version (with a fixed width of 150px) and a larger sized version (with a fixed width of 480px). If I use the image manipulation routine is there a way I can use one original image and have two different images on the same page output by the function? It would require either storing or renaming (so that the path is different). TIA

Fred,

This should be easy to do. You'll just need to truncate the URL of the image from your file upload datasource in order to fit into the image function scheme (can't recall exactly what needs to be done there,if anything - you might need to use XSL's string functions), then assemble two different url requests through the resizing function, one with the 150px width and another with the 480px width. Keep in mind that Symphony will cache both versions, but that is only a file space concern, it will be done automatically.

I tend to gloss over things so if you have more specific questions please post.

Have a look here for discussion of the resizing.

Andrew Thanks for pointing me to that thread and I found this http://archive.overture21.com/wiki/templating-system/development-tools/image-manipulation-function/ as well.

I can continue building my jquery script to hide and show the images, knowing I will be able to build the said images in Symphony later this week :-)

Fred, the image handler will make light work of this!

Just get your client to upload the larger version of the image, and the image thumbnailer will rescale down to whatever size you require. The resizer has various "modes"; the most relevant one to you is MODERESIZECROP (mode number 2) which first resizes the image down to fit the new desired size, then crops edges off so it fits.

When using this mode you can specify a number 1-9 of where this crop should occur. 1 is top left, 2 is top-middle, 3 top-right, and so on until 9 is bottom right. I tend to use 5 (the centre) almost exclusively.

So if an entry for your gallery consists of, say an image field labelled Image and a text field labelled Caption, create a data source to output all of your entries. Your XSLT could look like this:

<ul>
    <xsl:for-each select="gallery/entry">
        <li>
            <a href="/image/2/480/300/5{image/@path}{image/filename}">
                <img src="/image/2/150/100/5{image/@path}{image/filename}" alt="{caption}" />
            </a>
        </li>
    </xsl:for-each>
</ul>

This will create a list of thumbnails at 150x100, each linked to a larger version at 480x300. These images are created once (the first time they are requested) and will be stored in the manifest/cache folder. Further requests for the image will retrieve the cached thumbnails rather than recreating them again.

Thanks Nick, I can use that bit of xsl to build the elements I have in mind. At the moment, I am working with jquery to have have a routine to replace the smaller image with the larger. When I start to Symphonize the site the images will be dynamically built, instead of hand rolled.