Flask file structure css js img

Question

<!-- led screen  1024x600 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Smart headboard </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="static/css/bootstrap.min.css" >
      <link rel="stylesheet" href="static/css/mi.css" >

  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-light static-top">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="/static/img/hotelmini.JPG"  class="logo"alt="">
        </a>
            <div class="container">

              <!-- Brand/logo -->
              <header class="d-flex justify-content-center py-3">
                <!-- navbar -->
                <ul class="nav nav-pills">
                  
                  <li class="nav-item" lang="en" ><a href="" class="nav-link active" aria-current="page">Welcome</a></li>
                  <li class="nav-item" lang="en" ><a href="weather" class="nav-link">Weather</a></li>
                  <li class="nav-item" lang="en" ><a href="lighting" class="nav-link">Lighting</a></li>
                  <li class="nav-item" lang="en" ><a href="sound" class="nav-link">Sound</a></li>
                  <li class="nav-item" lang="en" ><a href="essence" class="nav-link">Essence</a></li>


                  <li class="nav-item" lang="es" ><a href="index" class="nav-link active" aria-current="page">Bienvenido</a></li>
                  <li class="nav-item" lang="es"><a href="weather" class="nav-link">Tiempo</a></li>
                  <li class="nav-item" lang="es"><a href="lighting" class="nav-link">Luces</a></li>
                  <li class="nav-item" lang="es"><a href="sound" class="nav-link">Sonido</a></li>
                  <li class="nav-item" lang="es"><a href="essence" class="nav-link">Esencia</a></li>



                </ul>
              </header>
            </div>
              <a class="navbar-brand flag logo" href="#">
                <img src="static/img/esRect.png"  class="flag"alt="" id="es">
              </a>
              <a class="navbar-brand flag" href="#">
                <img src="static/img/ukRect.png"  class="flag"alt="" id="en">
              </a>
            </div>
    </nav>


    <!-- welcome text --> 
    <br> 
    <h3 lang="en" class="text-center" id="myText">Welcome+ variable</h3>
    <h5 lang="en" class="text-center">Variable mensaje personalizado</h5>
    <p lang="en" class="text-center">We have generated a special profile for you that has been analyzed by the smart headboard but you can select other one here:</p>
    
    <h3 lang="es" class="text-center" >Bienvenido+ variable</h3>
    <h5 lang="es" class="text-center">Variable mensaje personalizado</h5>
    <p lang="es" class="text-center">Hemos generado un perfil que ha sido enviado al cabecero inteligente pero puede seleccionar otro aqui:</p>
    
    


    <div class="container mt-4">

      <div class="row">
        <!-- selected profile-->


        <div class="col">
          <img id="selectedImg" src="static/img/orion.JPG" class="float-left imagen2 "  alt="Responsive image" onclick="myFunction()">
        </div>


    <!-- carousel -->
       
        <div class="col">

          <div id="myCarousel" class="carousel slide bg-inverse  ml-auto mr-auto" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
              <li data-target="#myCarousel" data-slide-to="3"></li>

            </ol>
            <div class="carousel-inner" role="listbox">
              <div class="carousel-item active myCarouselImg">
                <img class="d-block w-100 img-fluid " src="static/img/pinguinos.jpg" alt="First slide" onclick="perfil1()">
                  <div class="carousel-caption">
                    <h3>Parejas</h3>
                  </div>
              </div>
              <div class="carousel-item myCarouselImg">
                <img class="d-block w-100 img-fluid " src="static/img/rana.jpg" alt="Second slide" onclick="perfil2()">
                  <div class="carousel-caption">
                    <h3>Single</h3>
                  </div>
              </div>
              <div class="carousel-item myCarouselImg">
                <img class="d-block w-100 img-fluid " src="static/img/tigres.jpg" alt="Third slide" onclick="perfil3()">
                  <div class="carousel-caption">
                    <h3>Family</h3>
                  </div>
              </div>
                <div class="carousel-item myCarouselImg">
                <img class="d-block w-100 img-fluid " src="static/img/atardecer.jpg" alt="Third slide" onclick="perfil4()">
                  <div class="carousel-caption">
                    <h3>Sweet</h3>
                  </div>
              </div>

              <div class="carousel-item myCarouselImg">
                <img class="d-block w-100 img-fluid " src="static/img/mar.jpg" alt="Second slide" onclick="perfil5()">
                  <div class="carousel-caption">
                    <h3>Calm</h3>
                  </div>
              </div>

              <div class="carousel-item myCarouselImg">
                <img class="d-block w-100 img-fluid " src="static/img/orion.JPG" alt="Second slide" onclick="perfil6()">
                  <div class="carousel-caption">
                    <h3>Dream</h3>
                  </div>
              </div>

              <div class="carousel-item myCarouselImg">
                <img class="d-block w-100 img-fluid " src="static/img/gotas.jpg" alt="Second slide" onclick="perfil7()">
                  <div class="carousel-caption">
                    <h3>Rain</h3>
                  </div>
              </div>

              <div class="carousel-item myCarouselImg">
                <img class="d-block w-100 img-fluid " src="static/img/chimenea.jpg" alt="Second slide" onclick="perfil8()">
                  <div class="carousel-caption">
                    <h3>Winter</h3>
                  </div>
              </div>

              <div class="carousel-item myCarouselImg">
                <img class="d-block w-100 img-fluid " src="static/img/campo.jpg" alt="Second slide" onclick="perfil9()">
                  <div class="carousel-caption">
                    <h3>Spring</h3>
                  </div>
              </div>


            </div>
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Anterior</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Siguente</span>
            </a>
          </div>

        
        </div>

      </div>
    </div>


    <footer class="fixed-bottom">
      <!-- Copyright -->
      <div class="row">
        <div class="col-2">
          <img src="static/img/EU.jpg" class="rounded mx-auto d-block imgFoot"  alt="Responsive image">
        </div>
        <div class="text-center col bg-light small-font-siz">
          <p class="small-font-size d-flex align-items-center  small list-group-item-light">txt
        </div>
        <div class="col-2">
          <img src="static/img/iPRODUCE_U13_01.png" class="rounded mx-auto d-block imgFoot"  alt="Responsive image">
        </div>
      </div>
    </footer>


    <script src="static/js/jquery-3.3.1.min.js"></script>
    <script src="static/js/bootstrap.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script src="static/js/lenguage.js"></script>
    <script src="static/js/index.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  </body>
</html>

i am starting using flask and maby this is newbe question :D When i go to index.html or "/" i get the css img js that are placed in the static folder i can see the web page.

and in console:

127.0.0.1 - - [25/May/2021 09:27:41] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [25/May/2021 09:27:42] "GET /static/js/index.js HTTP/1.1" 304 -
127.0.0.1 - - [25/May/2021 09:27:43] "GET /static/css/bootstrap.min.css HTTP/1.1" 304 -

But when i go to weather @app.route('/wheather/') def my_link(): i dont get them, it requires "/weather/static/xxx" so how can i redirect this to /static/xxx and not /wheather/static/xxx because this way i have to create a folder with the same files for each page. Thank you.

I get the resoult of the petition and print the method but get 404 because i dont have the folder weather.

127.0.0.1 - - [25/May/2021 10:09:32] "GET /weather HTTP/1.1" 308 -
La prevision del tiempo de la cidad de Paterna es:
La temperatura acutal es: 19.1
127.0.0.1 - - [25/May/2021 10:09:32] "GET /weather/ HTTP/1.1" 200 -
127.0.0.1 - - [25/May/2021 10:09:33] "GET /weather/static/css/mi.css HTTP/1.1" 404 -
127.0.0.1 - - [25/May/2021 10:09:33] "GET /weather/static/css/bootstrap.min.css HTTP/1.1" 404 -

Python code:

@app.route('/') def index():
    return render_template('index.html')


@app.route('/wheather/') def my_link():
    print("La prevision del tiempo de la cidad de " + str(r.json()['name']) + " es:")
    print("La temperatura acutal es: " + str(r.json()['main']['temp']))

return render_template('wheather.html')

Thank you for the help :D

score 0 · Accepted Answer · answered May 25 '21 at 08:36

0

Looks like your issue is with your template: how are you getting the links for your static files? Please, post a snippet from your template.

You should use flask's url_for() [1], [2] function to generated the links correctly, like:

<script src="{{ url_for('static', filename='js/index.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" >

answered May 25 '21 at 08:36

Fabiano

612
8
13

Just added snippet, the weather.html is the same, just changing the body content. I will check url_for() now thank you. Maybe i am not familliar with python and flask. I know that we have a structure in php where i have the partials etc and the code is not repeating(the navbar footer etc) But i dont know how to do it in flask and python... maybe this is the problem . – Daniel IG May 25 '21 at 09:41
Just fixed the navbar adding "/" on each herf like this
Weather

Daniel IG

May 25 '21 at 10:00

score 0 · Answer 2 · answered May 25 '21 at 11:26

0

Thank you @Fabiano OK the solution is this: In navbar call with /path

 <li class="nav-item" lang="es"><a href="/weather" class="nav-link">Tiempo</a></li>
 <li class="nav-item" lang="es"><a href="/lighting" class="nav-link">Luces</a></li>

And the css and js files:

    <script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" >

answered May 25 '21 at 11:26

Daniel IG

31
6

if you have a function `my_link()` with a route `/weather` you can also put `Tiempo` on your links, this way if you ever change the routes (say to `/myporta/weather`) all the links will be updated automatically. – Fabiano May 25 '21 at 18:33

Flask file structure css js img

2 Answers2