Replacing the Isotope JS script

[Mike]

I am trying to customize the Isotope query to follow this format:

http://isotope.metafizzy.co/layout-modes/cellsbyrow.html

As part of this, I made a customized snippet separate from TEC and wordpress that is working 100% as intended:
https://jsfiddle.net/michaelpatino/ynjn3vsd/1/

This is a full width replacement for the Photo view, allowing as many columns as the viewport can handle. As you can see in the snippet, it has it’s own javascript for this layout:

$( function() {
  $('.PhotoViewContainer').isotope({
    itemSelector: '.painting-entry-wrapper',
    layoutMode: 'cellsByRow',
    cellsByRow: {
      columnWidth: '.PhotoViewContainer-GridSizer'
    }
  });
});

My difficulty comes in finding WHERE to input the customized JS in the Isotope files located in ../wp-content/plugins/events-calendar-pro/vendor/isotope/ for the columnWidth property. Basically, this sets the grid sizer to a width of 100%, allowing the script as many columns as needed for the viewport size.

columnWidth: '.PhotoViewContainer-GridSizer'

Question 1
How can I add the columnWidth to the current Isotope settings?

All of the other parameters have specified setting fields in the jquery.isotope.js file, so are easily inputted. Without it, I have been able to expand the rows properly so that the columns will adjust to the size of the viewport, but the images are all left aligned instead of being dynamically centered. See prototype site with script partially working here:

http://thepaintandpour.us/events/category/corporate-studios/dearborn-studio/photo/

Furthermore, editing the core files for Isotope is destined to create upgrade issues.

Question 2
Is it possible to create a template in my child theme for the Isotope files, and if so, what would the path be? Perhaps something like: /wp-content/child-theme/tribe-events/pro/vendor/isotope or /wp-content/child-theme/tribe-events/vendor/isotope ? Once I do have a working solution, I want to make sure it is upgrade safe!

Question 3
If this impossible, what if I wanted to just replace the queried Isotope files from the TEC ones with my own custom set (stored safe in my child theme). How do I enque that into the WordPress loop for TEC events viewed with the Photo layout (and ONLY those events in that layout, to avoid adding yet another resource drag on the site)?

Thanks for everything!

[Mike]

*NOTE* jsfiddle will not work when viewed with https, so view it in an unsecured link:

jsfiddle.net/michaelpatino/ynjn3vsd/1/

[George]

Hey Mike,

Thanks for reaching out.

We unfortunately cannot help with custom coding projects, as elaborated upon on this page → https://theeventscalendar.com/knowledgebase/what-support-is-provided-for-license-holders/

You will have to take the reins on all customizing here with plugin JavaScript.

In quick succession of your main questions, though, to at least address those in brief:

Question 1 — Modifying anything about Isotope in our plugins requires modifying the core plugin JavaScript files directly: our own scripts, and possibly the vendor scripts if necessary.

Question 2 — No, it is not possible to make upgrade-safe template files for JavaScripts at this time. Our template system described in the Themer’s Guide only applies to PHP templates and some CSS files, specifically. If it’s not listed on the Themer’s Guide, it’s not able to be made into an upgrade-safe template file at this time.

Question 3 — As noted above, it’s not possible to replace the default files with our owns without extensive custom coding beyond the scope of plugin support. Enqueuing custom files is also something you’ll have to take the reins on your own. Check out this guide to wp_enqueue_script for more information about enqueueing files → https://developer.wordpress.org/reference/functions/wp_enqueue_script/

---

I’m sorry that we cannot provide in-depth customization-relation support here, Mike.

If you need further assistance with custom code, custom file loading, etc., you may want to hire a professional developer for assistance. We have a list of great developers here → http://m.tri.be/18k1 (and have no affiliation with any of these folks—they’re simply some well-respected names in the community that we’ve compiled to share in situations like this one).

If you have other questions that fall within the realm of license support (which is defined here and here), please let me know!

— George

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts