AutoIndex thumbnails's grid size

jcvallot · 2015-04-13 18:46:08

Hi, I'm struggling as I mentioned in a different post with the size of my thumbnails in the grid of my galleries page... whatever the support I use monitor screen, Ipad, Smartphone...

1 - How could I give those thumbnails a maximum size ? I don't want them to fill up the available space, I want them of a fixed size, separated by a fixed interval and displayed in 3 centered. columns..

Here is what I can achieve in LR :

Here is what I would like to be able to design in LR and get on the web:

lightroom-expected-display

2 - How could I prevent my images to be truncated (by an abusive zoom)

like the two first thumbnails on this capture of my Ipad screen :

The same happens if you look at my project on a wider screen. http://dominikskunca.fr/projet/galleries.php

(If it doesn't show as I say, try refreshing the page because it depends on the size of the original image...)

3 - Finally how could it be possible to keep my thumbnails rectangular and avoid them becoming squares when displayed on a smartphone like this:

Thank you for your advise.

rod barbee · 2015-04-13 22:01:03

You're using the Iconic layout, which is designed to fill the container with the image. Any thumbnails it uses will, by design, fill the container.
http://ce4.theturninggate.net/docs/doku … uts#iconic
You won't see this happening in Lightroom unless you set the thumbnail output size large enough to fill the container. (I suspect this is a limitation of Lighttroom and the way the web module interprets some css)

When the image fills (covers) the container this means that unless the thumbnail is sized at the same aspect ratio as the container, some of the image will be cropped.

For the layout you want, your best option is probably to create custom thumbnails in Photoshop (which is what's recommended with the Iconic layout) with the needed white space around the image.

----

The square thumbnails in mobile galleries are also by design. This takes the most advantage of limited screen space.
There was a question about this on the forum some time ago, you could try searching for it. But I believe the "fix" is with custom css:

.ce4-standard .griditem {
    background-size: contain !important;
}

The problem will then be that the thumbnails, will be pretty small since the long edge of the thumbnail is limited to the width or height of the container.

jcvallot · 2015-04-14 01:27:48

Thank you Rod, I appreciate your availability ;>)

I perfectly understand that what I complain of, is the default behavior of this plugin. It's a pity Matt didn't developed a try-version. I wouldn't have bought it probably had I had the opportunity to test it...
Now that I can't be refunded, I must find a "fix" as you say...
I think that JimR post (http://community.theturninggate.net/top … -like-ce3/ shows that there is some sort of a work around with custom css. I would be very happy to achieve a Galleries page of that sort. I enabled Phplugins but I'm totally inexperienced with php language. So I need precise instruction to try to alter the default behavior the way he did. Your reply to gosselin109 is unfortunately of no help to me.
I found the custon css (http://reekes.net/phplugins/css/custom.css) and also the"scaffolding css" Matt referred to in the post (http://reekes.net/publisher/templates_a … ng.min.css)
But I'm unable to identify which part of them I should use... nor how to copy them in my text editor (I use Scite).
Have you some spare time to take me by the hand and teach me how to master this css alteration ?
Best regards.

rod barbee · 2015-04-14 06:34:13

You can get pretty close to what you want by creating custom thumbnails.

Actually, the page Jim is posting about is this one: http://stage.reekes.net/photos/99models/
and the css is here: http://stage.reekes.net//ttg-be/phplugi … sindex.css .

I'd have to take a look at his css and figure it out from there. Unfortunately, I've got other things that I really need to get done so can't really justify taking the time to look into it right now.

But Jim had mentioned something about writing up what he did. You could ask him about it.

jcvallot · 2015-04-14 06:50:55

Thanks Rod. I'll try to contact him...

Matthew · 2015-04-14 14:23:21

Even having to make customizations to achieve your desired layout, the plugins give you a solid starting place. They're built not only to be robust, but also to be easy to modify.

For CE4 Gallery, you can stop the squares easily enough:

@media only screen and (max-width: 700px) {
    .ce4-standard .griditem {
        background-size: contain !important;
        }
    }

For CE4 Auto Index, you can export thumbnail images at whatever your desired size, then set in custom CSS:

.album-image {
    background-size: auto;
    }

Community @ The Turning Gate

#1 2015-04-13 18:46:08

AutoIndex thumbnails's grid size

#2 2015-04-13 22:01:03

Re: AutoIndex thumbnails's grid size

#3 2015-04-14 01:27:48

Re: AutoIndex thumbnails's grid size

#4 2015-04-14 06:34:13

Re: AutoIndex thumbnails's grid size

#5 2015-04-14 06:50:55

Re: AutoIndex thumbnails's grid size

#6 2015-04-14 14:23:21

Re: AutoIndex thumbnails's grid size

Board footer