Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

Vistas de bloques y definiciones de bloques

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

Vamos a crear un diseño para nuestra página de "receta individual" para poder personalizarla un poco más. Me encanta que podamos crear nuevos diseños sobre la marcha, siempre que haya que modificar una página.

Añadir y asignar un nuevo diseño

Añade una nueva maquetación, elige nuestra Maquetación 2 favorita y llámala "Maquetación de receta individual". A estas alturas, ya conoces el procedimiento. Empieza por vincular la zona del Encabezado... y luego la zona del Pie.

¡Genial! Y luego, como vamos a aplicar esto a una página normal que ya existe en Twig, añade un bloque "Vista completa", que renderizará el bloque bodyde nuestra plantilla.

Un comienzo sólido. Pulsa "Publicar"... para que podamos mapear esto. Añade un nuevo mapeo, vincúlalo a nuestro "Diseño de receta individual"... y pulsa "Detalles". esta vez, vamos a vincularlo a través del nombre de la ruta. Para el nombre de la ruta, abre src/Controller/RecipeController.php. Aquí está: app_recipes_show. Pégalo, pulsa "Guardar cambios" y... ¡a probar!

Aún no deberíamos ver ninguna diferencia y... no la vemos. Pero podemos ver que está utilizando nuestro diseño

Bien, ¡vamos a animar un poco esta página! Vuelve al administrador de diseños y edita el "Diseño de receta individual". Añade una nueva Rejilla y cámbiala por una "Colección dinámica"... que utilice "Contentful Search". Como hicimos antes, carga Habilidades, muestra la más reciente primero y limita a 3.

Vale, si "Publicamos y seguimos editando"... y luego actualizamos... ¡guau! Es genial que ahora podamos ponerlas en cualquier sitio. Aunque, envolvamos eso y contenedor. Y... ya está.

Hasta ahora, todo esto es fácil. ¿Listo para la complicación? Quiero personalizar el aspecto de esta cuadrícula: Quiero tener una receta grande a la izquierda y luego dos recetas más pequeñas a la derecha. Pero no quiero cambiar el aspecto de la cuadrícula en otras partes de nuestro sitio, como en la página de inicio. Así que la pregunta es cómo: ¿podemos cambiar el aspecto de esta cuadrícula sólo en esta página?

Los tipos de vista cuadrícula/lista

Haz clic en la cuadrícula y ve a la pestaña de diseño. Resulta que una cuadrícula es en realidad un bloque "Lista" que tiene dos "tipos de vista": lista y cuadrícula.

Dirígete a tu terminal y ejecuta:

php bin/console debug:config netgen_layouts view.block_view

Oh, pero escribe netgen correctamente. Esto muestra la configuración de cómo se representan los bloques. Busca la sección default... y desplázate un poco hacia abajo. Aquí: vemos los dos tipos de vista para los bloques de lista y de cuadrícula. Como ya he mencionado, resulta que en realidad ambos forman parte del mismo tipo de bloque llamado list. Sólo son dos tipos de vista diferentes: uno llamado list y otro grid. Cuando cambias el "tipo de vista" en el administrador de diseños, en realidad estás cambiando la plantilla que se utiliza para mostrar ese bloque.

Definiciones de bloque

Ejecuta ese mismo comando, pero en lugar de view.block_views, marca block_definitions:

php bin/console debug:config netgen_layouts block_definitions

Las definiciones de bloque es donde defines lo que son realmente los bloques. Así, cada clave raíz de esta configuración representa un bloque diferente que podemos utilizar en el área de administración. Busca el que se llama list: aquí está. Define cosas como qué campos de formulario se muestran en el área de administración y qué "tipos de vista" tiene. Tiene dos: lista y cuadrícula. Layouts lee esta configuración para mostrar el elemento select de tipos de vista en el área de administración. Luego, una vez que seleccionamos el tipo de vista, utiliza la configuración deblock_views para saber qué plantilla debe mostrar.

Vale, basta de configuraciones profundas y teoría. Vamos a darnos una nueva forma de representar listas creando un nuevo tipo de vista. Eso a continuación.

Leave a comment!

0
Login or Register to join the conversation
Cat in space

"Houston: no signs of life"
Start the conversation!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.1.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "^3.7", // v3.7.0
        "doctrine/doctrine-bundle": "^2.7", // 2.7.0
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.2
        "doctrine/orm": "^2.13", // 2.13.3
        "easycorp/easyadmin-bundle": "^4.4", // v4.4.1
        "netgen/layouts-contentful": "^1.3", // 1.3.2
        "netgen/layouts-standard": "^1.3", // 1.3.1
        "pagerfanta/doctrine-orm-adapter": "^3.6",
        "sensio/framework-extra-bundle": "^6.2", // v6.2.8
        "stof/doctrine-extensions-bundle": "^1.7", // v1.7.0
        "symfony/console": "5.4.*", // v5.4.14
        "symfony/dotenv": "5.4.*", // v5.4.5
        "symfony/flex": "^1.17|^2", // v2.2.3
        "symfony/framework-bundle": "5.4.*", // v5.4.14
        "symfony/monolog-bundle": "^3.0", // v3.8.0
        "symfony/proxy-manager-bridge": "5.4.*", // v5.4.6
        "symfony/runtime": "5.4.*", // v5.4.11
        "symfony/security-bundle": "5.4.*", // v5.4.11
        "symfony/twig-bundle": "5.4.*", // v5.4.8
        "symfony/ux-live-component": "^2.x-dev", // 2.x-dev
        "symfony/ux-twig-component": "^2.x-dev", // 2.x-dev
        "symfony/validator": "5.4.*", // v5.4.14
        "symfony/webpack-encore-bundle": "^1.15", // v1.16.0
        "symfony/yaml": "5.4.*", // v5.4.14
        "twig/extra-bundle": "^2.12|^3.0", // v3.4.0
        "twig/twig": "^2.12|^3.0" // v3.4.3
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.2
        "symfony/debug-bundle": "5.4.*", // v5.4.11
        "symfony/maker-bundle": "^1.47", // v1.47.0
        "symfony/stopwatch": "5.4.*", // v5.4.13
        "symfony/web-profiler-bundle": "5.4.*", // v5.4.14
        "zenstruck/foundry": "^1.22" // v1.22.1
    }
}
userVoice