Galeries desconfigured after updating

Just to complete my previous post, here are my settings:
Masonery image Gallery
Thumbnail width: 400
Masonery Layout: Fixed Width
Gutter width: 10
Image alignment: Center

Maby on a wider screen the would be no issue: what happens is that the pictures are covering each other horizontally.

I have tried to switch to 3 columns, but lose the center alignment and the gallery were stucked to the left of the navigator, so I went back to previous settings.

Then I “solved” the problem mooving the gutter width to 30. Now the picture are not covering eacho other anymore, but the horizontally and very big vertically…

I am lost…

Hello, as I couldn’t let my site that way, I have chosen the “less worst” solution and changed the gutter to 30.

So for you to see what the bug is, I have printed the screen.
Here is the picture: https://www.lgphotography.fr/Help/PbFooGallery.jpg

Thanks for your help…

This seems to be a CSS conflict, as the Twenty Twelve theme now includes a style for content images to use a max-width:100% which conflicts with the way masonry calculates it’s column widths. The quickest solution is to add this custom CSS to your galleries:

.foogallery-masonry .item a img {
    max-width: inherit;
}

I will include this CSS in the next version of Foo Gallery. I tested this fix in dev tools on your site and it fixed the problem with gutter width of 10px. Let me know if it solves it for you

Thank you for your answer and for your help.
I have tried to add this to the galleries’ custom CCS and it didn’t work.
Then I have tried as well to copy it in the site’s CCS Edit and had no result either…
There is nothin about image on my custom CCS, but I’ll copy it here anyway in case you think there could be a conflict:

/*__________ Mint Cream Flavor child twentytwelve __________*/

}

footer[role="contentinfo"] {
	border: 0;
	padding-top: 48px;
}

body .site {
	margin: 0;
	padding: 0;
	box-shadow: none;
}

.site-content article {
	margin-bottom: 24px;
}

.wrapper {
	margin-top: 12px;
}

.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
	padding-left: 10px;
	padding-right: 10px;
}

@media screen and (min-width: 600px) {
	.site-header {
		padding: 4px 0 0;
	}

	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
		border: 0;
	}

	.wrapper {
		margin-top: 2px;
	}

	body .site, footer[role="contentinfo"] {
		max-width: 100%;
	}

	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
		margin-left: auto;
		margin-right: auto;
		max-width: 920px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media screen and (min-width: 960px) {
	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
		max-width: 940px;
		padding-left: 0;
		padding-right: 0;
	}
}

@media screen and (min-width: 980px) {
	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
		max-width: 960px;
	}
}

/*__________ end Mint Cream adjustments __________*/
/*__________ Couleur du menu deroulant (liens) __________*/
.main-navigation li ul li a {
	background: rgba(255,255,255,0.85) none repeat scroll 0 0;
	border-bottom: 1px solid #B6B6B6;
	display: block;
	font-size: .785714rem;
	line-height: 2.18182;
	padding: .571429rem .714286rem;
	width: 12.8571rem;
	white-space: normal;
}

/*__________ Fin Couleur du menu deroulant (liens) __________*/
a {
	outline: medium none;
	color: #636363;
}

/*__________ Taille champs Forulaire de contact Contact Form 7 __________*/
input[type="textarea"], textarea {
	width: 100%;
}

/*__________ Fin Taille champs Forulaire de contact Contact Form 7 __________*/
.widget img, img.header-image, .author-avatar img, img.wp-post-image {
	box-shadow: none;
}

/*__________ Réduire espace au dessus de la barre de menu __________*/
.main-navigation {
	margin-top: 0;
}

/*__________ Fin Réduire espace au dessus de la barre de menu __________*/
/*__________ Réduire taille de la barre de menu petit écran__________*/
@media screen and (max-width: 960px) {
	.nav-menu a {
		font-size: 80%;
	}
}

/*__________ Fin Réduire taille de la barre de menu petit écran__________*/

Another solution (which may be even better for me because I could solve the responsiveness problem as well), if possible, would be to get the 2 or 3 colmuns layout to center in the page…

I have left this setup for an extra gallery which has no link on my site, so few peopole may access, in case you need to check it: https://www.lgphotography.fr/track-day-interlagos-24012016/interlagos-24012016-marcas-e-pilotos-classicos-da-competicao/
(sorry, it is a lot o pictures)

You’re not alone.
I have found exactly the same problem with my 3 galleries on https://www.casas-fotografie.de I’ve also tried the suggested custom CSS and I saw no effect so what I have done is to set a Masonry layout of fixed 4 columns with a normal size gutter. I doesn’t look as good as it used to but better than the mess after the update.
I’m sure it won’t take long a fix for it.

@lgphotography thanks for testing this out – I had another look at your page https://www.lgphotography.fr/track-day-interlagos-24012016/interlagos-24012016-marcas-e-pilotos-classicos-da-competicao/ and when I change the css to:

.foogallery-masonry .item a img {
    max-width: none;
}

then it works as expected. Please make that change and let me know

@marcalcc – please can you try this out too

Hi,

Unfortunatelly in my case it doesn′t work. I′ve left a gallery as is for you to check if you want to:

https://www.casas-fotografie.de/hochzeitengallery/

Thank you @bradvin but it has still no effect.
I have left the gallery with the new CCS so you can see…

please can you download and try this latest version : https://github.com/fooplugins/foogallery/archive/master.zip

let me know if that works for you

Hi Bradvin,

I also have the same issue as “LGphotography” after latest Foo gallery update.

link: https://www.kuremoellen.dk/galleri-3-restaurering-1-moellehat-restaureres/

I have tried your css code:

`.foogallery-masonry .item a img {
max-width: none;
}`

But doesn’t work. My setup is:

Masonery image Gallery
Thumbnail width: 300
Masonery Layout: Fixed Width
Gutter width: 30
Image alignment: Center

Please advise,

ATB
Morten

Closed my open topic so I could add to this thread instead.
Same issue as others…

All of my Galleries have the same setting but this one does not crop the thumbnails.
https://blupace.com/street-portraits/

They should all be cropped like this: https://blupace.com/street-photography/
https://www.ads-software.com/plugins/foogallery/

Kind regards,

Pace

@sandvall – did you download and test v1.2.14 from github? Ignore the custom CSS I added above. The issue was JS related after all.

@blupace – your issue is not related, as you are not using the masonry gallery template.

@lgphotography – did you manage to download and test 1.2.14 from github? Also please remove the custom CSS I gave you previously

Hi Bradvin,

To do that I need to deactive and delete the current version of Foo Gallery and install the new from GitHub, what about all my data and galleries will they not be lost?

Please advise with the installation so I don’t lose any data.

Atb
Morten

For anyone looking for an answer to this issue, I wanted to post one last message.

I finally got the time to download the latest version from Github. I installed it on my site using the “upload Plugin” option, which allowed me to directly upload the zip file. I deactivated the oldest version of Foogallery and activated the new one. After that, everything went back to normal.

Thanks @bradvin for taking care of us.