Version 2.2 is Out!

I'm happy to report that version 2.2.0 of Bootstrap Studio is now released! The highlight is the HTML editing capability. You can now drag and drop the Custom Code component inside your design, and write HTML inside it.

Alongside we also launched the ability to import HTML files (just drag them in) and the option to convert any component into HTML (you can see it in the right click menu of most components). This is a convenient way to "unlock" locked components, which has been a frequent request.

One thing to keep in mind is that in the app itself HTML is sanitized and JavaScript is removed for security reasons. But your code is included exactly as it is when you preview and export your pages.

Some things like the new component types for tabs and modals weren't ready in time, but we will release them in a series of 2.2.X updates next week.

If you see any bugs or if you have questions regarding the new functionality, reply to this thread. We're looking forward to your thoughts and suggestions!

@martin Great thanks! I'll have to pick it up when I get back from lunch ?

Saj

Great stuff, will look forward to the new suite of components too. Can you advise rough when the next mini release will be Martin?

@martin This update is already available? I click on check for updates and is informed that has no update, I'm using version 2.1.3 with student key.

@Martin Good Job, Guess who finally got to code that client-slider? Yep, me.

However, my only concern is: how do I upload a 10-sec animation to make it a background video? Or, where do I save the video? Or, better yet, how do I achieve this?

@shaeZonna, out of curiosity would uploading an animated gif as your background image solve this problem?

Is it possible to use the new custom code component to make a script tag like this <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>?

If not, is there any other way to include ajax in the project?

Thanks.

@ChrisHackwood yes, it would, but that's not what I want. A new video is featured every week and there are also some 20-sec time-lapses to be incorporated.

@Tocaj You shouldn't need to do that, as "Bootstrap" Studios loads/requires the jQuery script already. But it's not the most current version I see Bootstrap Studios is using version 1.11.3. Even that version of jQuery is already a JavaScript framework that handles Ajax.

I tried the Custom Code component editor and replaced the entire default code <div>Custom Code</div> with the <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> and then previewed the page and it worked. However, it doesn't replace the already loaded jquery.js script so the predefined script would compete with the custom added script. And I noticed that in the HTML viewer the Custom Code <div></div> is still listed as <div></div>.

Hope that helps

Saj

Thanks for your reply. I'm new to everything that had to do with web development, so forgive me if I'm wrong, but it doesn't seem to support ajax. I've been trying to use Ajax to communicate with external web APIs but with no success.

Maybe I can make it import the <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> by exporting my current project, adding the lines manually then importing them back into Bootstrap Studio. I will be trying this tonight. I don't think it should be this hard though.

What I'm meaning is that you don't need that script because Bootstrap Studios' already includes a version of jQuery, though slightly older.

The fact that the script URL has the word Ajax in it doesn't mean that, that is why Ajax is possible. The tool Bootstrap Studio doesn't run JavaScript within isn't self and I'm not sure that Ajax calls in the preview will work either. You probably will have to wait for your Ajax calls to work after you've exported you're project.

So don't worry about the script, add your Ajax calls like you'd expect, then check if it works after you've exported so that normal web server functions can be expected to be running.

I need to do some Ajax in my current project as well, so come Monday I'll see what happens myself as well. :)

Saj

@sameshima It turns out there was a bug in our update system and Student editions of the program didn't receive the update. This is now fixed and you should get it immediately.

@shaezonna Congrats on making the slider work! Videos can be very large and we probably won't be adding support for importing videos in Bootstrap Studio. Not to mention that they need to be re-encoded in multiple formats so that they work in all browsers. The best solution is to keep videos as external files and use a JavaScript library that places them as page backgrounds, and pass the video URLs to it. I think that there are libraries which can place YouTube videos as backgrounds, which makes things much easier.

@tocaj You have jQuery in your pages already, so you can make AJAX calls right away without having to include it in Custom Code. If you need help with this, can you start a new thread in the Help and How To section?

@saj Thank you for helping out in the discussion! When previewing and exporting, Custom Code is included as-is in the final page. But inside the app, we do some processing to make things secure and to prevent the page from breaking:

  • HTML is fixed up and JavaScript is stripped.
  • If you export more than one element, it is wrapped in a div (components must export only a single HTML element).

This is the only way we can make it work securely. Unfortunately this means that in some cases what you see in the app itself will be different from the preview and export. This is still version 1.0 of Custom Code and we will make it work better in the future with your feedback.

I am somewhat missing the overall functionality of the app and wondering if it provides all the options required to customize an existing theme based on the Bootstrap framework, rather than create a new one. I just recently purchased the Motorcycle template from http://www.templatemonster.com/properties/features/bootstrap-templates/, which is full of various features like Mega Menu, Parallax effect, Ajax search etc. However, a few modifications have to be done design-wise. Bootstrap Studio might come in handy for this, what do you think?