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

[ngc]

Hello Christine,
I read meanwhile that the solution with column-count seems to be originally made for newspaper-style columns [1], meaning first from top to bottom and only then from left to right. So I entirely changed the phocagallery-masonry.css to this grid scheme:

Code: Select all

.pg-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: center;
}

.pg-masonry figure {

}

.pg-masonry-item {

  margin: 0px;
}

.pg-masonry-item img{max-width:100%;}

@media only screen and (max-width: 320px) {
    .pg-masonry {
          /*all: initial; */
        grid-template-columns: repeat(1, 1fr);
  		grid-column-gap: 3px;
  		grid-row-gap: 3px;
		justify-content: center;
	}
}
@media only screen and (min-width: 321px) and (max-width: 768px){
    .pg-masonry {
         /*all: initial; */
        grid-template-columns: repeat(2, 1fr);
  		grid-column-gap: 3px;
  		grid-row-gap: 3px;
		justify-content: center;
	}
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    .pg-masonry {
          /*all: initial; */
        grid-template-columns: repeat(4, 1fr);
  		grid-column-gap: 4px;
  		grid-row-gap: 4px;
		justify-content: center;
	}
}
@media only screen and (min-width: 1201px) {
    .pg-masonry {
          /*all: initial; */
        grid-template-columns: repeat(4, 1fr);
  		grid-column-gap: 5px;
 		grid-row-gap: 5px;
		justify-content: center;
	}
}

and in the custom.css I added:

Code: Select all

div.pg-masonry-item > figure {
  margin: 0 0 0;
}

That a least solved the problem with the picture order, meaning the pictures are now correctly from first left to right only then the next row is getting started.

Still -- with this solution the justify-content: center; is ignored, and I don't know why.
Also, when there is more space availabe than given in grid-column-gap, the white space between gets more and more and it again looks ugly because of too much white space between the columns. But anyhow, at least the order-problem from above is solved

And I'm really sorry that this homepage steadily changes, because this is already our test-server where we try to improve things. So I would need to make a test-server of the test-server which is at the moment not possible :-/

[1] https://forum.joomla.org/viewtopic.php?t=987508

[ngc]

Dear all,
I hope I'm not prematurely extremely happy, because we now found a solution for each of my question in this thread

To sum it up:

medium thumbs in masonry style for fast loading but large thumbs in photoswipe after you click on the m-thumbs:

phocagallery.php section "DISPLAYING OF CATEGORY - MASONRY" between //Start Edit and //End Edit, surrounding code just for better finding it.

Code: Select all

// Display BOX IMAGE
// LAYOUT: components/com_phocagallery/layouts/box_image.php
$v->class		= 'pg-photoswipe-button';
$v->class2		= 'pg-photoswipe-button-copy';
$v->class3		= 'pg-bs-modal-button';
$v->link 		= $imageL;
$v->link2 		= 'javascript:void(0)';
//$v->link3		= $siteLink;
//$v->linkorig		= $imgLinkOrig;
                            
		   	//Start Edit 
			$v->linkthumbnailpath = $imageM;
			//before: $v->linkthumbnailpath = $imageL;
			//End Edit 		
$v->onclick		= '';

loading the images row-wise (and not column-wise), reduce white space between columns using display: grid
replace complete content of phocagallery-masonry.css with:

Code: Select all

.pg-masonry {
 	display: grid;
 	grid-template-columns: repeat(4, auto);
 	grid-column-gap: 1em;
 	grid-row-gap: 1em;
 	justify-content: center;
}

.pg-masonry figure {
}

.pg-masonry-item {
 	margin: 0px;
}

.pg-masonry-item img{max-width:100%;}



@media only screen and (max-width: 320px) {
    .pg-masonry {
        grid-template-columns: repeat(1, auto);
  		grid-column-gap: 1em;
  		grid-row-gap: 1em;
		justify-content: center;
	}
}
@media only screen and (min-width: 321px) and (max-width: 768px){
    .pg-masonry {
        grid-template-columns: repeat(2, auto);
  		grid-column-gap: 1em;
  		grid-row-gap: 1em;
		justify-content: center;
	}
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    .pg-masonry {
        grid-template-columns: repeat(3, auto);
  		grid-column-gap: 1em;
  		grid-row-gap: 1em;
		justify-content: center;
	}
}
@media only screen and (min-width: 1201px) {
    .pg-masonry {
        grid-template-columns: repeat(4, auto);
  		grid-column-gap: 1em;
 		grid-row-gap: 1em;
		justify-content: center;
	}
}

The magic trick for centering and proper grid-gaps was grid-template-columns: repeat(4, auto) and not grid-template-columns: repeat(4, 1fr)

And just because I liked it the old style a bit more I added following to the custom.css (partially from the old layout).

First line is actually also for the phocagallery-masonry.css and to remove unnecessary margins around the images, so that the empty white spaces between the images is only defined by grid-row-gap and grid-column-gap.

Code: Select all

div.pg-masonry-item > figure {
  margin: 0 0 0;
}

img.pg-image  {
  border-radius: 3px;
  box-shadow: rgba(50, 50, 93, 0.4) 0px 6px 12px -2px, rgba(0, 0, 0, 0.7) 0px 3px 7px -3px;
}

Here is the result:
https://herpetofauna.eu/index.php?view= ... -phocatest

As far as I'm an anti-talent in terms of design and layout, I'm happy for every suggestion concering improvement

Thanks again to both of you for support!

Happy greetings
Gerald

[Jan]

Hi, great to hear it.

[Opendreas]

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

If the thumbnails are too small, their resolution can be changed in the settings. But you can't select the thumbnail size.
This implementation seems illogical to me. In my opinion there should be 2 resolutions, one for the thumbnail and the second for the full screen image.
It would be ideal if you could choose what size the thumbnail should be displayed, otherwise it’s not flexible at all.
Changing the thumbnails in the file is not difficult, but it is a bad solution due to updates.

After viewing various galleries for Joomla, I came to the conclusion that Phoca Gallery has no alternatives and is a kind of standard for Joomla.
You have done a lot of work, but a few little things are missing to be completely happy.