Not sure how this could or would need to be done, but I'm finding that working with external scripts is quite a daunting task in this app at times. I work with quite a few of them and lately have been working with some that I've never used before even outside the app lol. This has proven to be quite a brain teaser for this old brain with finding out the best ways to get everything together.
I think the main thing that is lacking is the ability to reference downloadable items or files that will open such as PDF files, music files, videos etc. Right now I'm working with a lot of PDF files as well as sound files (sermons for another church to be exact) and it seems that the only way I can reference them and still test them in the app's preview is to reference them with absolute URL's and I don't want to always have to do that. I also don't want to have to always edit these URL's when the site is about to go live (meaning I would edit them because they have already been tested and I know they work). This could mean changing the URL's of sometimes dozens to hundreds of links. Not exactly time efficient lol.
So, although I have no idea how this could be implemented, I would like a way to either:
1. Add external files into a newly created folder in the root of the Design area.
2. The ability to add file URL's that will reference the intended location of the website upon completion. In other words, the ability to designate the domain that the website will reside in upon export and have the app use that location for external files that we cannot add to the Design area. There would need to be some kind of way to tell the app what files are external, maybe a check box under the URL to state if it's referencing an external file on the domain?
How does this affect scripts you ask? Well, most apps that I use for some of the elements I add to my sites give you all the files and instructions for what code to add where. I need to usually add folders to BSS, import specific files to specific folders (sometimes duplicate named folders in multiple areas such as Javascript and CSS may have the same named folder because the original folder of files that the element app gave me are in the same folder), and all around trial and error until I get things in the right places.
If we could designate the domain (in the settings of the project file somehow) and then reference external folders of files, this means I wouldn't have to go through all these hoops to add external scripts to my projects. These hoops can be quite daunting and many times include importing of js, css, images, etc. and then some even need external js files created to manipulate what is needed. It's just a lot more work than it should be to do these things that the element apps have made so simple for us to use.
Thank you for the detailed suggestion! Would something like this help:
In the new Export Options dialog, we can add the ability to replace strings of text/code in your HTML files. For example, let's say that while designing your site, you are linking your PDFs from your hard drive directly by using the file:// protocol like this - file:///Users/Jo/website/files/pdf/test1.pdf. You can then set "file:///Users/Jo/website/files/" to be replaced with "/files/" when the site is exported, so that your links point to the right place when you upload your site online.
I am not sure how we can apply this to the libraries. Can you give an example of one or more libraries that you've had to include? Maybe we can think of a way to do it.
That file setup feature you suggest would be awesome and that would handle I believe every need for external files needed to be added.
There is one issue that it would not fix though. That would be the issue of including all files in a folder. Sometimes the apps that create things like forms and galleries and such give you the entire structure of files you need for the element and you just plug that folder into the root directory of the site and reference it all in the html files you need it in. Sometimes those folders can contain a lot of files including images, js, css. This means I would still have to import every file separately. This is where it still would get messy, because you would still have to create all the different folders to accommodate the various files. In other words, I would still have to create a folder in the images section and a folder in the js section and a folder in the css section to import all the different files to.
If there could be a way to import an entire folder's contents all at once that would save a lot of time. Then the only time consuming part would be setting the export location for each which wouldn't be half as bad as having to do all of it as we did before.
I don't know how you'd work out the import of folders that have multiple file formats in them since you have all the formats totally separated in the App, and the structure of the file tree would need to remain the same as what the original folder contained. I guess that's why I was asking for a way to reference external locations. PDF's and such are a big pain, and your suggestion above will fix that 100%, but it won't totally address the issues with folders needing to be referenced that contain a lot of files. Well it "will", but it will still be just as much work as it was before, only the file referencing will be fixed for exporting.
Hopefully that makes sense? I wasn't quite sure what you meant by libraries as I hadn't mentioned them, so I'm assuming you meant the scripts.
What would be nice is if you can have a bootstrap theme (like an admin theme) and just drag and drop the MAIN folder with ALL the subfolders and BSS automatically creates the subtrees and puts files where they belong.... Trying to import an admin theme and admin-template has about 100 html files and frontend-template has over 100 html files and that does not include the css and other scripts..
is this still really not supported? I have several js files in a folder and subfolders, and I can not figure out how to import the entire folder. Doing this one by one will be a nightmare.
I just typed this up the other day so I'm referencing another thread for the info on the best way to import multiple files. Hope this helps until such a time as they finally give us the ability to connect local directories so we can reference external files with relative links instead of having to have them all online with absolute links or CDN's:
For me this is a show stopper - the inability to load one or more external .html files with each form at run or preview time, and for me is a reason I do not use BSS.
I build my menus as external files. I have 4 levels of menu depending on where the user is within the system. Instead of making global changes to every screen that uses a particular menu, as a menu changes (either shrinks or grows), I make the change(s) to one or more external files and then have them imported at run or preview time. This means I can make the change once and have it reflected in every screen without further effort - simples!
In a text editor (which I currently use) my import looks like this:-
<!--#include virtual="/assets/import-files/level-2/l2-main-header.html" -->
Provided the files are compliant html it can't be a great deal of effort to grab and load a file at execution time, can it?
Or is there another way to do this in BSS that I am not aware of?
Thanks for your help.
I'm not 100% sure if we're talking about the same thing @Buddhabeker, but you have good points there too. What I'm talking about is just the ability to reference basic files in a directory on my computer as if it were in BSS or as if it were showing a full URL and the files were uploaded to the server. I think what you're asking for is the ability to use "includes" and that's not the same. I just want to add files to a folder on my computer that I have that client's project files set up in. Then I want to be able to tell BSS that this project location is part of the site and have it automatically see all the files in that project location so I don't have to upload them and reference them by absolute URL's.
I would also like to be able to set file types so that it will know which ones I want to use and not use as well as block specific folders from being used.
The major issue that this is causing me right now is that I have over 40 CSS files that need to be detected as imports (BSS wouldn't even let me make a CSS file with the imports in it, I had to make it as an SCSS file. The builder of this tabbed component that I'm trying to use has it as a CSS file, not a SCSS file so I don't even know if I can use this at all.
I really do get tired of having to create work arounds for the lack of access for things like this and locked items and such that cause issues trying to recreate things. Right now I'm trying to "recreate" this tabbed component so I can use it in my site without using Custom Code. But these limitations are keeping me from not only recreating it, but using it at all.
So, if I could put all these CSS files into the appropriate location in my project folder for this site, and if BSS could be told that this project location is part of the files for my BSS project, that would solve a whole lot of issues with recreating things, using custom fonts, custom files, pretty much anything you can't import properly in BSS.
Just thought I’d give this a bump since it’s been almost 3 years since it was posted so we can find out if this is anything even planned or not or if so, get some kind of time frame on it. This would save us so much hassle and time.
Importing arbitrary file types and folders to the design root is not something that will find its way to Bootstrap Studio. This means potentially multi gigabyte bsdesign files which will slow everything down.
Linking local files or directories without importing them is possible, but this creates issues with Bootstrap Studio Sites - should we upload the entire local folder when publishing? Also if your external folder contains CSS or JS files, I guess users would want to edit them too. So the app should now also serve as a general purpose code editor which brings yet more complexity.
The current solution is to just upload the files to a regular hosting provider/file storage service and link them in your design. I think it works well and is simple to understand. If there are cases where this doesn’t work, we would love to hear them.
I think adding a setting where one can choose a linked local folder when a new site is created makes the most sense. I don’t think it needs to be too complicated. There’s no reason why someone would need to put CSS or JS files in it, since they’re already importable, but perhaps there could be some sort of pre-defined list of supported file formats that the linked folder could contain… .pdf, .docx, .xls, .txt, .ogg, .mp3, HTML5 video formats, .htaccess, .zip, etc…
Anything not supported would be ignored during upload, or better still, if the files could be added to the folder through an dialogue in the program, then the program could simply list the supported file types, and not allow anything to be added that isn’t supported. I suppose there could even be a size limit, although that might be problematic with videos. I would mainly use it for PDF files, which my clients use in abundance on their websites.
@Martin, I think you are misunderstanding the request. All we really want to be able to do is “see” the local files so we can link them using relative links. No need to edit when the site is done then to reset sometimes hundreds of absolute URLs that no longer need to be “absolute”. I don’t need to edit the files in BSS I have external editors galore for that. Just need to read them, nothing more. Doesn’t have to be a complicated mess with editing and uploading etc.
The upload would remain the same as I’m assuming that people using BSS Sites can upload outside of the app? If not then no matter either way since they can’t use anything external. If so then that’s all that matters. I don’t mind uploading the stuff separately etc. Just would like to be able to reference it in the projects to be able to use relative links and see the content rather than blank placeholder stuff, and not use Absolute links and then have to change them all later.
Each website I build is saved in a dedicated folder on my computer. Inside that folder is where I save the .bsdesign file, and then there are a few dedicated subfolders with some of media items I have on the website… images, videos, PDF files, any custom CSS or JS I might use, as well as the export folder, etc…
When you import an image into the program, the program no longer looks for the image on the computer because it’s now saved as part of the .bsdesign file.
If there was a way that the program could be “made aware” of a folder on my computer so that when I preview my page in my local browser and say, click a button that is linked to a PDF file, I don’t get an error page saying “this asset cannot be found”, but rather, the PDF file is opened.
That is exactly what I mean. I don’t need to edit the files, I just need the app to locate them per project. Granted I don’t keep all of my files in one basket, but just the ability to point to a project folder that could read the locations for PDF’s, zip files, anything that cannot be imported basically, and that it would be able to read multiple directories deep so we can use relative links to these items and as PN already pointed out, they would work in preview mode for true testing. The way it sits now I can only test 3/4 of my sites and then have to go back and test a bunch more after uploading. Not a very practical way of doing things.
I would like to +1 this idea. I am currently working with an animation in Hype 4 that has a video, and I cannot reference the export folder from Hype, but have to complete designs in Visual Studio Code.
I can add the relevant items to the head
The animation plays
The video will not play because of how it is referenced in script and there is no workaround unfortunately
With the new uploading setup I think this would be a great addition now. We can upload our external files to our servers, and have a copy on our local drive for BSS to see.
Even if it was set up something like we do with Sass: Reference specific folders only (this way it won’t mess with other folders we may have in the main project folder that we don’t want included.
Then the app just “sees” the content and utilizes it with any references within our HTML or CSS/SCSS that is needed.
This is all basically to arrive at one result. The ability to view, and/or reference relatively, items in BSS that are referenced externally such as videos, PDF’s (just for linking relative), scripts we may need to run for galleries, cms, etc.
Just for referencing and visually seeing the results in BSS if possible. Not editing in any way.
Thanks for that @kuligaposten , but that does only help the smaller issue of visuals. The referencing using relative URL’s is the more immediate issue for me. Having to link to online things to make sure all looks right and works right and then going back to redo all the links to be relative (I prefer relative links when possible) is the bigger issue for this. Yes visuals are also important, but as you show there are work arounds for that. There are no real work arounds for the relative links though.
