Add isotope just in one page

sage
1

How can I add the isotope and imageload (or an ipotetic script) just in one page?
I bought the screencast but I don’t understand how can I do this.
it seems that the assets.php of the screencast it is completely different of the current one.

what are the correct steps to achieve this?
thanks

2

That part of assets.php was moved to the bottom of setup.php in the latest version: https://github.com/roots/sage/blob/1b9c0a3398b2cfc99b107aea8470cc8bb98f4254/lib/setup.php#L94-L106

What have you tried to do so far?

3

thanks for your answer, now works.
could you please let me know if the steps that I did are correct?

  1. I add the isotope.js in the assets/scripts folder

  2. I add this code in the manifest.json

"isotope.js": {
  "files": [
    "scripts/isotope.js"
  ]
},
  1. I add this code in the setup.php 
function addIsotope() {
  if (is_page( 'people' )) {
     wp_enqueue_script('test/js', Assets\asset_path('scripts/isotope.js'), ['jquery'], null, true);
  }
}
add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\addIsotope', 101);

is it correct? or there is a better workflow?

many thanks

1 Like
4

I don’t think there’s a better workflow right now. Does seem like something that could be scripted though (other than the conditional).

5

There’s a bower for isotope. It’s easier to add with that isn’t it? Then you don’t need to manually edit the manifest etc. or an enqueue the function.

Your initialise can be added to main.js with a conditional there.

Surely if you have the asset path to assets ƒ rather than dist ƒ, this is going to break on --production?

6

That would be much easier, but I think he only wants to load the isotope script on one page, in that case the above solution is better since it won’t be added to the main.js that’s loaded on every page.

7

Can I ask a question that is not related to sage?
I was thinking that I would like to add isotope just in one page to save the band in the other pages.
but I am not sure that is a correct thing to do.
what do you usually do with this stuff?

is it better to include the isotope (or the another additional scripts) in the main.js to do just one http request (but in this case the main.js is more heavy) or load the other additional scripts in the specific page that needs this script?

how you usually do you behave and what solution do you prefer?
what is the best solution for the load performance?

8

I just add it to my main.js and in Isotope’s case only the isotope.pkgd.js file. The minified version is only 40 Kb and I think the advantage of only 1 http request weighs more then the extra 40 Kb, but that’s just my opinion.

9

Yes, this is a good point about conditionals. You can set up page specific functions in main.js with:

‘home’: {
init: function() {
// JavaScript to be fired on the home page
},

This only fires the script on that one page. This seems to be the recommend ‘Sage’ way and there are arguments for it. I agree the standard WP enqueue are also valid in some circumstances.

10

If you’re using jQuery already, you could manage all your dependencies in the JS alone, and use $.getScript to load the isotope file asynchronously based on whatever JS conditional you’d like.

11

If you do this for libraries, you’re better off using the cacheable .ajax method instead of .getScript.

2 Likes