Creating manual links to local files

I Need Help
1

How do we manually link to files and media assets in Blocs?

I have files being referenced from javascript and css but I can’t figure out the directory structure so things work in the preview. I figure once I export the site I can link up the files no problem but I’d like to get things working in the preview as well.

Thanks in advance.

2

I don’t think you can preview it via in-app preview at this moment, if you export the project and open it in web browser you can see the results. @Norm, mentioned that he is revamping the in-app preview for the future releases so soon you should be able to view those results inside Blocsapp.

3

Thanks @ilayd for the info. I’ll open a Wish List thread and see how that goes.

4

If you just want a download button to a file, you can add either zip or pdf files to your assets & then drag the asset into the edit view, which will create an automatic download button and over in the sidebar, the file name will be shown in the interactions > type download & the file in the dropdown.

Bill
BricsDesign

5

Thanks @Bill, I’m okay with being patient, knowing this has been discussed. Any updates or thoughts on this @Norm ?

Also, That is helpful to know, but not really the use case I’m most concerned about. Adding things like sprites and background images via javascript and/or css is commonplace. I’m really surprised more developers haven’t mentioned this need.

As I’m writing this I’m realizing that the Class Manager is the fill-gap currently for adding images to your css that you can preview. But since the UI doesn’t reveal all the css options (of course), and there’s no equivalent to the Class Manager for Javascript, or other file formats.

I do think it’s best if we have complete freedom to write and test our own CSS. I’ll use a CDN for now so I have working urls in my code, allowing me to test things. I did run into a CORS issue today so I must use a local image in my code. Besides hand-writing code is faster :wink:

1 Like
6

I have the same issue. I have CSS that I have linked to the page in the resources panel. The CSS contains URLs to images in the form of background images. I have not found a way to attach an images file. I have to base64 encode the image to get it to show up. That is OK, but puts limitations on what I can do as a dev.

I was hoping to make a static site in blocs, and then bring it to life with interactions using vue.js. I was going to webpack my vue files, add the minified script to blocs and add custom attributes to elements in html brics. This would be perfect for a blocs site that needs just a few interactive widgets.

Maybe I’m not the target audience for blocs. However, as a dev, I was really hoping to stop wasting time writing layout code, and spend it instead on writing interaction code.

7

Sounds like we have a similar workflow. I like blocs for the simple layout and preview. I do a lot post export right now.

I think Blocs can still be simple for non coders and improve ease for devs at same time.

  • Ability to link to any local assets/files from custom html, .css and .js (as discussed)

  • A way to assign classes to the body of the page from blocs. helps us create global and local classes, making it easier to move items from page to page and more.

  • UI to write custom css/js for each page just 1 click away (dockable option?)

  • Ability to enable/disable per bloc “background check” color effect where font colors change from dark to light based on color of background image.

Excited for what’s possible.

1 Like