Uso de archivos estáticos: imágenes

Después de media hora sin poder poner la imagen y con el error de image not found, encontré que es bastante útil darle los path a Flask desde el principio

app = Flask(__name__, template_folder='../templates', static_folder='../static')

el … simplemente es para decirle que empieza en la carpeta donde esta, hacia atras

Luis Val

Mis notas hasta el momento:

Uso de condicionales

Ejemplo de estructura:

    {% if CONDITION %}
        <p>Bloque de contenido</p>
    {% else %}
        <p>Bloque de contenido</p>
    {% endif %}

Ejemplo de uso:

    {% if user_ip %}
        <h1>Hello World Platzi, tu IP es {{ user_ip }}</h1>
    {% else %}
        <p>No tienes una IP</p>
    {% endif %}

<h1>Uso de bucles</h1>

Una vez se envie una variable al elemento(plantilla html), es posible hacer recorridos, siguiendo la sintaxis:

    {% for ITEMS in COLECTION_ELEMENTS %}
        <p>Item</p>
    {% endfor %}

Ejemplo:

    {% for description in array_descriptions %}
        <p>{{description}}</p>
    {% endfor %}

Uso de url_for

La funcion url_for se puede utilizar para consumir archivos estaticos y redirecionar a otras páginas dentro del proyecto.

<h1>Uso archivos estativos</h1>

Se llaman a traves de la funcion url_for, tiene 2 parámetros:

1.- path = 'static’
2.- filename = [Ruta del archivo]

Ejemplo:

    <link rel="stylesheet" href="{{ url_for(path = 'static', filename = 'css/main.css')}}">
    <img src="{{url_for(path = 'static', filename = 'images/platzi.png')}}" alt="Platzi logo">

<h1>Uso de redireccionamiento a paginas</h1>

Se realiza el redirecciónamiento a traves de la funcion url_for, en el primer
atributo, se explifica el path del archivo(ruta), ejemplo:

    <li><a href="{{url_for(path = 'index')}}">Inicio</a></li>

Uso Macro(funciones en plantillas)

Para crear componentes(funciones y código) se define un tipo(macro), el nombre de la funcion y los pámetros.

<h1>Ejemplo de estructura:</h1>

    {% macro NAME_FUNCTION(PARAM_1, PARAM_2) %}
        <p>Bloque de contenido<p>
    {% endmacro %}

Ejemplo de uso:

Se define un archivo render_item_list.html

    {% macro render_item(todo) %}
        <li>Descripción: {{todo}} </li>
    {% endmacro %}

Se define un archivo home.html

    {% import 'render_item_list.html' as macros %}

    {% for description in arrDescriptions %}
        {{ macros.render_item(description) }}
    {% endfor %}

Uso de plantillas(Block)

Ejemplo de archivo padre:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            {% block title %} Flask Platzi | {% endblock %}
        </title>
    </head>
    <body>
        {% block content %}
        {% endblock %}
    </body>
    </html>

Ejemplo de archivo hijo(file.html)

    {% extends './base.html' %}
    {% block title %}
        {{super()}}
        Bienvenido
    {% endblock %}

    {% block content %}
        <p>Bloque de contenido del archivo hijo </p>
    {% endblock %}

Si hacen cambios en Windows y no los ven reflejados en el navegador presionen shift + F5 🧐

Jorge Andres Muñoz Becerra

Excelente el curso, excelente el profesor, ya había visto algo de flask en algún otro curso y lo presentaban mucho mas complejo, no se si es por lo bien explicado, pero todo parece muy sencillo!!!

Maclovinhm

Yo estoy usando esta forma, ya que jalé el mismo código de mi proyecto en PHP y funciona igual. ¿En qué situaciones deberia usar ‘url_for’?

<link rel="stylesheet" type="text/css" href="static/css/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/css/main.css">```

Jorge Andres Muñoz Becerra

Mis notas sobre lo que vamos hasta el momento:

Flask abre main.py
En la funcion index se saca la variable response
- A esta se le asigna la ruta /hello
- Se le setea la cookie de la IP mediante “response.set_cookie(‘user_ip’, user_ip)”
- Desde esta funcion creo que se llama a hello
- Esta funcion Index retorna response
Se ejecuta la funcion hello
- A la variable user_ip se le asigna la IP adquirida como cookie en Index por medio de request.cookies.get(‘user_ip’)
  -Se crea el diccionario que va a tener el contexto “context” en este va user_ip y los To do
- La funcion hello retorna el render de hello.html asi: return render_template(‘hello.html’, **context)
- con el **context lo que se esta haciendo es “abrir” el diccionario, para que no pase en formato (llave: valor), esto se hace para que las variables sean mas faciles de usar.
En hello.html se “extiende” base.html, esto quiere decir que se trae base para poder usarlo
- Se extiende tambien macros.html
- Lo primero que se usa es el “block title” de base.html, esto sirve para poder armar el titulo de la pagina
- Con el “Super()” lo que se hace es “importar” de base.html como si fuera una clase padre el titulo y se le agrega el “Bienvenido”
- Luego se crea el “block content” ahi va a ir el contenido de la pagina
  - En este se crea primero una condicional, para validar si viene la IP del usuario como cookie.
  - Si viene la IP:
    {se crea un h1 con el titulo inicial}
    {se crea un h2 con un subtitulo}
    {se crea una lista sin orden con un for loop dentro}
    {dentro del for se llama el “metodo” render_todo de macros.html
    [En macros.html lo que hace el metodo render_todo es por cada todo “imprime?” “Descripcion: + (to do”]}
  - Si no viene la IP:
    {Llama la funcion hello, para poder iniciar todo de nuevo}
    5)Base.html:
- Esta la estructura basica de html
- En el title se crea el “block title” mencionado anteriormente con la frase “Flsk Platzi |”, esta se va a usar como el inicio de los titulos y sirve como padre para las demas rutas
- se hace referencia al stylesheet de css asi: <link rel=“stylesheet” type=“text/css” href="{{url_for(‘static’, filename=‘css/main.css’) }}">
- En el Body:
  - Se crea un Header, el cual invoca a navbar.html, en este se trae una imagen, se da la posibilidad de ir al inicio y de ir a la pagina de platzi asi : {% include ‘navbar.html’ %}
  - Se invoca el “block content” que se creo en hello.html asi: {% block content %}{% endblock %}
navbar.html:
- en una ul se cargan los siguientes items:
  - una imagen que se controla asi: <img src="{{ url_for(‘static’, filename=‘images/ mtg1.jpeg’) }}" alt=“Logo MTG”> <h1>url_for una funcion de flask: https://kite.com/python/docs/flask.url_for</h1> <h1>en el rpimer argumento ‘static’ se pone la carpeta en la que se encuentra la imagen, en el sefundo argumento el nombre del archivo, como en este caso hay una carpeta mas se pone el resto de la ruta en el filename, como ultimo argumento de img de html se pone el alt, que es el nombre que debe aparecer si la imagen no se puede cargar</h1>
  - Las siguientes son los items de la lista “li” en el primero tambien con un url_for se llama la funcion ‘Index’ esta se encuentra en main.py, el segundo es la direccion a Platzi
    7)macros.html:
    -Se crea la macro que va a “imprimir” las listas de los To Do asi:
    {% macro render_todo(todo) %}
    <li>Descripción: {{ todo }}</li>
    {% endmacro %}

Raúl F. Bautista Gómez

A mi me pasaba mucho que siempre Chrome ‘cacheaba’ las imágenes por lo que tenia que ponerles un hash para que cada que cambiaba una imagen se mostrara correctamente y no decirles a mis usuarios que pulsaran ctrl + F5.

Victor Martinez Giron

hace 2 años

Resulta que no me cargaba mi estilo, y para mi sorpresa despues de una hora revisar. Era que tenia el archivo .css en una carpeta equivocada de mi entorno virtual. Asi es, estaba mal parqueada jaja

Daniel Carmona

Quedo todo muy claro para utilizar imágenes estáticos

Asbel Jose Herrera Morales

hard reload en mac y google chrome. cmd + shift + r

Yelson Chevarrias Huaman

Flask permite extenderse en funciones del template:

from flask import Flask
from flask.helpers import url_for
app = Flask(__name__)


def static(*args, **kwargs):
    if len(args) == 1:
        return url_for('static', filename=args[0], **kwargs)
    return url_for('static', **kwargs)


# {{ static('style.css') }} sería igual a:
# {{ url_for('static', filename = 'style.css') }} 
app.add_template_global(
    static, 'static',
)

# {{ potenciador(5) }} => 25 
# {{ potenciador(10) }} => 100 ... 
app.add_template_global(
    lambda x: x**2, 'potenciador',
)

# y así para n casos de uso....

Reinaldo Mendoza

Alguien mas que use WSL y que tenga problemas problemas repentinos para que localhost funcione?

La mayoria de veces funciona sin problema pero de repente se cuelga

Antoine J. Manuel Gutierrez.

hard reload = cntrl + mayus + r ó chif + f5

Joaco Carreira

Para los que no se les carga el CSS, mi problema era la memoria cache de navegador. Refrescando con ctrl+F5 deberia funcionar.

Hermes Aguilar

Yo lo primero que aprendí viene del frontend.¿Alguien puede explicarme porqué es mejor hacer esto desde el backend?

Carmen Sánchez Salgado

Un resumen sobre recursos estáticos

Static files go in the static/ directory.
Separate third-party libraries from your own static files.
Specify the location of your favicon in your templates.
Use Flask-Assets to insert static files in your templates.
Flask-Assets can compile, combine and compress your static files.

Fuente:
http://exploreflask.com/en/latest/static.html

Matias Paz

hace 4 meses

Buenas. Tengo un problema. No muestra el logo. Esta bien tipeado y en las carpetas tal cual describe el profe del curso. Alguien que pueda ayudarme?![](https://static.platzi.com/media/user_upload/image-16f1890d-3fec-43d6-b338-e1da67c065a6.jpg)![](https://static.platzi.com/media/user_upload/image-9a28de8d-7231-4483-bfa5-36d3c2beae14.jpg)![]()

Juan Camilo Gómez Tabares

hace 2 años

Al momento de aprender flask uno busca cómo crear microservicios o APIs. Pero este curso se ha basado en cómo manejar templates…no digo que no sea importante, pero no es el eje del desarrollo backend

Omar Rodríguez Aldama

        <img src="{{ url_for('static',filename='images/platzi.png')}}" alt="platzi logo">

Miguel Ángel Reyes Moreno

hace 2 años

Uso de archivos estáticos: imágenes

Creamos un directorio ‘static’ donde vivirán las imágenes y algunos archivos de css.

Insertamos la imagen en el navbar:

<nav>
    <ul>
        <img
            src="{{ url_for('static', filename='images/bocetoRock.png') }}"
            alt="Boceto Rock"
        />
        <li><a href="{{ url_for('index') }}">Ir a inicio</a></li>
        <li><a href="https://midiaenunosminutos.com" target="_blank">Ir a mi blog</a></li>
    </ul>
</nav>

Y hacemos referencia al archivo de CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} Curso Flask | {% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
    <header>
        {% include 'navbar.html' %}
    </header>
    {% block content %}
    {% endblock %}
</body>
</html>

Alexander Moreno Córdoba

<img src="{{url_for(‘static’, filename=‘images/avatar.png’)}}" alt=“Mi foto”> este es el código para cargar una imagen estática, tengan en cuenta que antes de de filename debe haber una coma, si esta coma no está le arroja un error

Cesar Hernández Ramírez

Recuerden en windows es importante la dirección del diagonal al ingresar rutas

Gonzalo García

Solo por curiosidad, ¿por qué está usando Intellij IDEA y no simplemente PyCharm?

Gildder Guerrero Ramirez

Las aplicaciones web a menudo requieren archivos estáticos como archivos CSS o JavaScript.

Jean Carlos Nuñez Hernandez

hace 6 años

Static folder para manejar archivos estaticos

Gildder Guerrero Ramirez

Para usar el archivo CSS y JavaScript estático en la plantilla index.html, necesitamos usar el nombre del punto final ‘estático’ especial:

{{ url_for('static', filename = 'style.css') }}

Entonces, puede contener:

<link href="{{ url_for(‘static’, filename = ‘style.css’) }}" rel=“stylesheet”>

<script src="{{ url_for(‘static’, filename = ‘script.js’) }}"></script>

Luis Ernesto Román Chitala

Todo en orden

wilantury

Excelente, siento que ya con lo que he aprendido puedo hacer lo que sea. Es simple.

Daniel Paloma Murcia

Tech tip: How to do hard refresh in Chrome, Firefox and IE?: link

Pedro Luis López Oviedo

Me encanta la metodologia que utilizan en este curso, directo a la practica, obviamente ya teniendo las bases de python.

Jose Antonio Rojas Ollarves

TIP El hardreset tambien lo puedes aplicar solamente borrando el cache de la pagina

Francisco Garcia [C6]

Gracias

Jhonatan David Ibarra Lavado

esto esta genial , el profe en tan poco tiempo explica muy bien

Julio César Zaravia Paredes

¡Hola Comunidad!
.
Justamente había dejado en un video anterior la forma de como enlazar con archivos CSS:
.
👉 https://platzi.com/comentario/2121298/
.
Pensé que no se iba a tocar ese detalle en este curso pero ya veo que si. Que gusto 👌.
.
¡Saludos!

Leandro Ayala