Uso de archivos estáticos: imágenes

Clase 13 de 36 • Curso de Flask

Contenido del curso

Fundamentos de Flask

Uso de templates y archivos estáticos

Extensiones de Flask

Proyecto

Tomar examen

Resumen

¿Cómo manejar archivos estáticos en Flask?

Manejar archivos estáticos como imágenes y archivos CSS es esencial para darle estilo y funcionalidad a nuestra aplicación web. En Flask, estos archivos se gestionan de una forma similar a los templates, permitiendo una integración sencilla y estructurada.

Crear el directorio de archivos estáticos

Primero, necesitamos definir un directorio especial en la raíz del proyecto para alojar estos archivos:

Directorio principal: Se llama static.
Subdirectorios: Para mantener el orden, crea subdirectorios como images para imágenes y css para estilos.

Por ejemplo, dentro del directorio static, puedes crear:

/static
    /images
    /css

Cargar imágenes en un proyecto Flask

Para incluir una imagen en tu aplicación web, sigue estos pasos:

Añade la imagen: Guarda el logo o imagen que desees en el subdirectorio images, por ejemplo, platzi.png.
Referencia desde HTML: Utiliza el tag de imagen con la función url_for para enlazar tu imagen correctamente.

Dentro de tu archivo HTML, el código para mostrar la imagen se vería así:

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

Refrescar archivos estáticos en el navegador

A veces, los archivos estáticos se quedan en caché del navegador, como sucede comúnmente en Google Chrome. Para asegurarte de que los cambios se reflejan correctamente, realiza un "hard reload" con:

Mac: Command + Shift + R

Esto garantiza que tu archivo actualizado se cargue en el navegador.

Estilizar con CSS en Flask

Para aplicar estilos mediante CSS, el proceso es muy similar al de las imágenes:

Crea un archivo CSS: En el directorio css, por ejemplo main.css.
Define tus reglas: A continuación, define tus estilos dentro de este archivo. Por ejemplo, para ajustar el tamaño de las imágenes:

img {
    max-width: 30px;
}

Integra el CSS en HTML: Asegúrate de enlazar el CSS en el head de tu archivo HTML. Utiliza url_for de la siguiente manera:

<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

Recuerda hacer un "hard reload" para confirmar que los estilos aplican correctamente.

Modificar la fuente con CSS

Si deseas cambiar la fuente de toda tu aplicación a sans-serif, actualiza tu archivo CSS de esta forma:

html {
    font-family: sans-serif;
}

Una vez más, verifica el cambio refrescando adecuadamente el navegador.

Manejar archivos estáticos en Flask es fundamental para crear aplicaciones web dinámicas y estéticamente atractivas. Continúa explorando y experimentando con estos conceptos para darle un toque personal a tus proyectos. Mantente motivado y sigue aprendiendo; cada paso te acerca a convertirte en un experto en desarrollo web.

Comentarios

Juan Pablo Gómez García

student•

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

rodrigo david rodriguez

student•

#quetrucazo, gracias !

Fredy Mendoza Vargas

student•

Muchas Gracias!

Luis fernando Valderrama Gastiaburu

student•

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 %}

Uso de bucles

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.

Uso archivos estativos

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">

Uso de redireccionamiento a paginas

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.

Ejemplo de estructura:

    {% 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 %}

Jhon Jairo Bautista Beltrán

student•

Gracias, excelentes apuntes, me sirvieron mucho

Dayse Poma

student•

Hola una consulta, estuve aplicando el parámetro path = static A Través de url_for y al cargar la pagina me comenzaron a salir errores. Entre ellos uno que decia que me faltaba un método y al momento de que retire este parámetro, no tuve problema alguno.

Brayan Potosi Dominguez

student•

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

Edward Toledo López

student•

Llebaba media hora con esto. GRACIAS!!!!!

Eliaz Bobadilla

student•

En Linux ambien funciona.

Jorge Andres Muñoz Becerra

student•

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!!!

Luis Mendoza

student•

¿Cuál es la diferencia técnica de usar 'url for' y 'src'?

Adrián Andrés Sosa

student•

Hola, la diferencia que tienen esas dos formas de hacer referencia a un recurso es que con "url_for" estas generando la url dinámicamente a partir de “static" (eso puede cambiar en un futuro) y si le pasas el src=“static/images/platzi.png” directamente va a quedar estático.

Julio César Zaravia Paredes

student•

Hola.

Lo que dice @adrisoft es correcto, adicional a eso debes saber que en el curso estamos usando el motor de plantillas Jinja2, que ++de manera predeterminada reconocer carpetas como templates y static++ (ubicadas en la raíz de tu proyecto).

Por lo que si usas las rutas directas simplemente estarás llamando una imagen en una carpeta, pero si utilizas la llamada a variables que nos da el framework pues estás permitiendo al motor que renderice el contenido, no solo los archivos Python o los HTML sino también los archivos complementarios como imágenes y archivos CSS.

¡Saludos!

Luis Mendoza

student•

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">```

Carlos Cuevas Sosa

student•

No es buena idea poner de manera directa las rutas hacia los archivos, así como en general cualquier constante, por si éstos llegan a cambiar. Según la documentación de Flask, si la función url_for no encuentra la ruta especificada, se produce un error y ya no carga la página.

Wilson Delgado

student•

@Carlos buen aporte, tambien tenía esa duda

Jorge Andres Muñoz Becerra

student•

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">
    url_for una funcion de flask: https://kite.com/python/docs/flask.url_for
    
    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
  - 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

student•

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.

Sara Galván Ortega

student•

A mí también me pasó...

jean franco llantoy roca

student•

bro , algun ejemplo de lo que dices

Victor Martinez Giron

student•

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

Andrés Molina

student•

no pud continuar con el curso de flask, por favor actualicenlo. Gracias!!

John Cardenas

student•

Hola, Andres :)

Recuerda que puedes enviar tus sugerencias a cursos@platzi.com. De esta forma te aseguras que podrán ver que te gustaría ver en un nuevo curso de Flask.

Mauricio Julian

student•

Andres, coméntanos cual es tu problema para ver como podemos ayudarte, yo el curso lo empecé el lunes pasado y solo me quedan 3 clases y no he tenido ningún problema!

Leandro Ayala

student•

No me carga ni la imagen ni los archivos css! ayuda! :(

Aarón González

student•

¡Hola! Compártenos el código por aquí y así podemos echarle un ojo ;)

Daniel Carmona

student•

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

Asbel Jose Herrera Morales

student•

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

Yelson Chevarrias Huaman

student•

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

student•

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.

student•

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

Joaco Carreira

student•

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

student•

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

jean franco llantoy roca

student•

Una pagina se divide en 3 partes : frontend , backend , base de datos , y algunos casos crear api.

Se divide de esta forma para que la transferencia de base de datos sea hacia el backend y no directamente hacia el frontend por temas de seguridad , imaginate que los datos de tu cuenta de usuario de platzi esten disponibles a simple vista.

EL backend vendria a ser como el puente entre en frontend y la base de datos

Julio César Zaravia Paredes

student•

Hola Hermes.

Bueno, debemos considerar que** estamos usando para este curso el ++framework Flask++, que nos da la posibilidad de estructurar nuestro proyecto para poder hacer uso de los beneficios que provee**.

Dicho esto, según yo lo veo, las diferencias entre el backend y el frontend siguen siendo claras.

Bajo comunicación del equipo ++los diseñadores web deberían poder trabajar en los archivos de la carpeta templates y static++, ++conociendo claro está la nueva estructura y "lenguaje" que deberán utilizar para hacer llamado a sus archivos++ CSS, imágenes o demás recursos de diseño.

Mientras que el backend servirá para este caso particular como lenguaje de adaptabilidad o "pegamento" para mantener las reglas del Framework.

++Claro está el backend seguirá trabajando la funcionalidad del sitio como procesamiento de información, envío de formularios, etc.++

Así que no te preocupes que si lo notas seguimos usando HTML y CSS solo que debemos adaptar nuestros conocimientos a esta herramienta cuando sea necesario utilizarla.

Espero te sirva mi opinión.

Saludos.

Carmen Sánchez Salgado

student•

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

bruno guerra solano

student•

tengo una pregunta como puedo setear estilos diferentes por cada template si en mi base.html solo le agrego uno asi como con el uso de los bloques puede heredar de base y meterle un css diferente

    <!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>

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

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

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....

Uso de archivos estáticos: imágenes

Fundamentos de Flask

Qué aprenderás sobre Flask

¿Cómo funcionan las aplicaciones en internet?

¿Qué es Flask?

Instalación de Python, pip y virtualenv

Hello World Flask

Debugging en Flask

Request y Response

Ciclos de Request y Response

Uso de templates y archivos estáticos

Templates con Jinja 2

Estructuras de control

Herencia de templates

Include y links