No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Flask

Curso de Flask

Bernardo Cassina

Bernardo Cassina

Uso de archivos estáticos: imágenes

13/36
Recursos

Aportes 32

Preguntas 8

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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 🧐

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

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.

Mis notas sobre lo que vamos hasta el momento:

**

  1. Flask abre main.py
  2. 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
  3. 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.
  4. 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 %}
  5. 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 %}

**

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

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

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

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

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

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

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

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>

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

<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

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

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

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

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

Static folder para manejar archivos estaticos

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>

Todo en orden

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

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

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

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

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

Gracias

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

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

No me carga la imagen ni los archivos css. Ayuda! jaja Tengo windows.