Tiled mosiac

Hey @skyrals

Glad to help!

It’s possible that there might be a conflict with one of your current plugins or your theme.

Try disabling all of your plugins except Jetpack. Then try testing again to see if the issue persists. If that resolves your issue, you can find what was causing it by enabling each plugin one by one while continuing to test.

If that doesn’t help, you can also try switching to the Twenty Twenty theme via Appearance > Themes, and test again. If the issue is resolved then you know it’s a problem with the theme, and you’ll need to contact the theme author for further assistance.

Let us know how it goes.

My best regards,

Michelle

Hi

It’s not the theme, I’ve narrowed it down to this plugin

https://en-gb.www.ads-software.com/plugins/gallery-custom-links/

I’ve posted on that forum too, but any insight from yourself on what is happening would be useful

Roger

• This reply was modified 3 years, 1 month ago by skyrals.

If you believe that the issue is a conflict with that particular plugin, the best solution is to reach out to the authors.

I tried and was unable to replicate the issue.

Hi

I haven’t heard from the plugin developers, but I have found the issue to be with jetpack tiled gallery style sheets.

If I go into developer mode of chrome and examine each tile, I can see the following under styles:

.tiled-gallery__item>a, .tiled-gallery__item>a>img, .tiled-gallery__item>img {
    display: block;
    height: auto;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    padding: 0;
    width: 100%;
}

Developer mode allows me to experiment and change values and if I change that to:

`.tiled-gallery__item>a, .tiled-gallery__item>a>img, .tiled-gallery__item>img {
display: block;
height: 999px;
margin: 0;
max-width: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
padding: 0;
width: 100%;
}

Then it fixes the problem, but how do I change that within wordpress?

Roger

Hi –

Since you are only changing one property, you can reduce it to this which is shorter:

.tiled-gallery__item > a, .tiled-gallery__item > a > img, .tiled-gallery__item > img {
    height: 100%;
}

I also recommend using 100% instead of using the height to make it exceed the container.

You can either add the CSS to your theme’s style.css file or you can add it to your site using Jetpack’s Custom CSS module:

https://jetpack.com/support/custom-css/

Thanks for the quick response. I have tried 100% in chrome developer mode and that does indeed fix the issue too.

However, I’ve tried adding the following to both the theme.css and in appearance->additional CSS

.tiled-gallery__item  {
    display: block;
    height: 100%;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    padding: 0;
    width: 100%;
}

But something must be overriding it as it makes no difference

I’ve tried altering max-height to 90% and can visually see that makes a difference so it is targeting the correct style

Is it possible to edit the jetpack.css file directly?

Roger

ok, I managed to fix it in the end by directly changing the ‘height: auto’ to ‘height: 100%’ in this file

/wp-content/plugins/jetpack/_inc/blocks/tiled-gallery/view.min.css

Roger

Though of course this only works if I disable the site accelerator, so I still a fix, shall I report this as a jetpack bug?

Roger

While you can edit the plugin file directly, this change will be overwritten when you update the plugin. The best way to do this is to edit your theme’s style.css or to add it to Custom CSS.

You might try adding the !important condition after the CSS:

.tiled-gallery__item > a, .tiled-gallery__item > a > img, .tiled-gallery__item > img {
    height: 100% !important;
}

which should allow it to take priority.

As for reporting a bug, you can do that here:

https://github.com/Automattic/jetpack/issues

Thanks, that has indeed fixed it. I have verified it with site accelerator too, I’ll report it as a bug so to help other people

Roger

Excellent, I’m glad that fixed it for you.

I’m going to go ahead and close this thread for now.