Isotope changes are breaking Photo view

[Ryan]

Hi, I upgraded to 4.4.2 and I’m seeing issues with Isotope. I see that your release notes mention tweaks to Isotope: https://theeventscalendar.com/maintenance-release-events-calendar-4-4-2-event-tickets-4-4-2-premium-add-ons/. At the very least, I’m noticing that you’ve added a .grid-sizer element to the Isotope container. Can you provide additional details on any Isotope changes that were made?

I’m seeing a couple of strange issues on the Photo view that I believe are related to the Isotope changes:
1. The Photo view is being laid out in 1 column rather than 3 as before. For reference, here is my prod site ->
http://santacruzbible.org/events/photo/ and here is my staging site -> http://staging.santacruzbible.org/events/photo/
Notice on prod (long story on why this has the more recent code vs. staging), the items are incorrectly laid out in 1 column.

FYI I do have custom CSS applied to the Isotope grid elements that has been successfully working for a long time now.

2. Secondly, on my localhost version I’m seeing an “opacity: 0” getting applied to the Isotope grid and hiding all the elements. I haven’t had a chance to extensively debug this but it’s a new thing following this plugin update.

Help appreciated, thanks!

[Cliff]

Hi, Adam.

We updated Isotope for the first time in 3 years, from v1.5.25 to v3.0.2, which is their current version. Please reference their documentation.

You can see our Photo view in action at http://wpshindig.com/events/photo/, and I do see 3 columns there and also on my localhost testing site.

Your production site doesn’t display your Photo View for me at all: https://cl.ly/1c280K322G3h

It sure seems to me like this is a theme or plugin conflict, so I’d suggest following these recommended troubleshooting steps for your own site:

Could you please make sure all your Modern Tribe plugins (and WordPress core, and your theme in this case) are at their latest versions?

• Downloads / Version Numbers
• License Keys
• TEC Automatic Updates
• or TEC Manual Updates
• WordPress core updates

Once you verify you’re on the latest versions, please test to see if the issue is still happening for you.

If it is, please follow our Testing for Conflicts Guide (basically switch to Twenty Sixteen theme and deactivate all plugins and custom code other than Modern Tribe plugins) and see if that helps narrow down the cause of this.

If it doesn’t, please enable WP_DEBUG and WP_DEBUG_LOG and share any debug messages you see while changing tickets quantity, navigating your site’s home page, events page, single-event pages, and any other of your site’s pages relevant to this ticket.

Then, please share your System Information (while in Testing for Conflicts Mode). That will give me a lot of extra information to help diagnose the problem.

You might also see if you can spot any console errors at your site. (If needed, you may reference our KB article Using Google Chrome Developer Tools.)

Let us know what you find out.

Thanks.

[Stuart]

Hi Adam,
I had the same issue and downgrading to the previous version 4.4.1 (and 4.4.1.1 of the Pro element) fixed this for me.

[lmburford]

Same issue here as well. All photos are overlapping. It was fine until I updated to the most recent version.

[Cliff]

@Stuart and @lmburford,

Please create your own separate threads (it’s okay to link back to this one) and please share your System Information if the Testing for Conflicts steps above don’t solve the issue for you.

Maybe we’ll find a common denominator amongst these 3 reports of the issue.

Thank you.

[Ryan]

Hi Cliff,

I had some time to dig into this further and found a few interesting things.

If I switch the Events Settings > Default Stylesheet to either Full Styles or Tribe Styles, the 3-column layout works fine. This is why it works on your demo site. However the Skeleton style option has issues.

• One issue with TEC’s Skeleton stylesheet is that you don’t provide a width for .tribe-events-photo-grid-sizer in your Skeleton stylesheet. I tried adding that to my custom stylesheet and it didn’t solve the issue, but I’m sure this is part of the solution because Isotope requires setting the grid-sizer to a value in order to layout the rest of the grid properly.
• Secondly, I think something is not firing correctly with your custom Isotope JS implementation. One of the core issues is that your JS is not properly overriding the opacity: 0 that gets applied by your stylesheet to the #tribe-events-photo-events element. If you flip this CSS value on my prod site, you’ll see that the content indeed then appears (although it’s not laying out properly in 3-columns still). I picked through your tribe-events-photo-view.js and the logic in function tribe_setup_isotope looked a bit suspect, although the issue may be elsewhere. The bottomline is that the JS isn’t properly setting the needed CSS values on Isotope load.

FYI, I tested turning off all my custom CSS that applies to the Photo view. This had no effect on the issue. I don’t believe there is any conflict occurring with my custom code. Also, because flipping to the Full Styles or Tribe Styles “fixes” the issue, I don’t believe there is any conflict occurring with other plugins. I believe the issue lies in how TEC is handling Skeleton styles with the Isotope v3 upgrade.

Hope that helps, look forward to your thoughts.

[Stuart]

Hi Cliff,
I did share my system information. I mentioned that restoring to the previous plugin versions fixed the issue. I’m also intrigued by Adam’s findings and will investigate on my local server. Meanwhile, I have instructed site admins to NOT update the plugin on the staging site.

[Cliff]

Stuart, thank you for creating your own thread. Please continue your discussions there, as this thread was started by Adam.

Thank you for your understanding with our processes and for your efforts helping us determine the cause of this.

[Cliff]

Adam, thanks for your troubleshooting efforts and detailed report.

I was able to reproduce the issue when switched to Skeleton Styles on Twenty Seventeen theme.

I’ll pass along your report to our developers.

Others, if you have this issue and do NOT have wp-admin > Events > Settings > Display tab > “Default stylesheet used for events templates” set to Skeleton Styles, then please follow the Testing for Conflicts steps I provided in my initial reply to this thread.

I’ll mark this ticket as Pending Fix, which means this thread should receive a reply once the applicable fix has been released. I cannot guarantee when it will be fixed as it’s in the development team’s hands now. They need to assign it, code it, test it, and schedule it for release.

I apologize for this issue and appreciate your understanding and patience.

[Cliff]

@lmburford, please do create your own separate topic so we can address your issue as well.

Thank you.

[Ryan]

Hi Cliff, thanks for confirming the issue. Looking forward to the fix when it’s available.

[Cliff]

Thanks for acknowledging, Adam.

Have a great weekend.

[Ryan]

Hi Cliff, any update on when this will be fixed? Thanks!

[Cliff]

Hi, Adam. No updates yet at this time.

We don’t give release estimates but I can at least tell you that the fix for this bug hasn’t been started on yet.

I can point you to our Release Schedule as a general reference.

[Nico]

Hi there!

Just wanted to share with you that maintenance release 4.4.5 of our plugins is out, which includes a fix for this issue 🙂

Find out more about the release → https://theeventscalendar.com/maintenance-release-events-calendar-4-4-5-event-tickets-4-4-5-premium-add-ons/

Best,
Nico

[Author]

Posts