{"id":1197839,"date":"2016-11-26T09:35:47","date_gmt":"2016-11-26T17:35:47","guid":{"rendered":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/"},"modified":"2016-11-26T09:35:47","modified_gmt":"2016-11-26T17:35:47","slug":"replacing-the-isotope-js-script","status":"closed","type":"topic","link":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/","title":{"rendered":"Replacing the Isotope JS script"},"content":{"rendered":"<p>I am trying to customize the Isotope query to follow this format:<\/p>\n<p><a href=\"http:\/\/isotope.metafizzy.co\/layout-modes\/cellsbyrow.html\">http:\/\/isotope.metafizzy.co\/layout-modes\/cellsbyrow.html<\/a><\/p>\n<p>As part of this, I made a customized snippet separate from TEC and wordpress that is working 100% as intended:<br \/>\n<a href=\"https:\/\/jsfiddle.net\/michaelpatino\/ynjn3vsd\/1\/\">https:\/\/jsfiddle.net\/michaelpatino\/ynjn3vsd\/1\/<\/a><\/p>\n<p>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&#8217;s own javascript for this layout:<\/p>\n<pre><code>$( function() {\n  $(&#039;.PhotoViewContainer&#039;).isotope({\n    itemSelector: &#039;.painting-entry-wrapper&#039;,\n    layoutMode: &#039;cellsByRow&#039;,\n    cellsByRow: {\n      columnWidth: &#039;.PhotoViewContainer-GridSizer&#039;\n    }\n  });\n});<\/code><\/pre>\n<p>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.<\/p>\n<p><code>columnWidth: &#039;.PhotoViewContainer-GridSizer&#039;<\/code><\/p>\n<p><strong>Question 1<\/strong><br \/>\nHow can I add the columnWidth to the current Isotope settings?<\/p>\n<p>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:<\/p>\n<p><a href=\"http:\/\/thepaintandpour.us\/events\/category\/corporate-studios\/dearborn-studio\/photo\/\">http:\/\/thepaintandpour.us\/events\/category\/corporate-studios\/dearborn-studio\/photo\/<\/a><\/p>\n<p>Furthermore, editing the core files for Isotope is destined to create upgrade issues.  <\/p>\n<p><strong>Question 2<\/strong><br \/>\nIs 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!<\/p>\n<p><strong>Question 3<\/strong><br \/>\nIf 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)?<\/p>\n<p>Thanks for everything!<\/p>\n","protected":false},"template":"","class_list":["post-1197839","topic","type-topic","status-closed","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Replacing the Isotope JS script -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Replacing the Isotope JS script -\" \/>\n<meta property=\"og:description\" content=\"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 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/\",\"url\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/\",\"name\":\"Replacing the Isotope JS script -\",\"isPartOf\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\"},\"datePublished\":\"2016-11-26T17:35:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/theeventscalendar.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"https:\/\/theeventscalendar.com\/support\/topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Calendar Products\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Events Calendar PRO\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Replacing the Isotope JS script\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\",\"url\":\"https:\/\/theeventscalendar.com\/support\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Replacing the Isotope JS script -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/","og_locale":"en_US","og_type":"article","og_title":"Replacing the Isotope JS script -","og_description":"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 [&hellip;]","og_url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/","url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/","name":"Replacing the Isotope JS script -","isPartOf":{"@id":"https:\/\/theeventscalendar.com\/support\/#website"},"datePublished":"2016-11-26T17:35:47+00:00","breadcrumb":{"@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/replacing-the-isotope-js-script\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/theeventscalendar.com\/support\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"https:\/\/theeventscalendar.com\/support\/topics\/"},{"@type":"ListItem","position":3,"name":"Calendar Products","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/"},{"@type":"ListItem","position":4,"name":"Events Calendar PRO","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/"},{"@type":"ListItem","position":5,"name":"Replacing the Isotope JS script"}]},{"@type":"WebSite","@id":"https:\/\/theeventscalendar.com\/support\/#website","url":"https:\/\/theeventscalendar.com\/support\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1197839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1197839\/revisions"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/media?parent=1197839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}