I am working on a large site that will use different JS libraries and different CSS files on given pages. The general stylesheets have been added to the master template, but to reduce HTTP requests, I would like to add certain JS libraries and stylesheets to pages without having them load on every page.
For instance, I have some pages that have forms, and others that don't. There are specific JS libraries and CSS files I would like to add on pages that have forms that the other pages do not need.
In order to make the user experience easier for content editors in our company, I think it would be best to just have a data type on my document type that has a list of css files and a list of js files with checkboxes next to them. The content editor could just check the files they will need to add to the pages as they see fit.
I am pretty sure I explained this correctly, and I hope there is an answer for this. Searching the forums, I did not see an answer for this. Is this even considered the best practice or are there better ways you guys can think of to achieve the selective css/js calls? Thanks in advance!
I understand your desire to limit assets being loaded on pages and I too think that's a good way to go. Personally i'm not sure if giving the user options to select which assets to include is the right approach but it may be for you in limited circumstances. We instead tend to load assets based on the items being used on a page. For example if a particular grid is being used the grid view may include require js or css. If we've done an accordion using nested content we will load assets in only when needed.
We do this using the ClientDependency Module and syntax like this in our views
Add CSS/JS files with checkbox
Hi all,
I am working on a large site that will use different JS libraries and different CSS files on given pages. The general stylesheets have been added to the master template, but to reduce HTTP requests, I would like to add certain JS libraries and stylesheets to pages without having them load on every page.
For instance, I have some pages that have forms, and others that don't. There are specific JS libraries and CSS files I would like to add on pages that have forms that the other pages do not need.
In order to make the user experience easier for content editors in our company, I think it would be best to just have a data type on my document type that has a list of css files and a list of js files with checkboxes next to them. The content editor could just check the files they will need to add to the pages as they see fit.
I am pretty sure I explained this correctly, and I hope there is an answer for this. Searching the forums, I did not see an answer for this. Is this even considered the best practice or are there better ways you guys can think of to achieve the selective css/js calls? Thanks in advance!
I understand your desire to limit assets being loaded on pages and I too think that's a good way to go. Personally i'm not sure if giving the user options to select which assets to include is the right approach but it may be for you in limited circumstances. We instead tend to load assets based on the items being used on a page. For example if a particular grid is being used the grid view may include require js or css. If we've done an accordion using nested content we will load assets in only when needed.
We do this using the ClientDependency Module and syntax like this in our views
This however hasn't worked for us in partial views so there scripts are loaded in the standard way.
is working on a reply...