Integrate custom CSS/JS plugin into Quire

[yl5682]

I am hoping to integrate a third-party plugin but when I was referencing the JS/CSS files, Quire would report that files are not found (404). I doubled checked the file paths and URLs but the 404 error persists.

Please see attachments:

I feel like there is a config that determines what paths/files are allowed to be rendered in the Quire server. Any input would be helpful. Thank you

[geealbers]

Hi Yang, that's peculiar. You have everything set up correctly. You made the template changes directly to themes/default/layouts/partials/head.html? And you put the CSS files themselves in the static/css directory of your project, or where?

[yl5682]

Hey Greg! Thanks for your pointer! I think I might have just missed one file path or two. Now I have it working and I am documenting the steps in a separate comment under this thread. Hope it helps others.

In the meantime, I don't know if this type of overriding is the best practice or not (esp. considering conflicts due to future Quire updates). If you have any advice regarding customization that'd be helpful. I don't want to mislead others in the community.

Thanks!

[geealbers]

Glad it's working, and thanks so much for posting your full solution here for others!

We haven't developed a good path for customization with external libraries like this yet. To avoid the future updates issue you mentioned, I think ideally we'd build some logic in to a couple of the partials based on config parameters or other sources external to the partials so that they could be updated programatically instead of manually overridden.

For instance, in layouts/partials/head.html we could add logic that would look for any and all files placed in the static/css and static/js directories and automatically add links to them.

[yl5682]

That'd be great. Thanks for being so active in the community helping users like us out!

[yl5682]

Here is my update:

Insert the HTML snippet to create the instance

<!--
 Added Web RTI Viewer code here
 /themes/default/layouts/entry/single.html
-->

<!-- Web RIT Viewer -->
  <div id="viewerContainer">
    <script type="text/javascript">
      createRtiViewer("viewerContainer", "webrti", 900, 600); 
    </script>
  </div>
<!-- End of Web RIT Viewer -->

Include external assets in the head.html

{{- $jquery := "webViewer/css/ui-lightness/jquery-ui-1.10.3.custom.css" | relURL -}}
{{- $webrtiviewerCSS := "webViewer/css/webrtiviewer.css" | relURL -}}
{{- $webrtiviewerCSS := "webViewer/css/webrtiviewer.css" | relURL -}}
{{- $spiderglJS := "webViewer/spidergl/spidergl.js" | relURL -}}
{{- $multiresJS := "webViewer/spidergl/multires.js" | relURL -}}

<!-- WebRTI Viewer -->
  <link type="text/css" href="{{ $jquery }}" rel="stylesheet">
  <link type="text/css" href="{{ $webrtiviewerCSS }}" rel="stylesheet">

	<!-- Seems I can also use this style to include -->
	<!-- But I will need the leading '/' -->
  <script type="text/javascript" src="/webViewer/js/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="/webViewer/js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="/webViewer/js/pep.min.js"></script>
  
  <script type="text/javascript" src="{{ $spiderglJS }}"></script>
  <script type="text/javascript" src="{{ $multiresJS }}"></script>
<!-- WebRTI Viewer -->

Place webViewer directly inside static folder

Place catalogue files directly inside static folder

Note that the webViewer JavaScript files will be looking for files inside of the catalogue folder. Ensure that the file paths match.

End result: