gallery with large images - 1300 pixels

JWebb

Hi, I´m new to zen after more than a decade of using Gallery 2 & Gallery 3.

I have installed zen, however all the themes I have tried seem to be designed to display relatively small images, perhaps 600 pixels wide.

I want to have a gallery which displays large images 1300x867 pixels. I realise one can show the image on its own but I want these large images to be displayed with a next button so viewers can flick through images at their own speed. Plus I want the links to homepage etc to be displayed with each of the big images.

With the default basic theme my images are aligned with the left side in the middle of my screen ( when viewed with a high res screen )

http://www.webbaviation.co.uk/zen/England/Norfolk/Thurne_Windmill_Norfolk_jc18286.jpg

The background containing the next buttons, links and text is all scrunched into the middle of the screen.

What I want it to look like is this:-

http://www.webbaviation.co.uk/gallery/v/wales/anglesey/menaibridge/MenaiBridge-ic33026.jpg.html

Can I achieve that with zen? If so any pointers as to how? I have looked through lots of themes and showcase galleries but seen nothing like what I am trying to achieve.

The album pages are similarly affected. I want to display rows containing 5 300 pixel wide images but instead the most I get are 2 rows of 290 pixels or just a single row of 300 pixel wide images.

Its as if zen is designed for screens with 800 x 600 resolution but I am trying to optimise for a screen of 1920 x 1200

Any help much appreciated.

fretzl

Anything is possible and if you can't find a theme that suits your needs you can create one yourself.

You will have to be familiar with HTML and CSS and have a basic understanding of PHP.

Start with reading the theming tutorial.
http://www.zenphoto.org/news/theming-tutorial

JWebb

Thanks, I will do some reading. If its possible then I'm sure I will figure it out in the end. Coding is not my thing but I have muddled through before.

acrylian

Its as if zen is designed for screens with 800 x 600 resolution but I am trying to optimise for a screen of 1920 x 1200

Zenphoto is not designed for any size itself. All included themes are a bit dated and scheduled to be replaced by new ones in the future. However nowdays a theme should never be designed for any specfic resolution because of the growing mobile usage. A site build today should be responsive, which new future themes will be.

JWebb

For the benefit of anyone following this thread I have found a way of making 1300 pixel image look right with just one small change.

I made a copy of the basic theme with my own name on it.

The relevant change was in the "styles " folder where there was a css file for each option. Im using the dark colour scheme so the change was in "dark.css"

I opened this in wordpad. On the first line at the top was the code "width: 685px;" which I changed to 1600. I then saved it all, uploaded my new theme, adjusted the settings and activated it.

I now have a 1300 pixel image looking ok on the page-

http://www.webbaviation.co.uk/zen/England/Norfolk/Waxham_Church_jc17871.jpg

It looks fine on my 1920 pixel screen and on my ipad. No doubt it will be terrible on old monitors but I am planning for the future.

I will no doubt tinker with other things. My next major step is to get the album thumbnails to display in rows of 5 300 pixel images as currently they seem to be limited to two rows of 295 pixels. The page looks right so no doubt there is some sort of table width setting which I am now hunting for.

fretzl

My next major step is to get the album thumbnails to display in rows of 5 300 pixel images as currently they seem to be limited to two rows of 295 pixels.

Not really a major step ;-)
In the theme's options you can set `Thumb size`, `thumbnails per row` and `thumbnails per page`.
You only have to figure out which `Thumb size` is appropriate for your 1600px total width because the thumbs have margins and paddings.
And change the width of `.album` in `dark.css`.

JWebb

Thanks for that tip, that saved a lot of time.

I found the relevant bit about half way into dark.css -

/* Image Thumbnails
------------------------------ */
#images {
float: left;
width: 650px;

Changing the 650 to 1700 produced the desired result. Having already set the theme options to 5 in a row it now works and I have a row of 5 290 pixel width thumbnails which is just want I wanted. )

fretzl

And now you'd like to know how to get the same height for all thumbnails ? ;-)

JWebb

Go on, please tell ... I could of course figure it out myself .... after about 6 months of studying css and php )

fretzl

Note that the only way to get the same size is to either distort the images or to crop them. We will crop them, in height only.

In `index.php`: line 37
change
`<?php printAlbumThumbImage(getAnnotatedAlbumTitle()); ?>`
to
`<?php printCustomAlbumThumbImage(getAnnotatedAlbumTitle(), NULL, 290, NULL, 290, 175); ?>`

and do the same in `album.php`: line 40

Here the first "290" is the width.
The second "290" is the "cropwidth" (this means that the width is not cropped)
And "175" is the "cropheight".
Of course change the numbers as you like.

See also the functions documentation.
http://www.zenphoto.org/documentation/functions/_template-functions.php.html#functionprintCustomAlbumThumbImage

JWebb

mmmm interesting. I have had a tinker with it and also tried some of the examples from the documentation. So far the changes have only produced an effect in the master albm where all my thunbs are the same size anyway. In the sub album I my portrait style thumb is still screwing things up.

My gallery is ordered

Country / master album > region / sub album > full large images.

Im out of time now but will have a further tinker with it tomorrow.

So far everything is going OK and I like Zen, its cool )

fretzl

Ah yes. Was only looking at album thumbnails.

To also get all image thumbnails the same size change line 57 in `album.php`

from

`<?php printImageThumb(getAnnotatedImageTitle()); ?>`

to

`<?php printCustomSizedImage(getAnnotatedImageTitle(), NULL, 290, NULL, 290, 175, NULL, NULL, NULL, NULL, true); ?>`

JWebb

Cool, that works perfectly . Now all my albumb thumnails are the same which is much neater )

http://www.webbaviation.co.uk/zen/England/Norfolk/

Thanks )