Highlighted

How to automatically include folder of files to Captivate Project preview and zipped publish output?

Explorer ,
Jul 14, 2020

Copy link to clipboard

Copied

Does anyone have a simple and automatic method of including assets/data/js files into a Captivate project, so that they are included in Preview and Publishing (as zipped file) outputs of the project?

 

I don't want to keep trying to find the temporary preview folders or keep modifying the published zip file to add the files, it just seems to be a "hacky" step, and should be capable from within the tool itself (preferences / options / properties etc.).

Views

59

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to automatically include folder of files to Captivate Project preview and zipped publish output?

Explorer ,
Jul 14, 2020

Copy link to clipboard

Copied

Does anyone have a simple and automatic method of including assets/data/js files into a Captivate project, so that they are included in Preview and Publishing (as zipped file) outputs of the project?

 

I don't want to keep trying to find the temporary preview folders or keep modifying the published zip file to add the files, it just seems to be a "hacky" step, and should be capable from within the tool itself (preferences / options / properties etc.).

Views

60

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 14, 2020 0
Advocate ,
Jul 14, 2020

Copy link to clipboard

Copied

Hi phd4,

you can! I'm doing it in a way and I can't really claim that it is entirely my solution. Reading posts from people here on the forum like Stagprime or TLC Media Design was helpful to find 'my' way.

It is a bit 'hacky', though. I'm on MacOS, hence my explanation is mac-based, but it works on Windows as well.

Find the application/programme-folder of your Captivate installation. Go there to the HTML folder. Within it find the index.html and open it in text editor (like Brackets, Notepad etc.). index.html is the template file, which is used by Cp always when you publish or preview to HTML5 in a browser. Now in this index.html I added the following code after the second </script> end tag. It is approximately in line 168. Add something like this

<!-- custom added -->
<script src="assets/js/initmodule.js" type="text/javascript"></script>
<!-- END custom added -->

(the filename initmodule.js is valid in my case, you have to adapt that to your needs.)

Then make sure, that your javascript file(s) is/are copied to HTML/assets/js within the same Cp installation-folder.

This works for publish and preview cases.
Be careful, though. Should you update your Cp version you will have to repeat everything. And if you are working on several Cp projects at the same time, it is advisable to edit your javascript you want to embed in this way outside the HTML/assets/js folder and everytime you preview or publish, Save a copy from your editor to HTML/assets/js.

This works for me very well

Good luck

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0
Advocate ,
Jul 14, 2020

Copy link to clipboard

Copied

Perhaps I am mistaken - but I think the idea was to eliminate the need to have to add files to the assets/js folder at all.

 

At least that is what I was trying to do.

I wonder, though, if the same idea you propose would work if we simply pointed it to another location that is always available.

 

That js folder seems to be created at publish time so we cannot place it there ahead of time but perhaps there is another place we can point to which is reliable...

You may be onto something. Gonna have to go and play now.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0
Advocate ,
Jul 14, 2020

Copy link to clipboard

Copied

One more thing: my answer assumes that you want to add 'automatically' javascript to your Cp projects. Any other 'files' or 'folder of files' would be a different issue. Similar maybe but not the same!

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0
Advocate ,
Jul 14, 2020

Copy link to clipboard

Copied

Perhaps now I see the root of your other post regarding Preview/Publish.

I wouldn't mind knowing this as well.

I had once thought I might be able to modify the HTML file that is used at publish time to always include other JS files but that file points to an array that when published, points to the assets/js folder where we drop that file and have to add the path.

 

pre-publish

Stagprime_0-1594730561948.png

 

post-publish

Stagprime_1-1594730627945.png

 

 

 

I am not sure where Captivate is grabbing the JS libraries from or how they are being included in this array but I agree that would be an awesome timesaver.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0
Adobe Community Professional ,
Jul 14, 2020

Copy link to clipboard

Copied

What you are referring to here is sometimes called "headless loading".  It's the preferred way for loading JS libraries such as the one used in the CpExtra HTML5 widget for Captivate.  Tristan Ward (the programmer who developed that widget) shows how this is done for CpExtra here:

https://widgetking.github.io/cpextra/getting-started/installation.html#headless-installation

You can adapt the method to load whichever files you need to have present in your project.

 

However, I do agree with those who would like to see a more user-friendly method of loading extra files that might only apply to a single project.  This method of altering the templates for Captivate becomes somewhat cumbersome if you happen to be working on multiple different projects at the same time.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 2
Advocate ,
Jul 14, 2020

Copy link to clipboard

Copied

Rod!!

This is pure GOLD!

If I could drop a few more likes on this I would.

 

The only question I have is that Tristan mentioned (circa 12:00 - 12:15) if you aren't using it that basically you would need to go in and change back. I agree that it would add a little extra unnecessary overhead but would it actually break anything to leave it there unused?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0
Adobe Community Professional ,
Jul 14, 2020

Copy link to clipboard

Copied

No it would not necessarily break anything to leave the redundant js file sitting in the Captivate install directory and have it called via the template array.  The only case in which it could cause you trouble (that I am aware of ) is if you later added some other JS code to the same project via other methods (e.g. the Captivate JS window) that had code which conflicted with that of the include file.  Having the redundant file there will also mean you get a little more bloat in the project, but JS files are usually the least of your worries when it comes to bloat with a Captivate project. 

 

Whenever I have had to include a custom JS file (using the method Tristan mentions) my preference is usually to just save a copy of the JS file with the project design documents and then just delete the code out of the JS file sitting down inside the Captivate install directory.  That way I still have the backup file with the project, there's no chance of a conflict, and there's really no added weight to other projects either.  The JS file is usually just called something like custom.js anyway.  So I can use the same file for other projects if I want to without having to change any of the include code.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0
phd3 LATEST
Explorer ,
Jul 14, 2020

Copy link to clipboard

Copied

Thanks,

     It seems that the more I use Captivate the more road blocks I keep coming up against, it just seems to be one more  "hacky" workaround after another just to do the simplest of jobs!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0
Advocate ,
Jul 14, 2020

Copy link to clipboard

Copied

phd4, after reading the replies from Stagprime and RodWard, I became aware that I forgot to mention, that if the folder js/ within HTML/assets  does not exist (this is the case by default) you'll have to create it manually.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0