view=category-masonry: how to use medium thumbnails?

[ngc]

Dear all,

given this code:
{phocagallery view=category-masonry|categoryid=175|limitstart=0|limitcount=0}
I have the problem, that the thumbnails used in the grid preview are the large thumbnails, meaning that the grid preview takes very long to load.
see: https://herpetofauna.eu/index.php/reisen/oman-2017

Whereas this code properly uses the medium thumbnails and correctly shows the large thumbnails after clicking on them.
{phocagallery view=category|categoryid=175|limitstart=0|limitcount=0}

How or where can I define, that for the masonry grid gallery-preview the medium size thumnails are used (and by clicking on them coming to the large thumbnails in photoswipe)?

Many thanks!


Liebe alle,

mit diesem Code:
{phocagallery view=category-masonry|categoryid=175|limitstart=0|limitcount=0}
habe ich das Problem, dass die im Raster angeordneten thumbnails bereits die large-thumbnails sind, das heißt diese Vorschau der Bilder braucht sehr lange zu laden.
Siehe: https://herpetofauna.eu/index.php/reisen/oman-2017

Dieser code hingegen verwendet richtigerweise die medium-thumbnails und öffnet dann richtig die large-thumnails wenn man darauf klickt:
{phocagallery view=category|categoryid=175|limitstart=0|limitcount=0}

Wo oder wie kann ich einstellen, dass auch für den masonry raster gallery-preview die medium-thumbnails verwendet werden (und ich dann erst nach Klick darauf zur den large thumbnails in photoswipe komme)?

Vielen Dank!
Gerald

[christine]

Hallo Gerald,

Confirmed. Sorry, I don't know. It seems, there is no parameter to change to medium-thumbnails. Therefore informed Jan about.

Liebe Grüße
Christine

[Jan]

Hi, yes, the masonry uses large thumnails because mostly medium is to small for having masonry effect.

To change it, the plugin code needs to be edited:
plugins/content/phocagallery/phocagallery.php

Change imageL to imageM e.g. here:

Code: Select all

$v->link 		= $imageL;
$v->linkthumbnailpath = $imageL;

Jan

[ngc]

Many thanks! Replacing only

Code: Select all

$v->linkthumbnailpath = $imageL;

with

Code: Select all

$v->linkthumbnailpath = $imageM;

does the trick

But that leads me to the next question - as you mentioned the medium thumbs are too small, meaning the white space between them gets too big. I tried to do changes via css, but I couldnt make this empty white space noticably less in the red rectangle marked below:


Do you or maybe someone else know how to reduce that empty space?

(I also tried to set the column-count of the outer div to 4 instead of 3, but this leads to too many empty cells on the bottom right, because it seems the grid gets filled column wise from top to bottom and left to right.)

Thanks & Best regards
Gerald

[christine]

Hi Gerald,

I don't currently see any masonry on the /oman2017 page? for investigation with inspector ...

Kind regards
Christine

[Jan]

BTW, this is why there are large thumbnails, to not have empty spaces there. So if you will use medium thumbnails and have spaces there, then you need to customize the masonry CSS directly in code

Jan

[ngc]

I don't currently see any masonry on the /oman2017 page? for investigation with inspector ...

Aaaah, sorry, that happens when two persons work on the same thing..

I made a copy for testing the masonry layout here, so here you can use the inspector:
https://herpetofauna.eu/index.php?optio ... -phocatest

So if you will use medium thumbnails and have spaces there, then you need to customize the masonry CSS directly in code

You mean it's possible to solve it only in the phocagallery-masonry.css, without touching the html?

Thanks to both of you
Gerald

[christine]

Hallo Gerald,

Try following into the custom.css (of course it depends on the media queries):

Code: Select all

@media only screen and (min-width: 769px) and (max-width: 1200px){
.pg-masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
column-gap: 0.1em;
}

.... count: 3; or 4;

Kind regards
Christine

[ngc]

Hallo Christine,
thank you for the suggestion. I already tried that, which leads to the problem that there are quite much unused tiles, because it seems to get generated the way I wrote before:

best greetings
Gerald

[christine]

Hallo Gerald,

I also looked here and there. Most of the time I saw 1 empty spot. I couldn't find your view. Maybe you can post it here?

In addition: I could imagine the following. Temporarily activate the image description. It may be a longer text, which is why the following image is next in line. It's not a good example (screenshot), but just as an idea.



Kind regards
Christine