Bluefire Blog

What if you had a background image and you wanted the images in your gallery to align to a “frame” (for example a TV screen) in the background? (see article #1 about that)  This is particularly tricky if you don’t want that locationto be “centered” in the gallery as it does by default.  This can be done in a Photoshop Lightroom  Flash gallery, though I will warn you that it is a bit complex, and will take a fair amount of trial and error work to figure out.   You would also need to make your own image renditions and edit the “group.xml” file (which I’ll discuss in a future article).  This is only really worth it to someone who REALLY wants to achieve this effect and is willing to work through it.  For everyone else, this might be an interesting read just so you have a basic understanding of the XML related to the image canvas.

To make this work just right, you’d first need to define a fixed size for your gallery, and then insert a background image (see tip#1 and #3).  And you probably want to use the “Slideshow Only” layout.  The image position (and related settings) might look like the following in your style.xml file:

<mediaPosition y="0.00" positionType="auto" fitAtStart="true" videoScale="upDown" imageScale="fitToScreen" x="0.00" height="264.00" width="360.00"/>

If you changed it to have a fixed image canvas position, you’d end up with something like this:

<mediaPosition y="50.00" positionType="fixed" fitAtStart="true" videoScale="upDown" imageScale="downOnly" x="50.00" height="100.00" width="200.00"/>

This has created an “image canvas” area that is of a fixed size and in a fixed position, wherein the images will appear.

Lets break that down:
Y=”50.00” means place the upper left corner of the “image canvas” 50 pixels from the left edge of the gallery

X=”50.00” means place the upper left corner of the “image canvas” 50 pixels from the top edge of the gallery

height=”100.00” means make the “image canvas” 100 pixels tall

width=”200.00” means make the “image canvas” 200 pixels wide

positionType=”fixed” - this tells the gallery to use the position and size parameters instead of ignoring them and automatically centering the image canvas and scaling it to fit the available space in a given window.

fitAtStart=”true” - I’m not going to explain this here (it is related to the image scaling approach used in Element’s galleries).  You scan leave it “true”

imageScale=”DownOnly” – this will scale the image down to fit the image canvas  if necessary (it is better to have only one image rendition in each  “item” node of your group.xml file and make sure it is the appropriate size.)

videoScale=”upDown” – you can ignore this, it sets the scaling behavior of video clips (.flv files) – the other possible value is “DownOnly”.