Custom Code -- cascading display of all the images down the page?

Bootstrap Studio Help
1

Hi Everyone,

I’m still getting to know the in’s and out’s of BSS so forgive me if this is obvious. I am trying to add for example slick.js (slider), but the rendering on the page is a cascading display of all the images down the page, instead of just displaying the initial image. I tried a couple different samples and they each yield the same result. I assume it's something with BSS and not the code as I can take the same code into Pinegrow for instance and it works normally.

Can anyone advise what is causing this (or similar if you have experienced it) and if it can be avoided / corrected? It makes for terrible visualization of the page design when working on and designing the page.

Thanks in advance.

BSS_User

2

Have you also included the slick CSS file in your design?

These should both be included for it to work correctly.

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js

I'm not sure which version of the script your using but here is the CDN site for it https://cdnjs.com/libraries/slick-carousel which you can select different versions. Also the official demo site http://kenwheeler.github.io/slick/

The BSS app strips the JS code from working with in the app it's self for security but the css should get the images to line up correctly. However, it may be that the CSS doesn't absolutely position the images so that could be reason why the images are just cascading on you because that JS can't run in the app therefore the images don't line up right. If this is the case maybe for now just use a single image and on export edit your code to include the other images.

Saj

3

On further testing, the reason why is that the JS injects elements that effect the positioning of the images, which can't be done in the app because the JS is stripped from working in the app.

So the easiest solution I think would be to use a single image so as to have something that holds it's place for your design, knowing that you will need to add more images later before or after you export your design.

OR you can use the following CSS which will hide all but the first image from view. You shouldn't need to do anything with this for export because it only applies to image that are direct children of the parent class of slideshow. Just change the class to whatever your using etc...

.slideshow > img {
  display:none;
}

.slideshow > img:first-child {
  display:block;
}

This is based on your HTML for the slider looking something like this, which is the base use for the slider.

<div class="slideshow">
    <*img src="http://lorempixel.com/500/250" />
    <*img src="http://lorempixel.com/500/251" />
    <*img src="http://lorempixel.com/500/249" />
</div>

Saj

4

Hi @saj,

First, thanks so much for your thoughtful input, feedback and suggestions. Sadly however I was hoping it was just me and not some Bootstrap Studio limitations.

• on export edit your code

• knowing that you will need to … after you export your design

I was hoping to avoid post edits as much as possible by using Bootstrap Studio, given its ability to work with HTML, CSS and JS. But now I am realizing some very real limitations with current CSS keyframe animation and general Javascript execution, etc.

The BSS app strips the JS code from working with in the app it’s self for security

I can perhaps understand this when installing the shareable 3rd party components directly in the app. But when using your own code, or widely used common JS libraries why is the user locked out of this functionality? Couldn't there be a different sandbox for the two separate occurrences, or something done to make it possible? That really is a major drawback, as this is just one example of many where using JS libraries will be an issue, or presently CSS that uses @keyframe, etc. Even if shareable components had to go through an evaluation before being approved and made available for protection.

I am really getting sad the last few days with BSS. First certain CSS features now JS, those two things really makes things difficult concerning workflow (given they are used on virtually every page/site). I was hoping to avoid post edits unless when absolutely necessary, but the simple use of common CSS and JS libraries were not part of those instances I had imagined. Yikes. I can't find anywhere on the main site, that these common CSS and JS limitations are talked about.

I know Pinegrow uses NWJS for its framework and Bootstrap Studio seems to use Electron, either Pinegrow is exposed or Bootstrap Studio could come up with the proper sandboxing or ability to do so? @martin, I sure would like to know more about this from a technical limitation standpoint why this is? I sure hope this can be overcome to allow for it?

Thanks again @saj, not what I had at all hoped for, but I always love your posts and responses just the same. Thanks for taking the time to provide such thoughtful input, feedback and suggestions, as you always do here at the forum. ;-)

BSS_User

5

I'm using the WowSlider gallery (I will check out this Slick Slider to see if it's any better, seems to have more features to it for sure, but I'm using to using an app rather than having to put all the code in myself, just lazy I guess lol. I'll give it a shot and see if I can get it to work.

The reason I'm posting is because although the JS doesn't fully work for me with the WowSlider, it does work partially in that it slides the images and they are not displayed down the page, and it works fully in the Preview window which I'm assuming the Slick Slider should as well.

I had to manipulate the files quite a bit to get this to work with WowSlider so maybe this info will help. I had to host the style sheets outside of the BSS app (basically I have them on the main server they will be on in the end and an absolute link used in the Styles import menu of BSS).

I then had to create folders within the JS and the images folders to mimic what was in the folder that WowSlider originally gave me to put in my directory. Then import those files needed into those directories. It's a lot of hassle to be honest, and I do hope that at some point there will be a better way to handle 3rd party files than jumping through all these hoops, but .... Until then at least I am not needing to edit the files after export to accomplish getting the slider to work.

Check out the file tree and see if maybe you are just trying to access them outside of the app or not importing them correctly. Mimic the directory exactly and see if that works, then if not, put the CSS files on the remote server and link to them using an absolute URL and see if that helps. That's working for me so far with WowSlider, maybe it's just semantics for you too. Good luck with it!

P.S. I do still have an anomaly where the image doesn't stay within it's container, but that's minor details to me. Thought I'd point that out in case that happens to you too.