need fixed sized thumbs (like CE3)

JimR · 2015-01-02 02:03:55

How can I prevent the icon/thumbs from getting larger on smaller screens?

CE3 had thumbs of a fixed size, but CE4 no longer supports this.

What I want is for the thumbs to have a fixed size, or at least pin them to a max size. When I look at this demo page, it's how I would like Auto-Index to behave:

http://ce4.theturninggate.net/demos/01- … ry-iconic/

I want four columns of fixed sized thumbnails. If the window gets too small for all four columns, then just remove columns to make it fit without increasing the thumbs to fit the screen's width. This is how it worked in CE3.

I have one page that is an index into nearly 70 galleries (and it will continue to grow).

http://reekes.net/photos/99models

With CE4 and an phone this page becomes 70 full sized screens of images to navigate!

How are we to design such a page in CE4, without asking the user to swipe across the screen 70 times to find a gallery?

PS - I'm willing to hack the CSS if I have to. It doesn't look like an easy change, as this new responsive behavior looks deeply embedded into CE4.

Last edited by JimR (2015-01-02 02:05:26)

rod barbee · 2015-01-02 02:22:38

the page you're referencing is a gallery, not an autoindex.

to get what you want, you'll probably need to use custom thumbnails. With the Iconic layout, I believe the image background size is set to fit. So if you have a mixture of verticals and horizontals you'll end up with some cells that aren't completely filled. That's why custom thumbs are advised.
http://ce4.theturninggate.net/docs/doku … uts#iconic
also see a comment from Matt on thumbs in the iconic layout: http://community.theturninggate.net/post/25548/#p25548

JimR · 2015-01-02 09:32:23

the page you're referencing is a gallery, not an autoindex.

Which one of the two are your referring to?

I know the demo page I'm referring to is a Gallery page. I referenced it because it's doing what I would like, and Auto Index cannot do that (or at least I don't see how it could).

I referenced my page, which was built by CE3 Auto Index, because it also works that way I want. But CE4 no longer supports a fixed layout (or at least I don't see how it could).

to get what you want, you'll probably need to use custom thumbnails

I don't think the issue has anything to do with the size of the thumbnails. The "problem" is that the responsive layout will aways change the size of the thumbnail to fit the width of the screen. On a phone this means you'll end up with just one column, and then each icon is enlarged to fill the screen.

My 70 icons on a desktop are four columns wide and small thumbs. But on the phone it becomes just one column, and large icons. This because a real pain for the user to get to one of the galleries, since each icon is one full screen. So getting to the last gallery means 70 swipes!

According to the docs (the page you cited)...

In the CE4, the iconic layout is responsive. The thumbnails will maintain their aspect ratio at all screen sizes, and the number of columns will adjust itself according to the size of the browser or device.

What I guess I'm asking for is how to turn off the responsive behavior, and get back the fixed size icons we had in CE3 Auto Index.

If that's not possible, then how do we manage large sets of galleries in CE4? This wasn't an issue in CE3.

JimR · 2015-01-02 09:51:22

Here's what I'm seeing...

This is the window at 993 pixels and larger. The icons are the "right" size (or at least the size I'd like them to be).

Making the window just one pixel narrower to 992, it now looks like this. Note how the icons are huge (not the nice small size I prefer).

Lastly, here's what happens when the screen is the size of the iPhone. Note that the small icons are no longer in columns, but have grown to fill the screen.

If I only had less than half a dozen galleries I guess this is OK. It's not what I would prefer, but I could live with it.

The real problem is I have nearly 100 galleries as a collection for all the models I've worked with. The way Auto Index is working (as shown above) is a real problem. I can't expect people to swipe across their phones nearly 100 times to find their gallery.

What I'm looking for is how CE3 Auto Index worked. I could fix the size of the icons so they wouldn't fill the screen. Instead it would fit as many of the icons it could in columns. I used to get three icons across the phone, plus partially see the next row. Scanning nearly 100 galleries was easy and obvious.

The way Auto Index is work now, with the responsive behavior, makes it limited to just a few galleries on small screens.

If there's no way to fix the size of the icons in CE4 Auto Index, is there some other way to build what I had in CE3? You can see it at this page: reekes.net/photos/99models/

Matthew · 2015-01-02 10:09:46

The auto index uses the responsive grid framework for layout, and makes use of the special case "step_down" class, which implements the two-column intermediary layout between the standard grid and the mobile full-width.

You can probably effect the change you're asking for by rewriting the .step_down class' CSS. This is located in scaffolding.css. The file is minified in exported galleries, but you can get at the unminified (human-readable) version in the plugin, /lib/resources/css/scaffolding.css. You can then write your overrides into custom.css for use via PHPlugins.

Just examine the properties related to the .step_down class; you'll probably want to change the 50% rule for mid-range screen sizes, and then nullify the 100% on smaller screens.

JimR · 2015-01-02 10:42:28

Matthew wrote:

You can probably effect the change you're asking for by rewriting the .step_down class' CSS.

Yikes - sounds like a lot of work.

Is what I'm asking for possible in Pages, or does it have the same responsive only behavior?

What I want is a fixed grid of icons for the Auto Index, just like CE3.

Last edited by JimR (2015-01-02 10:43:22)

rod barbee · 2015-01-02 10:46:20

the Galleries page in pages is basically the same as Autoindex. Same layouts, etc.

JimR · 2015-01-05 09:12:33

This was easier than I thought. Just a few CSS over rides and got what I wanted.

I even added a conditional check in my PHP Plugin to determine if I was loading the Main page or the large Models collection. Both are Auto Index pages, but I wanted them to have slightly different styles. So the check in PHP Plugins let me load a different custom CSS file.

I still have some fine tuning to do before finally pulling the switch and migrating everything from CE3 to CE4.

If you're interested in seeing my mods to Auto Index, look here:

stage.reekes.net/photos

stage.reekes.net/photos/99models

rod barbee · 2015-01-05 10:02:35

very nice! That's a lot of work. It really paid off, the site looks great.

Matthew · 2015-01-05 14:53:49

Glad to see you were able to get the design you wanted using the suggested modifications. Things are looking good.

JimR · 2015-01-06 01:35:36

If there's an interest, I'll document the changes I made.

It's still responsive. I adjusted the number of columns to keep the thumbs from enlarging on different screen sizes.

It turned out to be much easier than I feared. Only a few CSS overrides were needed, mainly to the % width attribute (just as Matthew suggested).

rod barbee · 2015-01-06 02:56:42

I think that would be an interesting read, and much appreciated!

divinemayhemstudios · 2015-01-30 08:11:12

I would be interested in seeing how you did it as well.

gosselin109 · 2015-01-31 02:14:02

Also interested how you did it as I struggle for doing a portrait ratio auto-index as I did with CE3 http://cyrichard.com/galleries/2peintures/ (I should have modified some icons but I like the general aspect).

A portrait ratio really does't work well with CE4. By the way, any reasons having only 4 icons wide?

I also vote for the return of the Masonry layout ;-)

Michel,

rod barbee · 2015-01-31 05:01:19

if you take a look at Jim's page source, look at the end of the <head> section for the link to his custom css. It's all pretty much laid out there.

gosselin109 · 2015-02-02 07:04:48

OK, I found css file. There was 2 css files and Jim did a "php if sentence" to chose between 2 different styles of auto-index.
I would also need to do a "if sentence" to only apply my modified index to a sub-index and let the main gallery intact.
could you tell me how to do that with php? probably base on a folder name?

thanks in advance.

Michel,

rod barbee · 2015-02-02 07:57:48

See this post for examples of using conditional statements to send certain custom css to certain pages
http://community.theturninggate.net/top … -solution/

The last part is probably most relevant

jcvallot · 2015-04-03 22:05:50

Hi every body; This is one of the many issues I'm confronted to with TTG Gallery... From my point of view what JimR has achieved should be the default behavior of at least the Galleries and Gallery pages set up.
MATT, couldn't it be possible to rewrite this part of the program to achieve this behavior and meanwhile provide on request for those concerned the modified css that we could copy in the right place to save us a lot of trouble.
I know nothing about PHP but I can manage to "copy and paste" one or several files...;>)

Matthew · 2015-04-04 00:04:49

Many things could be possible, I suppose ... but it's unlikely at this point that I'm going to rewrite the plugin, as it's pretty well established at present.

jcvallot · 2015-04-04 15:25:01

I need then help to achieve that "step_down" and "if sentence" stuff... I've been carefully through Gaufde's post recommanded by rod barbe, but it doesn't help...
I'll open a new topic if I can't find one dealing with this sort of code writing...

Community @ The Turning Gate

#1 2015-01-02 02:03:55

need fixed sized thumbs (like CE3)

#2 2015-01-02 02:22:38

Re: need fixed sized thumbs (like CE3)

#3 2015-01-02 09:32:23

Re: need fixed sized thumbs (like CE3)

#4 2015-01-02 09:51:22

Re: need fixed sized thumbs (like CE3)

#5 2015-01-02 10:09:46

Re: need fixed sized thumbs (like CE3)

#6 2015-01-02 10:42:28

Re: need fixed sized thumbs (like CE3)

#7 2015-01-02 10:46:20

Re: need fixed sized thumbs (like CE3)

#8 2015-01-05 09:12:33

Re: need fixed sized thumbs (like CE3)

#9 2015-01-05 10:02:35

Re: need fixed sized thumbs (like CE3)

#10 2015-01-05 14:53:49

Re: need fixed sized thumbs (like CE3)

#11 2015-01-06 01:35:36

Re: need fixed sized thumbs (like CE3)

#12 2015-01-06 02:56:42

Re: need fixed sized thumbs (like CE3)

#13 2015-01-30 08:11:12

Re: need fixed sized thumbs (like CE3)

#14 2015-01-31 02:14:02

Re: need fixed sized thumbs (like CE3)

#15 2015-01-31 05:01:19

Re: need fixed sized thumbs (like CE3)

#16 2015-02-02 07:04:48

Re: need fixed sized thumbs (like CE3)

#17 2015-02-02 07:57:48

Re: need fixed sized thumbs (like CE3)

#18 2015-04-03 22:05:50

Re: need fixed sized thumbs (like CE3)

#19 2015-04-04 00:04:49

Re: need fixed sized thumbs (like CE3)

#20 2015-04-04 15:25:01

Re: need fixed sized thumbs (like CE3)

Board footer