How to use an image from Asset Manager in Code Editor / Project Header?

TEMPEST_114 · May 17, 2026, 9:17am

I have created some standard BS 5 off canvas menus and also a custom html/css/js nav bar.

I’ve put the code for these in the Code Editor / Project Header (for the HTML), Code Editor / Additional CSS (for the CSS) and those parts are largely working, however I have these issues:

In the code for the custom navbar I reference my site logo, but as that is now embedded into the blocs project, how do I reference that in the html ‘src=’ line or do I have to host my site somewhere while I’m developing it so that I can use an absolute link to a folder of images on my server in the html and bypass the embedded images in the Asset Manager?
By putting my custom navbar and offcanvs code in the Project Header section, when previewing it’s not behaving like a nav bar and staying visible when you scroll down the web page and because it’s not visible in the editor (only in preview) I can’t select it and change any of the blocs settings from the inspector panel.
I have some BS5 code to make the footer always at the bottom of the screen if the page content isn’t tall enough to force a scroll bar to appear, but again, because this is code in the Code Editor / Project - Footer it’s not picking that up and it’s not visible in the design editor (as it’s just code) so I can’t use the inspector panel for that either.

Have I missed a step in using the custom code to make this work? I did look at the html snippet but that’s not enough and it’s not what @Norm has previously advised to other users when needing to add this level of custom code (He always said use the Code Editor / Project - Header as the correct place to place it).

TEMPEST_114 · May 23, 2026, 8:27pm

Really blocked on this - can no one help or offer advice?!

calibinder · May 25, 2026, 1:07am

Hello Tempest_114

Sorry I may not be catching the gist of this but when reading the src=” part, I know that if I bring all the images I will use on the website into the Asset Manger first and then start working on something in the code editor that is going to have image references, I can type in <img src="img/ and soon as I type the forward slash it brings up all the images in the asset manager, all these images get uploaded to the img folder, example public_html/img/

But “Make sure to set the images in the Asset Manager to always Export or they will not get uploaded, only image that are used on the design canvas get uploaded” not the ones used in the code editor.

Example:

<img src="img/hero-image.jpg" alt="Hero Image" />

Ya, if you are using something like the code below just use the full path, you’ll have to upload your images into img/headers/ first, and they won’t display on the canvas while your making your site, you’ll have to upload the pages to your website to see all your embed images. Personally for stuff like navbars and the core of the website I would put all the images you want to use in the Asset Manager, less juggling.

<img src="img/headers/hero-image.jpg" alt="Hero Image" />

P.S. You can use Code Widgets everywhere on your canvas and even include CSS and JavaScript in them if they are a one off use on the page. Yes, you can put other code like CSS and Javascript in the header and the footer of the website per page if it is used only on one page or per project if used on all web pages.

(2.) Yes you can certainly use Blocs CSS controls for your custom code, you won’t be able to select the custom code and the CSS editor will pop up, what you’ll have to do is use the name of your selector in your custom code like “navbar-background” and make a new class in the Blocs Class Manager the your will be able to style your div’s and other elements.

<div class="navbar-background">
    <!-- navbar content goes here -->
</div>

(3.) It won’t show up in the design canvas, it will in preview or when uploaded, checkout Flexi Foot in the store, it does exactly what you want, just drop it in the global footer editor and configure it to use the id of your footer div, I always just use the name “footer” and it works great.

Hope this helps, I chugged through this and there might be some errors, that I can revise latter, but again hope this helps.
Calibinder

TEMPEST_114 · May 26, 2026, 8:02pm

Brilliant! Thank you. I couldn’t find any mention of having to put ‘img/’ first in the src path to make this work. Maybe I missed it, but this was the key.

calibinder · May 27, 2026, 2:58am

Cool you’re welcome.

TEMPEST_114 · May 28, 2026, 1:55am

Hi.

I’m still struggling with my footer.

I’ve used these BS5 classes on my footer css (it works outside of blocks)

mt-auto logo-gradient mb-0 my-4 pb-3 pt-3

So in Blocs - I’ve used the CODE EDITOR / PROJECT FOOTER code section with this:

<footer class="mt-auto logo-gradient mb-0 my-4 pb-3 pt-3 py-3 text-white">
            <p class="pe-5 ps-5 text-start text-white" style="font-family: 'Comfortaa', cursive;">The Legal Bit</p>
            <p style="font-family: 'Comfortaa', cursive; font-size: 0.7em; font-weight: 400; line-height: 1.9em; text-align: justify; padding-left: 50px; padding-right: 50px;" class="footer-text">This website ...</p>
        </footer>

This works perfectly in just plain html/css webpages, but inside blocs, this isn’t working - the footer isn’t getting pushed to the bottom of the screen when there isn’t enough content on the page to push it over a screen height.

I looked at the Flexy Footer option you mentioned, but a) I’d have to buy Pete’s Brick and b) After watching the tutorial video, I’d have to have a footer in the designer screen, but I don’t - it’s only being created in code.

My pages look like this:

because I don’t use the HEADER and FOOTER sections in the designer - they’re done only by code specified in the CODE EDITOR / PROJECT HEADER & PROJECT FOOTER.

I’m just confused why the footer BS5 classes aren’t being honoured properly.

Do you have any clues please?

calibinder · May 28, 2026, 5:09am

Hi TEMPEST_114

Ya it looks like your CSS is getting over ridden, you may have to go to the begging of the structure to target your classes. If you want to upload your page with the custom footer parts to a project folder and PM Message me the link and I’ll check it out.

Thanks
Calibinder

TEMPEST_114 · May 28, 2026, 8:41am

I noticed that my footer html/css wasn’t showing so I have edited my previous post.

Thanks for your offer of taking a look - let me know if you still want me to package up my project and give you a link or if the footer code above is sufficient for diagnosis.

calibinder · May 28, 2026, 2:00pm

Cool thanks for your code,

Here’s an update on this, I think we might have a bug but Norm please check it.

At first I came to the conclusion that you couldn’t put things in there in the Code editor header and footer, because it wasn’t working for me, but when I gave it a second try I left the global areas on and then tested it and seen the footer come up on preview, so then I toggled the global footer area off and the footer code in the code editor still came up, so ya, it could be a bug.

This part bellow is partially correct.

The footer won’t show up because your footer html is outside the page-container. Putting the html code in the editor footer, this doesn’t work the same way as the global footer does and is not the footer in the design canvas. This section may be a bug.

This section is still ok.

If you don’t want to use the global footer, one way is to add a bloc and give it the id footer so you can target it with CSS, and change the padding of it to 0 throughout all the breakpoints and then put your custom html footer into a Code Widget inside of it. but this will only work for one page and you’ll have to copy that bloc to all the other pages on a multi page site or duplicate the page, which leads to this, you could put your custom html footer code in a php file and make a include in the Code Widget

<?php include(‘customfiles/footer.php‘)?>

that way just update the php file and it will be updated on the site everywhere it is used. Make a folder called customfiles and put your footer.php in it and attach the folder to the project.

Hope this helps
Calibinder

TEMPEST_114 · May 28, 2026, 11:06pm

Hi Cal

I’m so confused.

I’m using the CODE EDITOR and choosing PROJECT FOOTER and then putting my html in there.

This is what the instructions for Blocs say to do.

So I’m confused when you’re talking about global footer and footer in the design canvas.

I’m not using or putting a footer in the design canvas, because I’m using my code, in the project (global) footer section - which is why using Pete’s tool or adding a canvas footer isn’t the solution I’m looking for or thinking I should use.

The fact that my “footer won’t show up because your footer html is outside the page-container” - isn’t that a bug / problem with how BLOCS is handling the PROJECT FOOTER code, rather than anything I’m doing?

I want this footer to be global across all pages. Hence I’m using the PROJECT FOOTER code editor window. Is that not correct?

I am not trying to use any different footers on individual pages in the project or view/edit the project footer in the canvas.

This is what I’m expecting to see/use in the designer canvas when I’m building my pages - I’m only focussing on the middle area (content). The top and bottom I’ve left to the code in the PROJECT levels. This is as per the BLOCS instructions, correct?

I have all my additional css in the CODE EDITOR / ADDITIONAL CSS panel.
I have my nav bar stuff in the CODE EDITOR / PROJECT HEADER panel.

and I’m trying to put my footer html in the CODE EDITOR / PROJECT FOOTER panel, which it accepts, but it’s not processing the CSS / HTML correctly.

This is what I see when I preview: The BS5 css commands for setting the margins and padding to fix the footer at the bottom of the viewport if it doesn’t go over 1 viewport in height is not being processed.

I do not know any php so I would be very adverse to using it or having to rely on that as a workaround - I’m trying to understand how what I’m doing (which I believe is in strict adherence to the BLOCS documentation) is not working and how to fix it - unless it’s an html/css processing bug in @Norm ‘s code.

TEMPEST_114 · June 6, 2026, 8:16pm

I haven’t been able to reach @calibinder but he reached out to me via DM’s and I just wanted to post his workaround to get this to work, but it does appear it’s a BLOCS bug in how BLOCS is processing the html/css in the PROJECT FOOTER code section.

@calibinder wrote:

I did some experiments and here’s what I came up with. Yes you can put some html markup in the Project footer in the code editor, some reason it didn’t work for me at first.

Add this to your body classes in the project settings

min-vh-100 d-flex flex-column

image482×328 14.9 KB

Add this class to that content bloc you have in the middle of your page

flex-grow-1

Make a class in the Class Manager and style it to your liking this is for the background color of your footer.

footer-gradient

Here’s a demo footer, take a look at the classes

<footer class="mt-auto text-light py-4 footer-gradient">
  <div class="container">
    <p class="mb-0 text-center">
      &copy; 2026 Some Company. All rights reserved.
    </p>
  </div>
</footer>

Hope this helps you
Calibinder

******

So I’m going to log this to @Norm as a bug, as we shouldn’t have to use this workaround, but major kudos to @calibinder for working that out!

Norm · June 7, 2026, 9:06am

Not of the code areas are not related to global areas. They are separate.

And the footer content gets inserted before the closing body tag.

Norm · June 7, 2026, 9:17am

I think this is more a limitation, the footer code zone inserts content before the closing body tag.

And these zones are not connected to global areas.

calibinder · June 8, 2026, 5:15am

Hi TEMPEST_114 and thanks Norm for the update, that clears things up, sorry I’ve been away for a bit.

Calibinder

TEMPEST_114 · June 8, 2026, 9:11am

I’ve sent an update to the ticket; my html and bootstrap classes is in the PAGE and is BEFORE the tag.

Norm · June 9, 2026, 8:46am

The mt-auto will not work on its own, you also need to add some classes to the body tag to force it to fit the available space, make it a flex and set the flex to columns.

I added these to the blocs body tag in project settings.

And then the footer (added in the code zone) pins to the bottom.

Here is a sample project.
Sample Project. (36.9 KB)

As mentioned before, Blocs are inserted in the page-container which you can not adapt from the Blocs UI.

So in order to use the mt-auto in this way, you need to add your code to the footer code section, which inserts before the closing body tag (but not inside the page-container with the rest of the Blocs on the page).

Then you need to add the classes mentioned above to the body tag and it works as expected.