• Registered: 2013-02-28
  • Posts: 116

Topic: gallery overide spacing

I use wider than standard dimension photos in a gallery on my homepage. Because of this the spacing from the pictures to where the body copy is appears too great. I am having a difficult time finding a solution where I can move the text up higher and still have the image appear properly at varying resolutions. For example, I tried moving it higher and it worked great at several different monitor resolutions, but was unusable on a smart phone display.

I really want to maintain this picture proportion.. can you help guide me to a usable workaround?

  • Registered: 2013-02-28
  • Posts: 116

Re: gallery overide spacing

Sorry, here is the url so you can see what I am trying to describe www.djphoto.com

  • Registered: 2012-12-16
  • Posts: 950

Re: gallery overide spacing

It's always going to be difficult to display a gallery of landscape-style images in both landscape and portrait-style viewports without any space surrounding the gallery in either, especially when Showkase has been designed to have the gallery fill the remainder of the page below the header.
Ordinarily, on small screen devices, Juicebox would display the Splash Page and, when the gallery is expanded to fill the viewport, the images are displayed as large as possible given the space available.
However, you've set showSplashPage="NEVER" so your gallery is displayed in your embedding page (rather than on its own expanded page).
In such a scenario, a compromise might be the easiest solution. Try to find an 'External fit px' value that works for mobile devices and does not result in too much space surrounding your images on desktop monitors (although perhaps a little more than you currently have).

The ideal solution would be to have your gallery's height be determined by the viewport width and the aspect ratio of your images.
However, this is not a regular scenario and it would not be easy to implement, especially within Showkase which has its own gallery sizing routine and any manual intervention might cause problems.
If you tried to modify the Showkase source, then the modification would apply to all galleries within your site (which, I guess, would not be what you want) and it would be very difficult to do.
If you edited just a single gallery's 'index.html' page, then the modification would be overwritten each time you republish your Showkase site.

You might like to take a look at these two Juicebox forum posts which deal with having a gallery height change depending on the image size and aspect ratio. They might point you in the right direction.
https://juicebox.net/forum/viewtopic.php?pid=7014#p7014
https://juicebox.net/forum/viewtopic.php?pid=9392#p9392

However, it would really not be easy to implement such a solution into Showkase and I'd recommend trying to find a compromise via the Showkase interface if at all possible, either by using a different value for 'External fix px' (one that is 'good' for both desktop and mobile devices rather than one that is 'great' for desktop but 'poor' for mobile devices) or perhaps by allowing the Splash Page to be used for mobile devices (by setting showSplashPage="AUTO").

  • Registered: 2013-02-28
  • Posts: 116

Re: gallery overide spacing

Thanks Steven! You are correct, I only want to change how the gallery looks on the homepage. I have only changed the Showkase setting on the homepage to accommodate these images and they are all horizontal. I did go to "override site options" on the home page and adjusted the "External Fit px". This works okay on mobile devices, but just not crazy about having quite so much space on desktop monitors.

I think I originally changed the "Show Splash Page to NEVER" because it eliminated problems I was having when the page was scrolled. Prior to this when it was on "Auto" the picture was cropped square when the phone was held vertically. When the phone was held horizontally, the picture changed sizes as the page was scrolled up and down.

I'm not understanding what other setting you may be suggesting for this scenario with the Splash Page for mobile devices? Currently I have the "External Fit px" set to -240. Also, would decreasing the logo height be helpful at all?

  • Registered: 2012-12-16
  • Posts: 950

Re: gallery overide spacing

Prior to this when it was on "Auto" the picture was cropped square when the phone was held vertically.

By default, the Splash Page uses the first image in the gallery and the image is scaled to fill (rather than fit within) the Splash Page and, as such, cropping may occur.
You can select a different image to use for your gallery's Splash Page (it does not even need to be a gallery image) via the splashImageUrl configuration option. You could perhaps use an image that is representative of your gallery as a whole and is more tolerant towards cropping when it is displayed in different viewport shapes.
(You could upload an image for your Splash Page to your Showkase 'Library' and then use its URL for the splashImageUrl.)

When the phone was held horizontally, the picture changed sizes as the page was scrolled up and down.

This sounds like it might be due to Showkase dynamically resizing the Splash Page image when the viewport size changes. (As you scroll up and down (in Mobile Safari on iOS at least), the browser toolbars can appear and disappear, resulting in a different viewport height. Showkase will adjust the gallery height when the viewport height changes (just like when a desktop browser window is resized).

I'm not understanding what other setting you may be suggesting for this scenario with the Splash Page for mobile devices?

I was really just suggesting that you might set showSplashPage="AUTO". You could then configure your Splash Page using the available Splash Page options.
The Splash Page itself will still be sized the same as the gallery (when no Splash Page is used) so you'll still have the same problem as before (space above and below in certain viewport shapes) but only with a single Splash Page image. (The gallery itself will be displayed on a page of its own when expanded from the Splash Page.) Maybe with a smaller 'External fit px' value (such as '-100', for example), the spacing on desktop monitors would be acceptable and you could find a suitable image for your Splash Page which would look OK on mobile devices until the gallery is expanded.

Currently I have the "External Fit px" set to -240. Also, would decreasing the logo height be helpful at all?

I'm not sure that this would help. The height of your logo does not change the height of the gallery. A logo with a large height will just push a gallery down the page (and this can be compensated for via the 'External fit px' option).

I think that using an 'External fit px' of around '-100', setting showSplashPage="AUTO" and choosing a suitable image for your Splash Page (one that will not suffer too much when dynamically cropped to fit various different viewport shapes) might be your best course of action.
With an an 'External fit px' of '-100', the space surrounding your gallery in desktop monitors should not be excessive and it should hopefully be a low enough value for a usable Splash Page on mobile devices.