Accessing JS files in a subfolder of my content folder

support
1

Hello all,

TL:DR
I’m having trouble getting my shortcode to read a javascript file contained in a folder below the current content folder.

Full Description
Folder tree layout:
folders

In my shortcode I’ve tried:

<script src="MarkersInFile/scripts/config_xml.js"></script>

<script src="07_test/MarkersInFile/scripts/config_xml.js"></script>

<script src="Redacted/rpa-bot-documentation/07_test/MarkersInFile/scripts/config_xml.js"></script>

<script src="http://http://localhost:1313/Redacted/rpa-bot-documentation/07_test/MarkersInFile/scripts/config_xml.js"></script

We’ve been using Hugo at my job for a bit to make a training site. In this site we had some learning material and videos. Recently we’ve been trying to embed videos output from Camtasia which allow for us to have quizzes, a chapters, captions, etc. defined in Camtasia and built into the video through their player. Camtasia creates a number of files as output for this which can be used in your site including some xml and js files. I wrote a shortcode to load their video player and all it’s chapters, quizes and stuff. It seems to work fine if all these files are in the same folder as the index.md file. We however want to have multiple videos per page and these output files are not uniquely named. So I decided that I would just put these files into subfolders, one for each video, below the folder containing the md and adjust the shortcode to ask for the subfolder as an input parameter. However whenever I try to call the js files in the shortcode file it fails out saying the js file doesn’t exist. I’ve tried all sorts of things but had no luck and I’m not sure what I’m doing wrong. Any help you could give me would be much appreciated. I’m calling the shortcode from /Content/07_test/_index.md and the shortcode should be referencing the files in /Content/07_test/MarkersInFile/ which is the folder with all the relevant files output by Camtasia.

Chrome Console Output:
GET http://localhost:1313/Redacted/rpa-bot-documentation/07_test/MarkersInFile/scripts/config_xml.js net::ERR_ABORTED 404 (Not Found)

It’s worth noting if I do fileExists from the root of the site it to see if that JS file exists it comes back true.

2

From your folders, it looks like the path should be 07_Test instead of 07_test.

Try running hugo and check if the file exists inside the public directory at that path afterwards. If it does not exist then you need to use the file somehow in your template so Hugo can create a permalink for it and copies it over. I never tried to have javascripts in page bundles, so I am not sure if Hugo copies it all over or only the ones it is aware of (in sense of those that it uses in it’s templates).

Worst case is putting it all in a file structure inside of the static directory.

3

@davidsneighbour thanks man! They were there in public I had tried that but you were spot on with the case of the T being the issue.

Interestingly the 07_test (lowercase) was being generated by Hugo using path.Base (relref . "."). is there a way to have Hugo generate case sensitive folder paths? If not, no big deal. I’ll just change our folders in content to always be lowercase.

Thanks again, this had been driving me mad.

4

Hugo has a function lower that you could use in the templates. Lower the filename before invoking it:

5

The issue was the folder had a capital T, and path.Base (relref . ".") generated all lowercase. No worries though. I can work with that easy enough. I’ll just have the content folder all be lowercase going forward.

Thanks again. Really appreciate the help!

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.