Custom Component Advice: Jumbotron

I have an app that I’m trying to adapt in which the home screen is a Bootstrap Jumbotron… essentially a big tile. Unlike the Image component, the Jumbotron component can have an image as background and then text (or other containers) on top of it.

I have put my jumbotron definition in custom css. But the background source in my old code (running under Flask) was:

.jumbotron {background: url('/static/[name of file.jpg]') center no-repeat; background-color:#ffffff; background-size: contain}

is there an Anvil equivalent which allows me some place to load static files? If not, I can certainly store the file as a media object (and have!) and load it into the jumbotron after the form is loaded… but I don’t know how to do that loading either.

Anvil has this covered. See Adding your own asset files

Thanks. That doesn’t seem to work for me, though, but I may need to experiment some more. The asset isn’t appearing. Should the asset be generally available, ie if I put in a browser https://[myappname].anvil.app/_/theme/[filename.jpg] in a browser should I be able to see it? When I do this, I get “We could not find an app that matches your request” even though the I can run the app itself just fine from the browser.

This sounds like a simple typo. Try
https://files-injannuity.anvil.app/_/theme/darma_charts_01.png

Now, within your app, you may be able to shorten the URL.

Odd. I cannot seem to get it to appear in the browser (though your example works fine). I looked through forum posts, and so far all I have found is someone else with the same problem: Static assets under domain root
and I have managed to get a different public file to display.
So I have two problems: (a) why can’t I display the file (using the public link) in my browser; and (b) is there an internal shortcut that could be used (which presumably represents the relative path from the css location to the asset)

Unlike the IDE, the browser will always show you the currently published version of your app. If you added the file, but haven’t published the app since then, the world won’t see that change until you do.

That’s not it. I republished the app before I tried this.

If other asset files are displaying, then this makes me think that there might be something funny with this particular asset file, e.g., its name (typo? embedded blanks?) or its contents.

Thanks for your help… I’ll keep experimenting.

I got it working. The problem was (as you surmised) in the publishing. I thought I had saved when I hadn’t. No cure for idiocy, I’m afraid. Thanks, @p.colbert

It happens to everyone. The road to programming nirvana is paved with banana peels.