Two columns instead of three in the masonry grid in the Cassiopeia template

Phoca Gallery plugins - plugins for Phoca Gallery extension
Opendreas
Phoca Member
Phoca Member
Posts: 18
Joined: 29 May 2024, 03:02

Two columns instead of three in the masonry grid in the Cassiopeia template

Post by Opendreas »

PHP 8.3
Joomla 5.1.1
Phoca Gallery 5.0
Phoca Gallery Plugin 5.0 (There is no download link on the site)
Phoca Gallery Button Plugin 4.5.2
Template: Cassiopeia

I'm using Cassiopeia with the menu modules on the left. When inserting a category into an article with masonry grid, only 2 columns are displayed instead of 3.
https://imgur.com/a/LX48DF9

The thumbnail size is 301 pixels and the distance between thumbnails is another 16.5 pixels. It turns out that there are a few pixels missing for three thumbnails.
I tried setting the template to fluid, but the thumbnails get bigger and there are only 2 columns.
How can I fix this and set the size of the displayed thumbnails. If I understand correctly, then somewhere in the styles.

Thank you.
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48053
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Two columns instead of three in the masonry grid in the Cassiopeia template

Post by Jan »

Hi, thank you for the info, I have added the missing link to download.

If the images do not fit into the content, the only way is to resize them:

- either the image itself
- or somehow per CSS :idea:

Jan
If you find Phoca extensions useful, please support the project
Opendreas
Phoca Member
Phoca Member
Posts: 18
Joined: 29 May 2024, 03:02

Re: Two columns instead of three in the masonry grid in the Cassiopeia template

Post by Opendreas »

Hi,

/media/plg_content_phocagallery/css/phocagallery-masonry.css

Code: Select all

@media only screen and (min-width: 1201px) {
    .pg-masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
	}
If I change this value to 1, 4, 5, 6 and so on, then the corresponding number of columns is created, but 3 columns does not work.
I changed the column count to 3 throughout the code, added “!important”, but there was no reaction, the columns are still 2 and I still can’t understand why.
Opendreas
Phoca Member
Phoca Member
Posts: 18
Joined: 29 May 2024, 03:02

Re: Two columns instead of three in the masonry grid in the Cassiopeia template

Post by Opendreas »

The same thing happens in the gallery

/media/com_phocagallery/css/misc/phocagallery-masonry.css

Code: Select all

@media only screen and (min-width: 1201px) {
    .pg-masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
	}
1,2,4,5 columns are displayed, but not 3.
Opendreas
Phoca Member
Phoca Member
Posts: 18
Joined: 29 May 2024, 03:02

Re: Two columns instead of three in the masonry grid in the Cassiopeia template

Post by Opendreas »

I installed Joomla 5.1.1, Phoca Gallery 5.0 and only enabled Masonry Layout in Category View, no other changes.
The result is the same column-count: 3 does not work with the Cassiopeia template.
Opendreas
Phoca Member
Phoca Member
Posts: 18
Joined: 29 May 2024, 03:02

Re: Two columns instead of three in the masonry grid in the Cassiopeia template

Post by Opendreas »

/media/plg_content_phocagallery/css/phocagallery-masonry.css

Code: Select all

/* Masonry Gallery */
.pg-masonry {
    -webkit-column-count: 3;
	-moz-column-count:3;
	column-count: 3;
	-webkit-column-gap: 1em;
	-moz-column-gap: 1em;
	column-gap: 1em;
	margin: 1.5em;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.pg-masonry figure {
	margin: 0;
	padding: 0;
	line-height: 1;
}

.pg-masonry-item {
    display: inline-block;
    background: #fff;
    padding: 0;
    margin: 0 0 1.5em;
    width: 100%;
	-webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

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



@media only screen and (max-width: 320px) {
    .pg-masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
	}
}
@media only screen and (min-width: 321px) and (max-width: 768px){
    .pg-masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
	}
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    .pg-masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
	}
}
@media only screen and (min-width: 1201px) {
    .pg-masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
	}
}
If I comment out these 4 lines, then the gallery is arranged in 3 columns.

Code: Select all

.pg-masonry-item {
 /* display: inline-block;
    background: #fff;
    padding: 0;
    margin: 0 0 1.5em; */
    width: 100%;
	-webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
Opendreas
Phoca Member
Phoca Member
Posts: 18
Joined: 29 May 2024, 03:02

Re: Two columns instead of three in the masonry grid in the Cassiopeia template

Post by Opendreas »

Opendreas wrote: 31 May 2024, 08:00 If I comment out these 4 lines, then the gallery is arranged in 3 columns.

Code: Select all

.pg-masonry-item {
 /* display: inline-block;
    background: #fff;
    padding: 0;
    margin: 0 0 1.5em; */
    width: 100%;
	-webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
This does not work with Phoca Gallery Plugin.
christine
Phoca Hero
Phoca Hero
Posts: 2759
Joined: 28 Nov 2010, 17:20

Re: Two columns instead of three in the masonry grid in the Cassiopeia template

Post by christine »

Hi,

You could compare the codes with these:
https://www.phoca.cz/demo/phoca-gallery ... mo-masonry

In the demo, the images are 248px wide.

If you change/add codes, please always enter them in the user.css.

Otherwise, we can say more when we see it live.

Kind regards
Christine
Opendreas
Phoca Member
Phoca Member
Posts: 18
Joined: 29 May 2024, 03:02

Re: Two columns instead of three in the masonry grid in the Cassiopeia template

Post by Opendreas »

christine wrote: 31 May 2024, 17:40 Hi,

You could compare the codes with these:
https://www.phoca.cz/demo/phoca-gallery ... mo-masonry

In the demo, the images are 248px wide.

If you change/add codes, please always enter them in the user.css.

Otherwise, we can say more when we see it live.

Kind regards
Christine
Hello, thanks for the reply.
Unfortunately, I do not have the rights to send you a private message with a link to the site. But this is an installation of Joomla and Phoca Gallery without any changes, only Masonry Grid is activated. You don't even have to install the Phoca Gallery Plugin to see the problem.
The code on the demo page looks similar to me. My thumbnails are 300 pixels wide, I didn’t change the thumbnail settings. When I change the column count to 4 in Firefox Inspektor the thumbnails become 219 pixels wide.
Opendreas
Phoca Member
Phoca Member
Posts: 18
Joined: 29 May 2024, 03:02

Re: Two columns instead of three in the masonry grid in the Cassiopeia template

Post by Opendreas »

I installed Joomla 4.4.5 and tried Phoca Gallery 4.5.5 and 5.0.0 with Masonry Grid, same result, 3 column photos are not displayed with Cassiopeia.

I disabled all the modules, but nothing changed, the thumbnails became a little larger.
https://imgur.com/a/fiTlMUu
Post Reply