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.