Filmstrip image display bordering using fixed height thumbnails

[Cornetto]

Hello Operators,
1. Link to website with coppermine installation
http://www.ianscottphoto.com/mercury

2. Screenshot attached

3. Background information
Coppermine Version 1.5.26
Theme is a simple colored variant of "Eyeball", but this issue occurs across themes: curve, eyeball, classic, etc. (themes with horizontal filmstrips)

4. Explanation of issue:
We would like to have our images in the filmstrip have a 10px border around them and the images displayed on the filmstrip evenly, so that our "landscape style" images fit in neatly and predictably alongside our "portrait style" images.

5. Additional information
We use only two types of images, a "landscape style" image in which the original size is 1350px width and 900px height, and a "portrait style" image in which the original size is 600px width and 900px height.

Our current configuration settings are:
In "Image View": the "Number of items in filmstrip" is set to "5"
In "Thumbnail Settings": the "Use dimension" is set to "Height"
In "Thumbnail Settings": the "Max dimension of thumbnail" is set to "120px"

After an exhaustive search of the forum, I was able to find information that allowed us to set all of the images in the filmstrip to display within a 180px width cell, however this is not the solution to our issue, as our "portrait style" images display large (black) borders between any "portrait style" images as they display next to "landscape style" images in the filmstrip.
The setting to display all of the images in the thumbnail to a static width was to set the "thumb width" setting to "180" in line 3178 of the file "functions.inc.php" in the folder "Includes".

Could anyone enlighten me as to how to get the images in the filmstrip to have a set value border and for them to display next to each other in the filmstrip without the large border on our "portrait style" images?  Thanks in advance, looking forward to guidance from those in the know.

[Cornetto]

Apologies for the messed up section of my original post:

After an exhaustive search of the forum, I was able to find information that allowed us to set all of the images in the filmstrip to display within a 180px width cell, however this is not the solution to our issue, as our "portrait style" images display large (black) borders between any "portrait style" images as they display next to "landscape style" images in the filmstrip.
The setting to display all of the images in the thumbnailFILMSTRIP to a static width was to set the "thumb width" setting to "180" in line 3178 of the file "functions.inc.php" in the folder "Includes".

Please note that the unmodified code had the "thumb width" set to "120", but this caused the images in the filmstrip to overlap, where the landscape style images did not fully display and were overlapped by the portrait style images.

Code Select Expand

function display_film_strip($album, $cat, $pos,$ajax_call)
{
    global $CONFIG, $LINEBREAK;
    global $lang_date, $lang_display_thumbnails, $lang_byte_units, $lang_common, $pic_count,$ajax_call,$pos;

    $superCage = Inspekt::makeSuperCage();

    $max_item    = $CONFIG['max_film_strip_items'];
$CONFIG['thumb_width'] = '120';
    $thumb_width = $CONFIG['thumb_width'];

We changed the "thumb_width" setting to 180, as referenced in
http://forum.coppermine-gallery.net/index.php/topic,76163.msg367684.html#msg367684
but this change causes the portrait style images in the filmstrip to have large (black) borders while the landscape style images do not have the large borders.

Not sure if this additional information helps, still looking for assistance in getting our filmstrip to display landscapes with a 10px border next to portraits with a 10px border in the filmstrip.

[Αndré]

To display the film strip as you like, please undo your modification (actually, it doesn't matter, but you don't need it anymore). Instead, copy the block $template_film_strip from themes/sample/theme.php to your theme's theme.php file, if it doesn't exist.

Then, find

Code Select Expand

style="{ONE_WIDTH}
and remove it completely.

Now the pictures should have the same space to each other. If this is how you want it to look, we still need to adjust the dynamically loaded film strip images (i.e. apply a similar mod to js/displayimage.js).

[Cornetto]

Andre,
[praise]You are indeed a master of coppermine and your ability to readily understand the description of our issue (and apply your knowledge and skill to correcting it) is amazing.[/praise]

If this is how you want it to look

Yes! This is how we want it to look, thank you so much!

we still need to adjust the dynamically loaded film strip images (i.e. apply a similar mod to js/displayimage.js).

I don't know how to do this, can you provide me with the details of how please?

[Αndré]

I've currently no access to a testbed, so I cannot test the change, but this should work as expected.

Open js/displayimage.js and remove all 4 occurrences of

Code Select Expand

style="width: '+width+'px; float: left"

[Cornetto]

Yes, the change works as expected, the dynamically loaded images work very well, thank you.
Now for the last missing piece of our puzzle, how to set the horizontal space in between the images in the filmstrip to a uniform size? (10 px)
So that the "displayed" filmstrip images have the same uniform 10px space between them and the dynamically loaded images will also?

[Αndré]

Depending on your theme's other CSS settings, add something like this to your theme's style.css file:

Code Select Expand

.strip_image {
    padding: 0 5px;
}

This code adds a padding of 5px left and right of each film strip thumbnail. E.g. this results in more than 10px in the curve them, as other elements already adds some space.

[Cornetto]

EUREKA!
You have solved the last piece of our puzzle, thank you ever so much!

"The mystery is solv-ed"
     -Inspector Clouseau  (The Pink Panther)

Now marking this topic as "TOPIC SOLVED"

[Mate Matic]

This was helpful. Thanks André.