I am trying to get this html template - https://www.free-css.com/free-css-templates/page231/catalyst
when unzipped, the folder contains -
I know I need to put the index.html file in my 'templates' folder, and the css inside of my 'css' folder, but I don't know where to put the font folder or image folder. I have tried a few different things but still end up getting a page with just the html on it.
You should put index.html in templates folder and everything else in static folder.
Then, in you application.py you can use:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template('index.html')
And in index.html file you would link all as path to that resource with url_for method:
<link rel=stylesheet type=text/css href="{{ url_for('static/css', filename='style.css') }}">
<link rel="stylesheet" href="{{ url_for('static/font-awesome/', filename='font-awesome.min.css') }}">
Putt the image file into Static Directory. Nevertheless you can also use the static path where the image actually exsist.
File structure:
app.py
static
|----your_Image.jpg
templates
|----index.html
Then app.py will look like
from flask import Flask, render_template, url_for
app = Flask(__name__)
@app.route('/index', methods=['GET', 'POST'])
def lionel():
return render_template('index.html')
if __name__ == '__main__':
app.run()
In templates Index.html will look like
<html>
<head>
</head>
<body>
<h1>Hi Lionel Messi</h1>
<img src="{{url_for('static', filename='your_image.jpg')}}" />
</body>
</html>
this way ensures that you are not hard-coding a URL path for your static assets.
