Masonry Layout Ipad Issue

netisfred · 2015-10-08 19:41:20

Hello Everybody,

I have an issue with the gallery module of ttg-CE4. With the thumbnail grid on Ipad.
With the Freewall Masonry layout (rigid or elastic), it is perfect on desktop web browser, same on Iphone (the icons change to square, so great ! and the composition is ok) but :

On Ipad, the thumbnails don't resize like the desktop version... They keep a "square cell" and don't "assemble" themselves like the desktop version. It makes the look crazy with empty spaces everywhere, depending of the ratio of the images. (I don't have background color around the thumbnails)

And my idea was not to make the Ipad's thumbnails square like iphone version (changing for that the mobile breakpoint I think...?).

I have seen the result working with another site on Ipad (I don't know if it use TTG, but it use something like the freewall for sure), so, is there a way to make the thumbnails on Ipad works like the desktop version ?

Thank you !

rod barbee · 2015-10-08 20:43:53

Can you provide a link to a gallery?

Also, Gallery will always use the Standard layout rather than Masonry on mobile devices:
http://ce4.theturninggate.net/docs/doku … e_freewall

netisfred · 2015-10-08 20:44:45

Could I send you this by mail or MP ?

rod barbee · 2015-10-08 20:51:02

Sure, butvsee the edit I made to my reply above. The standard layout, rather than Masonry, will be used in mobile devices.

netisfred · 2015-10-08 20:55:45

Ah ok I was afraid of that..
So my question is irrelevant I think...

I send you anyway link and captures by mail. To speak about that and see how to make this work for a better result.

netisfred · 2015-10-08 21:08:22

So, if I consider that the desktop gallery will be Masonry and mobile will be Standard,
how it works to adjust each version ?
In lightroom with the Gallery template, do I have to make at first a setup for desktop with the Masonry, and switch to Standard to make the mobile version ? And switch back to masonry before export ?

Or does it work differently ?

Thank you Rod.

rod barbee · 2015-10-08 21:31:53

how it works to adjust each version ?
In lightroom with the Gallery template, do I have to make at first a setup for desktop with the Masonry, and switch to Standard to make the mobile version ? And switch back to masonry before export ?

To be honest, I've never tried that. Why not try it and see what happens.

netisfred · 2015-10-08 21:36:32

héhé ok
I just tried.
It doesn't work... At the moment we switch back to masonry, the plugin doesn't export the setup made with the standard version...

So the setup has to be done in the CSS ?
Can it be done in the custom CSS from phpPlugin ? To avoid to do it each time there is a change in the template...?

rod barbee · 2015-10-08 22:05:37

Can it be done in the custom CSS from phpPlugin ?

that's the place to do it.

One approach would be to design a gallery in Lightroom for the way you want it to look on the iPad. You can use the viewport sizer to set up a work space.

Export the gallery. After export, open the gallery's /lib/css/style-component.css file and look for the section titled "CE4 Standard - Grid"

What I would try is copying that entire section and placing it in the custom css. This should make it so that the mobile versions of all the albums you put online will get this css applied to them. Hopefully.
You may need to play around with it a bit as I don't know if this will be all the css you need.

netisfred · 2015-10-08 22:09:30

Yes it is exactly what I am trying to do It works to edit the CSS in the PhpPlugin, copying and editing parts of CE4 standard yes
I will play with this and let you know how it evolves !

netisfred · 2015-10-08 22:48:25

So, I am trying some codes in the phpPlugin to modify the CSS.
There is a thing I won't be able to find, it is how to enable the iconic mode for CE4 standard...

I see some lines about iconic mode, but I don't see how to activate it with a line of code..

Do you know how to do it ?

Thank you !

rod barbee · 2015-10-08 23:16:53

I see some lines about iconic mode, but I don't see how to activate it with a line of code..
Do you know how to do it ?

It's not possible. The mobile markup doesn't allow for iconic on mobile devices.

netisfred · 2015-10-08 23:18:14

Ah ok. I thought to see the iconic mode on the iphone, but wrong, my mistake.

Thank you.

rod barbee · 2015-10-08 23:25:40

what you see on the iPhone is an iconic mode, of sorts. It's designed to show all thumbnails as squares so as to take the greatest advantage of limited space.

I suppose you could try changing the media query that triggers this (in css) so that larger devices also use the same layout.

netisfred · 2015-10-08 23:44:40

Ah ok, I will search for this too.
At the moment, I don't find the good lines of code to do the good setup. I thought to understand, but I have several issues

For example, I found how to change the size of the thumbnails, but I see now "two" thumbnails in the cells on Ipad, and the 2nd image of this thumbnail is not centered in the cell at all...
And it breaks also the thumbnails on the iphone...

...

rod barbee · 2015-10-09 00:23:10

if you change thumbnail sizes you'll need to re-publish the album, making sure that "Push metadata without updating existing photos" in Publisher setup is unchecked.

netisfred · 2015-10-09 01:16:10

Exact ! I thought about it and forget since I had the mind in the code..

So it is ok for that ! It works for the thumbnails of the galleries. Not all, but it is a good start.

Community @ The Turning Gate

#1 2015-10-08 19:41:20

Masonry Layout Ipad Issue

#2 2015-10-08 20:43:53

Re: Masonry Layout Ipad Issue

#3 2015-10-08 20:44:45

Re: Masonry Layout Ipad Issue

#4 2015-10-08 20:51:02

Re: Masonry Layout Ipad Issue

#5 2015-10-08 20:55:45

Re: Masonry Layout Ipad Issue

#6 2015-10-08 21:08:22

Re: Masonry Layout Ipad Issue

#7 2015-10-08 21:31:53

Re: Masonry Layout Ipad Issue

#8 2015-10-08 21:36:32

Re: Masonry Layout Ipad Issue

#9 2015-10-08 22:05:37

Re: Masonry Layout Ipad Issue

#10 2015-10-08 22:09:30

Re: Masonry Layout Ipad Issue

#11 2015-10-08 22:48:25

Re: Masonry Layout Ipad Issue

#12 2015-10-08 23:16:53

Re: Masonry Layout Ipad Issue

#13 2015-10-08 23:18:14

Re: Masonry Layout Ipad Issue

#14 2015-10-08 23:25:40

Re: Masonry Layout Ipad Issue

#15 2015-10-08 23:44:40

Re: Masonry Layout Ipad Issue

#16 2015-10-09 00:23:10

Re: Masonry Layout Ipad Issue

#17 2015-10-09 01:16:10

Re: Masonry Layout Ipad Issue

Board footer