What I’m trying to do:
Understand where in the code the background images are stored.
What I’ve tried and what’s not working:
I have looked… but can’t find it. Also, I have tried uploading images for other parts of the website, and the images show up as a series of nonsensical stripes…
I am using the static website templete as a starting point to making a simple informational website. two issues:
I would like to change some of the “background” and filler photos (the stock photography of a person looking at a computer, etc) to something else, but I can’t find where they are and how to change it… I do see some of them as “assets”.
this project has uncovered some things I don’t know about anvil (good thing when that happens!). I have tried uploading my own assets for some other images I want to display at different portions of the website… when I try to put them in as a image, I get a properly sized garbled mess with different colored stripes instead of the image… other than it being a PNG or JPG, are there other requirements for images I need to know?
thanks for your help in advance… the DOCs have info on images, but I need help connecting that info into how I alter the app…
Some of the images in that template are stored as encoded data in the image component itself. If you look at the image component properties, you’ll see something like this:
The images get encoded that way when you upload them using the up arrow pictured in the screenshot.
The thing is, right now those images are encoded in an inefficient way and doing too many image components like that will make the app slower to load. You’re far better off uploading images to assets, and then using those images in the image component.
To do that in the image component source put something like this _/theme/home-img.jpg to load in an image at the top level of assets named home-img.jpg.
If none of that answers your question, you may need to share a clone link.
So, to change the home-img photo to… something else, I load the new image as an asset, then replace with new image name in the above code…? Or, I can delete
I made a clone of the template… will try the first way as well… as I break it (probably), I can post with more questions.
Thank you for the quick advice. Not understanding the underlying CSS (or non basic HTML) can be an issue, if not for people like you answering basic questions.
If what you want to change is that specific background image, then yes, you’d change the CSS.
More generally, in the image component in the editor what I showed in the screenshot that is currently something that starts with data:image, you’d instead use _/theme/home-img.jpg or whatever image name you want to use to pull the image from assets.
