Hi,

I'm not original developer of the site but trying to solve this problem. I have a custom content type (lets call it my-page) so I was able to set up a Colorbox for Image field within this content type. So normaly when I open /node/1234 which is this type everythng works.

BUT

I have another content type which I can't see/edit under admin interface in Structure -> Content types as it's "generated" by custom module developed by third party and I can't make the Colorbox working there because I don't know how to tell Drupal to load CSS and JS files into that page too.

I can verify on that content type where it's working that both CSS are part of the

themes/<my_theme>/templates/html.html.twig
But don't know how to add that Colorbox items into that custom page too as within the template there are just:

<css-placeholder token="{{ placeholder_token }}">

and

<js-bottom-placeholder token="{{ placeholder_token }}">

I also searched for the placeholder_token variable in all files of my site to find out how/where it's being defined, but haven't found anything what would explain those differencies

Here are examples of resultl code:

common node content:

 

<script src="/core/modules/history/js/history.js?v=8.7.9"></script>
<script src="/core/modules/history/js/mark-as-read.js?v=8.7.9"></script>
<script src="/libraries/colorbox/jquery.colorbox-min.js?v=8.7.9"></script>
<script src="/modules/colorbox/js/colorbox.js?v=8.7.9"></script>
<script src="/modules/colorbox/styles/plain/colorbox_style.js?v=8.7.9"></script>
<script src="/core/misc/announce.js?v=8.7.9"></script>


  </body>
</html>

<!-- END OUTPUT from 'themes/cav/templates/html.html.twig' -->

and custom_page

 

<script src="/core/modules/history/js/history.js?v=8.7.9"></script>
<script src="/core/modules/history/js/mark-as-read.js?v=8.7.9"></script>
<script src="/core/misc/announce.js?v=8.7.9"></script>


  </body>
</html>

<!-- END OUTPUT from 'themes/cav/templates/html.html.twig' -->

Comments

antdevine’s picture

Are you adding all of your html straight into the page wysiwyg ? because that is not great practice.

texis’s picture

Definitely not, I just wanted to express that I'm using still the same template and

<js-bottom-placeholder token="{{ placeholder_token }}">

Generates different list of JS includes for two different content types using the same template file.

antdevine’s picture

If you want to attach a js library to a page you can use this method: 
https://drupal.stackexchange.com/questions/215010/how-do-i-include-javascript-on-a-single-page-in-a-way-that-is-amenable-to-scale

There are a few ways on there but way4 may work for you.

dipali.goel25’s picture

This helps you to add JS to templates for specific content type and may help you to get the solution

https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module