Preview head content in BSS?

Is it possible to preview the custom code I put in the HEAD in BSS itself? For instance, I use the slideshow script bxslider. The links to js and css files need to be in <head> of the document, to initialize before loading the slider. In the body I then have a few divs that are treated as slides.

When I preview in Browser, this works fine, I see the slideshow and the divs as slides. But in BSS itself, I see the divs one after another, since the <head> content isn't parsed I guess? Is there any workaround for this?

I don’t believe there is a workaround sorry

They are stacked I assume because the JS is what positions those DIVs. You should be able to set CSS to position those DIVs like the JS would so that it lays out the way you want in the app. I can only assume that in the browser preview the JS is probably using inline styles so you can inspect one of the slides and see what that code is. You really only care about the position code. Then just add that to your CSS so that your app view will be similar. If done right is shouldn't have any effect on the browser preview.


P.S. over even add the inline styles to the slides that the browse shows for each slide. The JS should override those in the browser preview.

For the time being, I use the Carousel element from Bootstrap, unfortunately it lacks the level of control of bxslider. So being able to edit and preview <head> in BSS would still be a great feature.

I use WowSlider and although it's not a perfect situation I've found that if I do what I need to do to style it up (import all files etc., add the code to the footer area where it should normally be and reorder it correctly, I can then see all the gallery and how it works within BSS (still not perfect as BSS has some visual issues with some things like this yet which I "hope" they are working on as they stated about a year ago). Once I have everything working as I need it to be, from there it just doesn't matter if it doesn't look right in BSS or preview.

I edit all the areas and upload the files needed to the server manually, reference them with Absolute links within the pages, add what I need to the HEAD code for each page using it and I call it a day. Once you know it works, that's really all you need so don't give up a better looking component just because it doesn't preview correctly. Get it working, make it work right, then you can make a Library component of it so you can recreate it any time you need the same setup. I use Custom Code boxes of course, so it's pretty simple to just replace the code with a new gallery each time. Takes it down to these steps after you've worked it all out and know it works:

To your server: Upload all the files needed in whatever tree structure they are needed for the component (basically how they would be if you coded the page yourself). In BSS: Create your Custom Code box and input the code needed to run the component (this could be any component, not just a gallery one). In BSS: Add any code to the page's HEAD that is needed, being very careful to have it in the correct order. In BSS: Be sure not to duplicate files that you won't need such as jquery.js and so on unless you have to work around older versions which I do at at times. In BSS: Make all your links to your images, files, etc. RELATIVE paths because you won't need ABSOLUTE ones after you've tested it and know it works.

That's it. You'll have it working, just not unless it's uploaded after that. I tend to have a separate folder for the exports so that the pages and files don't overwrite the real uploaded pages until I'm ready for them to. This way I can keep backups easier and test easier. Testing is pretty easy as well once you export because you can just copy and paste your Component's files to the export directory and open the page and it should work as long as all the files are in the same directory, so you don't "Have" to upload it if you don't want to you can just open the page locally in your browser.

Another helpful thing to do is block out the area you want to use for that component and do that last. That way you can put a placeholder image in there in the size that your component would be, placement setup etc. so the space is more like it would be if that component were there. This will give you a better way to style up the rest of the page without the goofy look getting in your way of gallery components using external items. Then just put your gallery in (I add it all in and hide it actually and put the placeholder in it's place until I'm ready for the gallery and can just turn it on then).

Hope that helps. Not a perfect solution by any means, but it has worked for me for lots of things for over a year now so it's doable if you can ignore the goofy look in BSS and the Preview window.

Many thanks for your ideas Jo, I will try it out!