Chapters

18 Chapters | 1:50:35 |

01

Creando un Nuevo Proyecto de Symfony 5

6:05
02

Bienvenidos a nuestra pequeña Aplicación y setup de PhpStorm

5:30
03

Rutas, Controladores & Respuestas!

5:56
04

Anotaciones y Rutas con Comodín

6:10
05

La amada herramienta bin/console

2:42
06

Flex, Recetas & Aliases

6:26
07

Cómo Funcionan las Recetas

3:06
08

La Receta de Twig

3:46
09

Twig ❤️

10:14
10

Profiler: El mejor amigo de tu Debugger

6:46
11

Assets: CSS, Imágenes, etc

9:58
12

Generando URLs

5:11
13

Rutas JSON en la API

6:29
14

JavaScript, AJAX y el Profiler

7:12
15

Rutas Inteligentes: Solo POST y Validación de {Comodín}

4:04
16

Objetos Servicio

8:25
17

Hola Webpack Encore

4:05
18

Webpack Encore: La Grandeza de Javascript

8:30

This tutorial has a new version, check it out!

> Symfony 5 > Desarrollo Encantador en Symfony 5

11.

Assets: CSS, Imágenes, etc

Autoplay

Previous Challenge

Next Challenge

Vamos muy bien pero, Cielos! Nuestro sitio está muy feo. Es hora de arreglarlo.

Si descargas el código del curso en esta página, después de que lo descomprimas, encontrarás el directorio start/ con el directorio tutorial/ ahí dentro: el mismo directorio tutorial/ que ves aquí. Vamos a copiar algunos archivos de ahí en los próximos minutos.

Copiando el Layout Base y el Archivo CSS principal

El primero es base.html.twig. Lo voy a abrir, copiar el contenido, cerrarlo, y luego abriré nuestro templates/base.html.twig. Pega el nuevo contenido aquí.

            Copy Code

                        29 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
                <head>
        
                    <meta charset="UTF-8">
        
                    <title>{% block title %}Welcome!{% endblock %}</title>
        
                    {% block stylesheets %}
        
                        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        
                        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spartan&display=swap">
        
                        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
        
                        <link rel="stylesheet" href="/css/app.css">
        
                    {% endblock %}
        
                </head>
        
                <body>
        
                    <nav class="navbar navbar-light bg-light" style="height: 100px;">
        
                      <a class="navbar-brand" href="#">
        
                        <i style="color: #444; font-size: 2rem;" class="pb-1 fad fa-cauldron"></i>
        
                        <p class="pl-2 d-inline font-weight-bold" style="color: #444;">Cauldron Overflow</p>
        
                      </a>
        
                      <button class="btn btn-dark">Sign up</button>
        
                    </nav>
        
                    {% block body %}{% endblock %}
        
                    <footer class="mt-5 p-3 text-center">
        
                        Made with <i style="color: red;" class="fa fa-heart"></i> by the guys and gals at <a style="color: #444; text-decoration: underline;" href="https://symfonycasts.com">SymfonyCasts</a>
        
                    </footer>
        
                    {% block javascripts %}{% endblock %}
        
                </body>
        
            </html>

Esto no fué un gran cambio: sólo agregó algunos archivos CSS - incluyendo Bootstrap - y un poco de HTML básico. Pero tenemos los mismos bloques que antes: {% block body %} en el medio, {% block javascripts %} , {% block title %}, etc.

Date cuenta que los link tags están dentro del bloque llamado stylesheets. Pero eso aun no es importante. Explicaré porque está hecho de esa forma dentro de poco.

            Copy Code

                            Show All Lines

                        29 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
                <head>
        
                Show Lines

                                                    // ... lines 4 - 5
                            
                    {% block stylesheets %}
        
                        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        
                        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spartan&display=swap">
        
                        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
        
                        <link rel="stylesheet" href="/css/app.css">
        
                    {% endblock %}
        
                </head>
        
                Show Lines

                                                    // ... lines 13 - 27
                            
            </html>

Uno de los link tags está apuntando a /css/app.css. Ese es otro archivo que vive en el directorio tutorial/. De hecho, selecciona el directorio images/ y app.css y cópialos. Ahora, selecciona el directorio public/ y pégalos. Agrega otro directorio css/ y mueve app.css adentro.

Recuerda: el directorio public/ es nuestro documento raíz. Así que si necesitas que un archivo sea accesible por un usuario del navegador, entonces necesita vivir aquí. La ruta /css/app.css cargará el archivo public/css/app.css.

Vamos a ver como se ve! Muévete hacia tu navegador y refresca. Mucho mejor. El centro aun se ve terrible... pero eso es porque no hemos agregado ninguna etiqueta HTML al template para esta página.

A Symfony le Importan tus Assets

Así que hagamos una pregunta... y respondámosla: que funcionalidad nos ofrece Symfony cuando se trata de CSS y JavaScript? La respuesta es... ninguna... o muchas!

Symfony tiene dos niveles diferentes de integración con CSS y JavaScript. Por el momento estamos usando el nivel básico. De hecho, por ahora, Symfony no está haciendo nada por nosotros: creamos un archivo CSS, luego le agregamos un link tag muy tradicional con HTML. Symfony no está haciendo nada: todo depende de ti.

El otro tipo de integración de mayor nivel es utilizar algo llamado Webpack Encore: una fantástica librería que maneja minificación de archivos, soporte de Sass, soporte a React o VueJS y otras muchas cosas. Te voy a dar un curso rápido sobre Webpack Encore al final de este tutorial.

Pero por ahora, lo vamos a mantener simple: Crearás archivos CSS o de JavaScript, los pondrás dentro del directorio public/, y luego crearás un link o script tag que apunte a ellos.

La No Tán Importante Función asset()

Bueno, de hecho, incluso con esta integración "básica", hay una pequeña funcionalidad de Symfony que debes de utilizar.

Antes de mostrartelo, en PhpStorm abre preferencias... y busca de nuevo por " Symfony" para encontrar el plugin de Symfony. Ves esa option de directorio web? Cambiala a public/ - solía ser llamada web/ en versiones anteriores de Symfony. Esto nos ayudará a tener un mejor autocompletado próximamente. Presiona "Ok".

Así es como funciona: cada vez que hagas referencias a un archivo estático en tu sitio - como un archivo CSS, JavaScript o imagen, en vez de solo escribir /css/app.css, debes de usar la función de Twig llamada asset(). Entonces, {{ asset() }} y luego la misma ruta que antes, pero sin la / inicial: css/app.css.

            Copy Code

                            Show All Lines

                        29 lines
            |
            templates/base.html.twig
        
                Show Lines

                                                    // ... line 1
                            
            <html>
        
                <head>
        
                Show Lines

                                                    // ... lines 4 - 5
                            
                    {% block stylesheets %}
        
                Show Lines

                                                    // ... lines 7 - 9
                            
                        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
        
                    {% endblock %}
        
                </head>
        
                Show Lines

                                                    // ... lines 13 - 27
                            
            </html>

Qué es lo que hace está increíble función asset()? Prácticamente.. nada. De hecho, esto va a retornar exactamente la misma ruta que antes: /css/app.css.

Entonces porque nos molestamos en utilizar una función que no hace nada? Bueno, en realidad hace dos cosas... las cuales pueden o no interesarte. Primero, si decides instalar tu aplicación en un subdirectorio de un dominio - como por ejemplo ILikeMagic.com/cauldron_overflow, la función asset() automáticamente agrega el prefijo /cauldron_overflow a todas las rutas. Grandioso! si es que te interesa.

La segunda cosa que hace es más útil: si decides instalar tus assets a un CDN, con agregar una linea a un archivo de configuración, repentinamente, Symfony agregará el prefijo en todas las rutas con la URL de tu CDN.

Asi que... en realidad no es tán importante, pero si utilizas asset() en todos lados, serás feliz en caso de que luego lo necesites.

Pero... si refrescamos... sorpresa! El sitio exploto!

Acaso olvidaste correr composer require symfony/asset? La función asset no existe.

Que tan genial es eso? Recuerda, Symfony empieza en pequeño: instalas las cosas sólo cuando las necesitas. En este caso, estamos tratando de utilizar una funcionalidad que no está instalada... por lo tanto Symfony nos da el comando exacto que tenemos que correr. Copialo, abre la terminal y ejecuta:

composer require symfony/asset

Cuando termine... regresa al navegador y... funciona. Si observas la fuente HTML y buscas app.css... Asi es! está imprimiendo la misma ruta que antes.

Mejorando la página "show"

Hagamos que el centro de nuestra página se vea un poco mejor. De vuelta en el directorio tutorial/, abre show.html.twig, copia el contenido, ciérralo, luego abre nuestra versión: templates/question/show.html.twig. Pega el nuevo código.

            Copy Code

                        59 lines
            |
            templates/question/show.html.twig
        
            {% extends 'base.html.twig' %}
        
            {% block title %}Question: {{ question }}{% endblock %}
        
            {% block body %}
        
            <div class="container">
        
                <div class="row">
        
                    <div class="col-12">
        
                        <h2 class="my-4">Question</h2>
        
                        <div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);">
        
                            <div class="q-container-show p-4">
        
                                <div class="row">
        
                                    <div class="col-2 text-center">
        
                                        <img src="/images/tisha.png" width="100" height="100">
        
                                    </div>
        
                                    <div class="col">
        
                                        <h1 class="q-title-show">{{ question }}</h1>
        
                                        <div class="q-display p-3">
        
                                            <i class="fa fa-quote-left mr-3"></i>
        
                                            <p class="d-inline">I've been turned into a cat, any thoughts on how to turn back? While I'm adorable, I don't really care for cat food.</p>
        
                                            <p class="pt-4"><strong>--Tisha</strong></p>
        
                                        </div>
        
                                    </div>
        
                                </div>
        
                            </div>
        
                        </div>
        
                    </div>
        
                </div>
        
                <div class="d-flex justify-content-between my-4">
        
                    <h2 class="">Answers <span style="font-size:1.2rem;">({{ answers|length }})</span></h2>
        
                    <button class="btn btn-sm btn-secondary">Submit an Answer</button>
        
                </div>
        
                <ul class="list-unstyled">
        
                    {% for answer in answers %}
        
                        <li class="mb-4">
        
                            <div class="d-flex justify-content-center">
        
                                <div class="mr-2 pt-2">
        
                                    <img src="/images/tisha.png" width="50" height="50">
        
                                </div>
        
                                <div class="mr-3 pt-2">
        
                                    {{ answer }}
        
                                    <p>-- Mallory</p>
        
                                </div>
        
                                <div class="vote-arrows flex-fill pt-2" style="min-width: 90px;">
        
                                    <a class="vote-up" href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
        
                                    <a class="vote-down" href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
        
                                    <span>+ 6</span>
        
                                </div>
        
                            </div>
        
                        </li>
        
                    {% endfor %}
        
                </ul>
        
            </div>
        
            {% endblock %}

Recuerda, aquí no está pasando nada importante: seguimos sobreescribiendo el mismo bloque title y body. Estamos usando la misma variable question y seguimos haciendo el mismo ciclo sobre answers aquí abajo. Solo tenemos mucha más sintaxis HTML... lo cual... tu sabes... hace que luzca bien.

Al refrescar... mira! Hermoso! De vuelta en el template, nota que esta página tiene algunas tags img... pero no están usando la función asset(). Hay que arreglarlo. Utilizaré un atajo! Simplemente escribo "tisha", oprimo tab y... boom! el resto se agrega solo! Buscar por img... y reemplaza también esta con "tisha". Te preguntas quien es tisha? Oh, es solo una de los multiples gatos que tenemos aquí en el staff de SymfonyCasts. Esta controla a Vladimir.

            Copy Code

                            Show All Lines

                        59 lines
            |
            templates/question/show.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="container">
        
                <div class="row">
        
                    <div class="col-12">
        
                Show Lines

                                                    // ... line 9
                            
                        <div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);">
        
                            <div class="q-container-show p-4">
        
                                <div class="row">
        
                                    <div class="col-2 text-center">
        
                                        <img src="{{ asset('images/tisha.png') }}" width="100" height="100">
        
                                    </div>
        
                Show Lines

                                                    // ... lines 16 - 23
                            
                                </div>
        
                            </div>
        
                        </div>
        
                    </div>
        
                </div>
        
                Show Lines

                                                    // ... lines 29 - 36
                            
                <ul class="list-unstyled">
        
                    {% for answer in answers %}
        
                        <li class="mb-4">
        
                            <div class="d-flex justify-content-center">
        
                                <div class="mr-2 pt-2">
        
                                    <img src="{{ asset('images/tisha.png') }}" width="50" height="50">
        
                                </div>
        
                Show Lines

                                                    // ... lines 44 - 52
                            
                            </div>
        
                        </li>
        
                    {% endfor %}
        
                </ul>
        
            </div>
        
            {% endblock %}

Por cierto, en una aplicación real, en vez de que estas imágenes sean archivos estáticos en el proyecto, podrían ser archivos que los usuarios suben. No te preocupes: tenemos todo un tutorial sobre como manejar la subida de archivos.

Asegurate de que esto funciona y... si funciona.

Puliendo la Homepage

La última página que no hemos estilizado es el homepage... la cual en este momento... imprime un texto. Abre el controlador: src/Controller/QuestionController.php. Asi es! Solamente retorna un nuevo objeto Response() y texto. Podemos hacerlo mejor. Cambialo por return $this->render(). Llamemos al template question/homepage.html.twig. y... por ahora... No creo que necesitemos pasar alguna variable al template... Asi que dejaré vacío el segundo argumento.

            Copy Code

                            Show All Lines

                        36 lines
            |
            src/Controller/QuestionController.php
        
                Show Lines

                                                    // ... lines 1 - 8
                            
            class QuestionController extends AbstractController
        
            {
        
                Show Lines

                                                    // ... lines 11 - 13
                            
                public function homepage()
        
                {
        
                    return $this->render('question/homepage.html.twig');
        
                }
        
                Show Lines

                                                    // ... lines 18 - 34
                            
            }

Dentro de templates/question/, crea un nuevo archivo: homepage.html.twig.

La mayoría de los templates empiezan de la misma forma. Genial consistencia! En la parte de arriba, {% extends 'base.html.twig' %}, {% block body %} y {% endblock %}. En medio, agrega más HTML para ver si esto funciona.

            Copy Code

                        6 lines
            |
            templates/question/homepage.html.twig
        
            {% extends 'base.html.twig' %}
        
            {% block body %}
        
                <h1>Voilà</h1>
        
            {% endblock %}

Muy bien... refresca la página y... excelente! Excepto por la parte de que se ve horrible.

Robemos algo de código del directorio tutorial/ una última vez. Abre homepage.html.twig. Esto es solo un montón de HTML estático para hacer que se vea mejor. Copialo, cierra ese archivo... y luego pegalo en nuestro código homepage.html.twig

            Copy Code

                        76 lines
            |
            templates/question/homepage.html.twig
        
            {% extends 'base.html.twig' %}
        
            {% block body %}
        
            <div class="jumbotron-img jumbotron jumbotron-fluid">
        
                <div class="container">
        
                    <h1 class="display-4">Your Questions Answered</h1>
        
                    <p class="lead">And even answers for those questions you didn't think to ask!</p>
        
                </div>
        
            </div>
        
            <div class="container">
        
                <div class="row mb-3">
        
                    <div class="col">
        
                        <button class="btn btn-question">Ask a Question</button>
        
                    </div>
        
                </div>
        
                <div class="row">
        
                    <div class="col-12">
        
                        <div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);">
        
                            <div class="q-container p-4">
        
                                <div class="row">
        
                                    <div class="col-2 text-center">
        
                                        <img src="{{ asset('images/tisha.png') }}" width="100" height="100">
        
                                        <div class="d-block mt-3 vote-arrows">
        
                                            <a class="vote-up" href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
        
                                            <a class="vote-down" href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
        
                                        </div>
        
                                    </div>
        
                                    <div class="col">
        
                                        <a class="q-title" href="#"><h2>Reversing a Spell</h2></a>
        
                                        <div class="q-display p-3">
        
                                            <i class="fa fa-quote-left mr-3"></i>
        
                                            <p class="d-inline">I've been turned into a cat, any thoughts on how to turn back? While I'm adorable, I don't really care for cat food.</p>
        
                                            <p class="pt-4"><strong>--Tisha</strong></p>
        
                                        </div>
        
                                    </div>
        
                                </div>
        
                            </div>
        
                            <a class="answer-link" href="#" style="color: #fff;">
        
                                <p class="q-display-response text-center p-3">
        
                                    <i class="fa fa-magic magic-wand"></i> 6 answers
        
                                </p>
        
                            </a>
        
                        </div>
        
                    </div>
        
                    <div class="col-12 mt-3">
        
                        <div class="q-container p-4">
        
                            <div class="row">
        
                                <div class="col-2 text-center">
        
                                    <img src="{{ asset('images/magic-photo.png') }}" width="100" height="100">
        
                                    <div class="d-block mt-3 vote-arrows">
        
                                        <a class="vote-up" href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
        
                                        <a class="vote-down" href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
        
                                    </div>
        
                                </div>
        
                                <div class="col">
        
                                    <a class="q-title" href="#"><h2>Pausing a Spell</h2></a>
        
                                    <div class="q-display p-3">
        
                                        <i class="fa fa-quote-left mr-3"></i>
        
                                        <p class="d-inline">I mastered the floating card, but now how do I get it back to the ground?</p>
        
                                        <p class="pt-4"><strong>--Jerry</strong></p>
        
                                    </div>
        
                                </div>
        
                            </div>
        
                        </div>
        
                        <a class="answer-link" href="#" style="color: #fff;">
        
                            <p class="q-display-response text-center p-3">
        
                                <i class="fa fa-magic magic-wand"></i> 15 answers
        
                            </p>
        
                        </a>
        
                    </div>
        
                </div>
        
            </div>
        
            {% endblock %}

Y ahora... se ve mucho mejor.

Así que esta es la integración básica de CSS y Javascript dentro de Symfony: tu te encargas de manejarlo. Claro, debes de utilizar la función asset(), pero no hace nada muy impresionante.

Si quieres más, estás de suerte! En el último capítulo, llevaremos nuestros assets al siguiente nivel. Te va a fascinar.

A continuación: nuestro sitio tiene algunos links! Y todos te llevan a ninguna parte! Aprendamos como generar URLs con rutas.

31 Comments

Sort By

gazzatav 2 years ago

Hi I'm not seeing any info logs in the profiler although I can see the 'voting up' and 'voting down' logs in the log file in the var directory. As far as I can see monolog.yaml has config for debug level in dev. Any ideas? (Symfony 5.4)

| Reply |

gazzatav gazzatav 2 years ago

I see, you have to look at the profiler for the correct route i.e. the ajax requests.

1 | Reply |

Matěj V. 3 years ago

I don't know if I've missed something, but I had to add in the public directory a build folder including manifest.json with a path to the css files for the asset to work.

| Reply |

weaverryan SFCASTS Matěj V. 3 years ago edited

Hey Matěj V.!

Hmmm, that's interesting! That should not be required. The manifest.json file that you're referring to comes if you use Webpack Encore in Symfony, which is a great library, but one that we're not using at this moment in the tutorial (we do add it later on). When you use Encore, it creates a public/build/manifest.json file (among other files) that contains a map of "source filename" => "final filename" for all the things it builds.

But out of the box, Symfony doesn't look for this file. It only starts looking for it once you have Encore installed. More accurately, when you install Encore, its recipe adds a configuration file that activates this: https://github.com/symfony/recipes/blob/master/symfony/webpack-encore-bundle/1.9/config/packages/assets.yaml

The tl;dr is this: I think that somehow you have this json_manifest_path config already in your app... which normally comes when you install Encore. If you DO have this, but don't have Encore installed, then delete it. If you have this because you DID install Encore, then you can use Encore to build your assets, including this manifest.json file :).

Cheers!

| Reply |

Matěj V. weaverryan 3 years ago

Thank you for answer and mainly for this great course, It's one of the clearest guides on Symfony or anything programming wise that I've seen so far, while along being really positive! :)
And yeah I think I've copied the libraries that are used in this tutorial in the versions tab right away on start of the course, so it just got confused that the file wasn't present.

1 | Reply |

MolloKhan SFCASTS Matěj V. 3 years ago

We're happy to know you are liking our content. Cheers!

| Reply |

Paulus D. 3 years ago

Hi, I have set up everything as the tutorial says. But somehow when I paste in the new 'show.html.twig' code and refresh, the page loads and loads until it crashes and says 'unable to fetch the response from the backend: unexpected EOF'.
In Terminal it says that it matched the route, but than it gives the ERROR from above and it says: maximum execution time of 30 seconds exceeded in /vendor/twig/twig/src/Extension/ProfilerExtension.php on line 33.

What to do?

EDIT: I found the problem already. I accidentally pasted the show.html.twig in the base.html.twig file.... dumb! :P

| Reply |

MolloKhan SFCASTS Paulus D. 3 years ago edited

Hey Paulus D.

No worries, it happens. As a tip, when weird things happens, sometimes clearing the cache or restarting the web server helps.

Cheers!

| Reply |

Alessandro V. 3 years ago

Hi, i tried to to put in public my css called style.css but idk it doesn't work. If i rename the file app.css it works but i cannot rename all file that i need. How can i solve this? thanks

| Reply |

Victor SFCASTS Alessandro V. 3 years ago edited

Hey Alessandro,

OK, as far as I understand you moved style.css file to public/ folder, right? Then, in the template you should be able to link it as:


<link rel="stylesheet" href="/style.css">

But if you moved that css file to a subfolder e.g. public/css/ - then you would need to reflect that subdirectory in the path:


<link rel="stylesheet" href="/css/style.css">

Also, make sure you haven't started the project from a subfolder, otherwise it still may fail loading. The asset() Twig function that we will show in this video would help with this:


<link rel="stylesheet" href="{{ asset('style.css') }}">

But make sure to write the correct path there that's related to the public/ folder.

I hope this helps!

Cheers!

| Reply |

Duncan W. 4 years ago

I havent the autocompletion for the "asset" term. Can someone help me. Ho do i get it because i already installed the twig plugin for phpstorm

| Reply |

MolloKhan SFCASTS Duncan W. 4 years ago edited

Hey Duncan W.

A few Twig functions just don't work but in this case it should. Have you the Symfony Support plugin installed and enabled too?

1 | Reply |

Georg H. 4 years ago edited

Hi there,
I have a question about the asset-function - cite: <blockquote>So why are we bothering to use a function that does nothing? Well, it
does do two things... which you may or may not care about. First, if you decide to deploy your app to a subdirectory of a domain - like ILikeMagic.com/cauldron_overflow, the asset() function will automatically prefix all the paths with /cauldron_overflow. Super great... if you care</blockquote>".
My hosting service wants me to deploy to a subdirectory of document root. Apache finds index.php because of a redirect statement in .htaccess. How do I tell the asset-function to prefix the paths with 'public'?

| Reply |

Victor SFCASTS Georg H. 4 years ago edited

Hey Georg,

Do you use the Symfony's official .htaccess? You can get it by installing "symfony/apache-pack", it has a recipe that will bring this .htaccess into your project: https://github.com/symfony/recipes-contrib/blob/master/symfony/apache-pack/1.0/public/.htaccess

I suppose this .htaccess should help. If not, probably take a look at the redirect statement you have and try to create a similar for assets. Unfortunately, I can't help with it.

But in case you want to prefix all your assets with "public/" - you can do it via:


framework:
    assets:
        base_path: 'public'

You can make it for a specific env, e.g. do it only for prod - then add it in "config/packages/prod/asset.yaml" only. Or you can base it on env var, then you can set it to empty string locally and to "public/" on production.

Cheers!

| Reply |

Georg H. Victor 4 years ago

Hey Victor,
Yes I use .htaccess from "symfony/apache-pack". I'll try to adjust it for '/css, /images' etc. It's good to know that there is a quite elegant fallback by editing the config file(s).

Thanks a lot!

| Reply |

Victor SFCASTS Georg H. 4 years ago

Hey Georg,

In case you didn't add any custom redirects to your .htaccess - I'd suppose it just should work out of the box. If you did - then yeah, you have to adjust it for your assets as well. But yeah, as you said, you have a fallback option thanks to assets() Twig function ;)

Good luck with adjusting .htaccess! :)

Cheers!

| Reply |

Tadis 4 years ago

Not sure how the tutorial folder got into the cauldron_overflow project? :)

| Reply |

weaverryan SFCASTS Tadis 4 years ago

It MAY have snuck in there after a few chapters were already recorded 😀- you have a good eye for detail! It's definitely in the code download, though ;).

| Reply |

Tadis weaverryan 4 years ago

Thanks, bro ! :D

| Reply |

Alexey Goncharov 4 years ago

Hi! Can you please tell how did you get that à in voilà? Was it some shortcut in PHPStorm or it's just from Mac?

| Reply |

Victor SFCASTS Alexey Goncharov 4 years ago

Hey Alexey,

Yes, this is the recent upgrade of Mac OS I suppose. If you press and hold the keyboard letter button for a second or two, e.g. "a" - it will show additional chars for that letter and you can choose from the list. I suppose it might be available on other OS, but I'm not sure how to do it, better google for it if you really need this feature.

Cheers!

| Reply |

Łukasz Stadnik 4 years ago

I have a problem with this asset autocomplete option. I use PHPStorm and have Twig Plugin enabled. But if I type asset into the "" I only have some angular functions but not from Twig. I must write {{}} and if i type asset into this brackets i've got a autocomplete option. Do you know maybe what is the problem? I don't have any of this autocomplete functions like you shown (asset, asseticjs or asseticcss). Thanks for help.

| Reply |

Victor SFCASTS Łukasz Stadnik 4 years ago

Hey Łukasz,

Do you have Symfony Plugin installed and enabled in your PhpStorm? I suppose that autocompletion for "asset()" Twig function works thanks to that plugin. You need to install it first, then go to its configuration and enable it. Also, check that paths are correct. For example, the path to the web directory should be "public/". Then, after you enabled it and made necessary config tweaks inside - restart your PhpStorm just in case and try again.

I hope this helps!

Cheers!

| Reply |

Łukasz Stadnik Victor 4 years ago

Ok I know what is wrong. If you want to use that shortcuts you must install Live Templates from this link: https://github.com/knpunive.... If you do everything like it's said there, you should have this autocompletion asset thing. So you have it installed on your version of PHPStorm but didn't said about it :P

| Reply |

Victor SFCASTS Łukasz Stadnik 4 years ago

Hey Łukasz,

Oh, now I see you were talking about live templates, it's not actually an autocompletion :) Anyway, glad you figured out how to get it working yourself, good job!

Cheers!

| Reply |

Łukasz Stadnik Victor 4 years ago

I did everything like you said (install and enable Symfony plugin, configure it to public directory and restart PHPStorm), but nothing happens. This autocomplete only works after I write {{}} and inside it type asset. But if I wrote asset only inside "" it does nothing.

| Reply |

tesdy Łukasz Stadnik 3 years ago

Do you have another autocomplete plugin (like Tabnine ?)
After remove it, I was able to autocomplete {{ asset("image/tisha.png" }} with just "tisha" and then hit tab.

| Reply |

Victor SFCASTS tesdy 3 years ago

Hey Tesdy14,

Thanks for this tip! Yeah, other plugins really may cause incompatibility problems sometimes.

Cheers!

| Reply |

Victor SFCASTS Łukasz Stadnik 4 years ago

Hey Łukasz,

Ah, yes, sure, it will only work in curly braces {{}} - this is how PhpStorm knows when you actually call that asset() function. Otherwise, it won't autocomplete because, well, the syntax is incorrect.

Cheers!

| Reply |

Dean 4 years ago

Hello !! How do we get the css code ?

| Reply |

MolloKhan SFCASTS Dean 4 years ago edited

Hey @Dean

The CSS file comes with the course code inside the tutorial directory. You just need to download it from this page, at the right top corner it's the button :)

Cheers!

1 | Reply |

Symfony 5.0

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.3.0 || ^8.0.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "easycorp/easy-log-handler": "^1.0.7", // v1.0.9
        "sensio/framework-extra-bundle": "^6.0", // v6.2.1
        "symfony/asset": "5.0.*", // v5.0.11
        "symfony/console": "5.0.*", // v5.0.11
        "symfony/debug-bundle": "5.0.*", // v5.0.11
        "symfony/dotenv": "5.0.*", // v5.0.11
        "symfony/flex": "^1.3.1", // v1.21.6
        "symfony/framework-bundle": "5.0.*", // v5.0.11
        "symfony/monolog-bundle": "^3.0", // v3.5.0
        "symfony/profiler-pack": "*", // v1.0.5
        "symfony/routing": "5.1.*", // v5.1.11
        "symfony/twig-pack": "^1.0", // v1.0.1
        "symfony/var-dumper": "5.0.*", // v5.0.11
        "symfony/webpack-encore-bundle": "^1.7", // v1.8.0
        "symfony/yaml": "5.0.*" // v5.0.11
    },
    "require-dev": {
        "symfony/profiler-pack": "^1.0" // v1.0.5
    }
}

Previous Challenge

Next Challenge

Assets: CSS, Imágenes, etc

Share this awesome video!

Copiando el Layout Base y el Archivo CSS principal

A Symfony le Importan tus Assets

La No Tán Importante Función asset()

Mejorando la página "show"

Puliendo la Homepage

31 Comments

Delete comment?

What PHP libraries does this tutorial use?

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>{% block title %}Welcome!{% endblock %}</title>
	{% block stylesheets %}
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spartan&display=swap">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
	<link rel="stylesheet" href="/css/app.css">
	{% endblock %}
	</head>
	<body>
	<nav class="navbar navbar-light bg-light" style="height: 100px;">
	<a class="navbar-brand" href="#">
	<i style="color: #444; font-size: 2rem;" class="pb-1 fad fa-cauldron"></i>
	<p class="pl-2 d-inline font-weight-bold" style="color: #444;">Cauldron Overflow</p>
	</a>
	<button class="btn btn-dark">Sign up</button>
	</nav>

	{% block body %}{% endblock %}
	<footer class="mt-5 p-3 text-center">
	Made with <i style="color: red;" class="fa fa-heart"></i> by the guys and gals at <a style="color: #444; text-decoration: underline;" href="https://symfonycasts.com">SymfonyCasts</a>
	</footer>
	{% block javascripts %}{% endblock %}
	</body>
	</html>

Show Lines	// ... line 1
	<html>
	<head>
Show Lines	// ... lines 4 - 5
	{% block stylesheets %}
Show Lines	// ... lines 7 - 9
	<link rel="stylesheet" href="{{ asset('css/app.css') }}">
	{% endblock %}
	</head>
Show Lines	// ... lines 13 - 27
	</html>

	{% extends 'base.html.twig' %}

	{% block title %}Question: {{ question }}{% endblock %}

	{% block body %}
	<div class="container">
	<div class="row">
	<div class="col-12">
	<h2 class="my-4">Question</h2>
	<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);">
	<div class="q-container-show p-4">
	<div class="row">
	<div class="col-2 text-center">
	<img src="/images/tisha.png" width="100" height="100">
	</div>
	<div class="col">
	<h1 class="q-title-show">{{ question }}</h1>
	<div class="q-display p-3">
	<i class="fa fa-quote-left mr-3"></i>
	<p class="d-inline">I've been turned into a cat, any thoughts on how to turn back? While I'm adorable, I don't really care for cat food.</p>
	<p class="pt-4"><strong>--Tisha</strong></p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="d-flex justify-content-between my-4">
	<h2 class="">Answers <span style="font-size:1.2rem;">({{ answers\|length }})</span></h2>
	<button class="btn btn-sm btn-secondary">Submit an Answer</button>
	</div>



	<ul class="list-unstyled">
	{% for answer in answers %}
	<li class="mb-4">
	<div class="d-flex justify-content-center">
	<div class="mr-2 pt-2">
	<img src="/images/tisha.png" width="50" height="50">
	</div>
	<div class="mr-3 pt-2">
	{{ answer }}
	<p>-- Mallory</p>
	</div>
	<div class="vote-arrows flex-fill pt-2" style="min-width: 90px;">
	<a class="vote-up" href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
	<a class="vote-down" href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
	<span>+ 6</span>
	</div>
	</div>
	</li>
	{% endfor %}
	</ul>
	</div>
	{% endblock %}

Show Lines	// ... lines 1 - 4
	{% block body %}
	<div class="container">
	<div class="row">
	<div class="col-12">
Show Lines	// ... line 9
	<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);">
	<div class="q-container-show p-4">
	<div class="row">
	<div class="col-2 text-center">
	<img src="{{ asset('images/tisha.png') }}" width="100" height="100">
	</div>
Show Lines	// ... lines 16 - 23
	</div>
	</div>
	</div>
	</div>
	</div>
Show Lines	// ... lines 29 - 36
	<ul class="list-unstyled">
	{% for answer in answers %}
	<li class="mb-4">
	<div class="d-flex justify-content-center">
	<div class="mr-2 pt-2">
	<img src="{{ asset('images/tisha.png') }}" width="50" height="50">
	</div>
Show Lines	// ... lines 44 - 52
	</div>
	</li>
	{% endfor %}
	</ul>
	</div>
	{% endblock %}

Show Lines	// ... lines 1 - 8
	class QuestionController extends AbstractController
	{
Show Lines	// ... lines 11 - 13
	public function homepage()
	{
	return $this->render('question/homepage.html.twig');
	}
Show Lines	// ... lines 18 - 34
	}

	{% extends 'base.html.twig' %}

	{% block body %}
	<h1>Voilà</h1>
	{% endblock %}

	{% extends 'base.html.twig' %}

	{% block body %}
	<div class="jumbotron-img jumbotron jumbotron-fluid">
	<div class="container">
	<h1 class="display-4">Your Questions Answered</h1>
	<p class="lead">And even answers for those questions you didn't think to ask!</p>
	</div>
	</div>
	<div class="container">
	<div class="row mb-3">
	<div class="col">
	<button class="btn btn-question">Ask a Question</button>
	</div>
	</div>
	<div class="row">
	<div class="col-12">
	<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);">
	<div class="q-container p-4">
	<div class="row">
	<div class="col-2 text-center">
	<img src="{{ asset('images/tisha.png') }}" width="100" height="100">
	<div class="d-block mt-3 vote-arrows">
	<a class="vote-up" href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
	<a class="vote-down" href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
	</div>
	</div>
	<div class="col">
	<a class="q-title" href="#"><h2>Reversing a Spell</h2></a>
	<div class="q-display p-3">
	<i class="fa fa-quote-left mr-3"></i>
	<p class="d-inline">I've been turned into a cat, any thoughts on how to turn back? While I'm adorable, I don't really care for cat food.</p>
	<p class="pt-4"><strong>--Tisha</strong></p>
	</div>
	</div>
	</div>
	</div>
	<a class="answer-link" href="#" style="color: #fff;">
	<p class="q-display-response text-center p-3">
	<i class="fa fa-magic magic-wand"></i> 6 answers
	</p>
	</a>
	</div>
	</div>

	<div class="col-12 mt-3">
	<div class="q-container p-4">
	<div class="row">
	<div class="col-2 text-center">
	<img src="{{ asset('images/magic-photo.png') }}" width="100" height="100">
	<div class="d-block mt-3 vote-arrows">
	<a class="vote-up" href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
	<a class="vote-down" href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
	</div>
	</div>
	<div class="col">
	<a class="q-title" href="#"><h2>Pausing a Spell</h2></a>
	<div class="q-display p-3">
	<i class="fa fa-quote-left mr-3"></i>
	<p class="d-inline">I mastered the floating card, but now how do I get it back to the ground?</p>
	<p class="pt-4"><strong>--Jerry</strong></p>
	</div>
	</div>
	</div>
	</div>
	<a class="answer-link" href="#" style="color: #fff;">
	<p class="q-display-response text-center p-3">
	<i class="fa fa-magic magic-wand"></i> 15 answers
	</p>
	</a>
	</div>
	</div>
	</div>
	{% endblock %}