Libratus home slideshow image scaling

IanWorthington

I'm working with setting up woth the Libratus theme at http://ianw.biz/ithaka/

Most things seem to be pretty straightforward but I can't understand how the scaling of the slideshow images on the homepage is meant to work:

The main gallery contains images with widths in the range 1000~2700 pixels but they appeared to be being scaled up on the masthead and looked, well, none too good...

So I added a second gallery of images with widths around 9000 pixels and set the slideshow to come from there and they appear just as bad.

What do I need to do to get a good quality image display there please?

i

acrylian

I am not that familiar with the theme. But somehow on your site it does not look like it should. Here is another site using it: http://ralf-kerkhoff.de

fretzl

I see you applied the 50%vh hack.
`
#ss-wrap {
height: 50vh;
}
`
Apparently that is not the right solution.
I can see the background image on the far bottom of the site which means the background is scaled/cropped to fill the entire browser window.

You'll have to fiddle a bit with the CSS again to get that right.

Apart from that, try to create images with aspect ratios that approximately reflect the final display size.
The background images are ruthlessly scaled/cropped to fill the available space via CSS.

IanWorthington

Ah, I see what you mean. Looks like that if the browser window is deeper than the sum of the heights of the children of #container minus #sswrap then the #sswrap reappears at the bottom to fill the space. Something else needs to expand to take up the space rather than being fixed height.

As regards the image it seems, iiuc, that the theme calls for a 1200 pixel wide scaled image:

$html = '<img src="' . html_encode(pathurlencode($image->getCustomImage(1200,null,null,null,null,null,null,true))) . '" alt="' . html_encode($image->getTitle()) . '" />';

which the CSS will then have to scale up for larger window widths.

I'm thinking it might be better if it got a greater width image for the CSS to scale (or crop?) to fit.

Thoughts welcome!

i

acrylian

More exactly the image function calls an image with 1200px either width or height, longest or shortest side depending on options > theme -> image size. Default is longest side so height or widht depending of orientation.

You can also use bigger images but normalle Zenphoto does not upscale smaller images unless you change teh default option and bigger images especially on front page means more data to load. Don't know what slider that is but hopefully it does not preload all images at once, too.

fretzl

For "best" quality I would suggest you prepare images like I said above and edit the code to process them equally.
Say you have made images 2000px wide, then change the variable in the code from 1200 to 2000.