Masonry style

dvdfan001 · 2016-01-04 20:49:56

Just for clarification:
For the large image presentation I can specify the desktop and also the mobile appearance.

As far as the grid type for Destop is concerned (in the thumbnail grid options) I can choose between the CE4 Standard and the masonry presentation.

The mobile appearance of the grid type can not be specified: it is all the time the Standard appearance.
So no masonry style (as the grid type) is possible on mobile devices.

Did I understand this correctly?

rod barbee · 2016-01-04 23:27:28

right. screen space on mobile is limited so mobile devices get fed the mobile menu (with the square thumbnails)
More here: http://ce4.theturninggate.net/docs/doku … e_freewall

theomolenaar · 2016-01-22 04:55:38

Yes but an ipad is a different kind of mobile device than a phone. An Ipad pro has a 12.9 inch screen with 2732x2048. And a 'normal; Ipad of 2048 x 1536. That is much more than the screen of my netbook. Even then my notebook.

Should the distinction not be a pocketable device vs non pocketable? I remember that in earlier versions of CE I could choose wether an ipad would be considered mobile.

I would very much like to have masonry on Ipads...

rod barbee · 2016-01-22 07:29:28

I think it's due to something more than screen space, like performance:
http://ce4.theturninggate.net/docs/doku … e_freewall

theomolenaar · 2016-01-24 05:49:04

You can edit 4K video now with an ipad,,, It definetly has more processing power then most netbooks and probabely even older computrers.

And the ipad does not get the mobile menu but a classic gallery, that looks hideous, since I now mixed landscape and portrait, 1:1, 3:4, 2:3 etc. It used to ba a pain in the ass to get a good looking arrangement. Masonry solves this.

And future Ipads will be faster and faster... So I think masonry would be great..

rod barbee · 2016-01-24 07:31:42

You can edit 4K video now with an ipad,,, It definetly has more processing power then most netbooks and probabely even older computrers.

Apples and oranges, I'm guessing. It probably has more to do with browser capability and resources.

Maybe Matt will chime in, he's the one who's up on all this stuff. He always seems to have very good reasons for the choices he makes for the plug-ins.

theomolenaar · 2016-01-24 23:23:32

I searched to find if and where I could do something in Phplugins or elsewhere. Did not find it. But found this.

http://community.theturninggate.net/top … ipad-mini/

So it did work wuth CE3....

rod barbee · 2016-01-25 03:58:12

Each gallery's index file(s) contains this script in the head tag, which redirects to a mobile.php file if the screen width is less than 768 pixels or if it's a mobile device:

<script>
    if (screen.width < 768 || navigator.userAgent.match(/Android|Blackberry|SymbianOS|iPhone|iPod|iPad/i)){ 
        window.location.replace('mobile.php'); }
    </script>

You can try removing that manually after the page is exported (for both galleries and publisher templates). If you're exporting and uploading galleries, you'll need to remove it from each index page in a gallery if you're using pagination.
I don't see how it could be removed with phplugins. (Perhaps there's a way with jQuery that can search for a string and remove it.)

But Matt has that there for a reason so no guarantees as to how performance will be affected

theomolenaar · 2016-01-25 05:17:29

I was looking for that.

With publisher it seems to work differently because the content of index.php is:

<?php

require_once('lib.php');
route(array('action' => 'gallery', 'p1' => '', 'p2' => 'index', 'p3' => isset($_GET['page'])?$_GET['page']:''))

?>

I modified the index html in the template:

http://test.theomolenaar.nl/ttg-be/temp … /index.php

Removed Ipad from the statement. The word Ipad is not to be found. But I still get the mobile layout..... No masonry

Last edited by theomolenaar (2016-01-25 05:20:33)

rod barbee · 2016-01-25 05:34:18

actually, Publisher uses the template_index.php file

theomolenaar · 2016-01-26 02:36:09

Aha

Txs

I have tried that. It seems to work. It is indeed a bit slower, but I'll have to time that. Something else. On my ipad i get a 2 rowed masonry with huge thumbnails. While the ipad has more pixels then a laptop. When you click on a thumbnail an image appears that is smaller than the thumbnail (if vertical/ipad horizontal). So I guess the masonry is not made from thumbs but from the full images...

http://test.theomolenaar.nl/destination … the-south/

And how to get the image larger?

rod barbee · 2016-01-26 02:50:53

It does load and render more slowly on my iPad too. But that's not surprising as the Masonry layout is more resource intensive.
the reason you're getting only two thumbnails across is probably because there is only 1024px of width (iPad in landscape)
Change your desktop browser to that width and you'll see the same.

And how to get the image larger?

which image are you referring to?

When you click on a thumbnail an image appears that is smaller than the thumbnail (if vertical/ipad horizontal)

I don't see this behavior.

theomolenaar · 2016-01-26 03:31:05

I have an ipad retina. 2048 X 1536...

I am referring to the image you'll get if you click on the thumbnail. It is significally smaller then the tumbnail. The latter is (in pixels) much bigger then on my desktop....

rod barbee · 2016-01-26 04:11:31

probably because the large image display is constrained by it's container. In other words, it can only be as tall as the space allowed by Highslide.
Whereas in the thumbnail grid, you've got the whole scrolling page to work with.

theomolenaar · 2016-01-26 04:21:36

I guess you are right. I can offcourse enlarge that. But why does the thumbnail grid far exceeds the limits I gave for the thumbnails ? And has two columns and not three ?

Bit of a strange behaviour.

rod barbee · 2016-01-26 04:42:21

as the browser width narrows, the masonry grid reforms. At the iPad width you have two columns. Keep narrowing it to iPhone width and it will become one column.

My guess is that since your thumbnails are at about 356px, three can't fit the width of the iPad. So you get two columns and then they take the available pixels and expand them. The thumbnails, to me, look slightly better when the iPad is vertical (slightly smaller thumbnails) than horizontal.

This could be one reason why Matt redirects mobile galleries to the CE4 Standard layout.

I just noticed something else about the gallery you linked to above, and that's your file names. Some have commas. Some have parentheses. File and folder names should only have letters, numbers, dashes, and underscores.
Because you have commas and parentheses in yours, you're likely to run into problems with those.

theomolenaar · 2016-01-26 05:38:37

My thumbnails are 368 px. But the width of the Ipad retina is 2048... So at least 5 thumbnails should fit... With the ipad vertical the width is 1536, so 4 should fit...

You are right about the filenames. For Google I put the title in the filenames, replacing blanks with -. That is done on export, so my filenames in the catalog are intact. I still plan have to through the descriptions as some are also blank. maybe I'll use another field for the filenames (location-sublocation). Lightroom allows parenthesis etc in the filename exports (some other characters such as / are not allowed. It is a setting even. But i'll look into that. It is a setting in the publisher instance, so easily changed.

rod barbee · 2016-01-26 06:55:24

My thumbnails are 368 px. But the width of the Ipad retina is 2048... So at least 5 thumbnails should fit... With the ipad vertical the width is 1536, so 4 should fit...

I believe that for device width purposes, the iPad with a retina display comes in at 1024px. With Retina devices, pixel width and device width are not the same thing
http://www.canbike.org/CSSpixels/

rod barbee · 2016-01-26 07:34:41

on file naming
Parentheses and quote marks (among other symbols) have meaning in javascript and php and therefore can break galleries or certain functionality (cart, etc) if they're found in file names.
Matt's got more here: http://ce4.theturninggate.net/docs/doku … ile_naming

theomolenaar · 2016-01-27 03:22:04

Thxs for this info

I experimented a bit with the thumbnail size. ì thought I had something, Made the width 320 and got three rows. But it turned out I did not republish the inmages, and somehow that album had thumbs of 240 (Do not know why, published with standard album or something like that a forst time).

I could do 4 rows and get three on the Ipad. However, the masonry actually enlarges thumbnails, so you get rotten ones vertically. So I'll stick with my results. Not really what I'd expect but the result is ok I think. I can always experiment some more later, that is the beauty of the template concept..

When updating the file I left the second staement with 'Ipad' intact. Then you get the mobile slideshow... Looks better...

The performance seems a bit slow, but I think it is the upload. If you turn the ipad the Javascript has to recalculate, That seems pretty fast.

On to the next problem :-)

Last edited by theomolenaar (2016-01-27 20:06:33)

Community @ The Turning Gate

#1 2016-01-04 20:49:56

Masonry style

#2 2016-01-04 23:27:28

Re: Masonry style

#3 2016-01-22 04:55:38

Re: Masonry style

#4 2016-01-22 07:29:28

Re: Masonry style

#5 2016-01-24 05:49:04

Re: Masonry style

#6 2016-01-24 07:31:42

Re: Masonry style

#7 2016-01-24 23:23:32

Re: Masonry style

#8 2016-01-25 03:58:12

Re: Masonry style

#9 2016-01-25 05:17:29

Re: Masonry style

#10 2016-01-25 05:34:18

Re: Masonry style

#11 2016-01-26 02:36:09

Re: Masonry style

#12 2016-01-26 02:50:53

Re: Masonry style

#13 2016-01-26 03:31:05

Re: Masonry style

#14 2016-01-26 04:11:31

Re: Masonry style

#15 2016-01-26 04:21:36

Re: Masonry style

#16 2016-01-26 04:42:21

Re: Masonry style

#17 2016-01-26 05:38:37

Re: Masonry style

#18 2016-01-26 06:55:24

Re: Masonry style

#19 2016-01-26 07:34:41

Re: Masonry style

#20 2016-01-27 03:22:04

Re: Masonry style

Board footer