Imprimir imagen de fondo en un template usando variables Twig

Descripción

Este código te imprimirá el valor del campo imagen dentro de la plantilla.

Instrucciones

  1. Crea un contenido y añade el campo del tipo imagen con la imagen que quieres utilizar como fondo

  2. Activa el modo desarrollador para saber el nombre de la plantilla que quieres modificar

  3. añade el código que está debajo y actualiza el nombre del campo para obtener el resultado.

Código
{# Declaramos la variable con el valor del campo en nuestra plantilla #}

{% set background_image = node.yourimage_field|striptags|trim %}

<div style="background-image:url({{ background_image }});">
     <p>Nuestro contenido irá aqui</>
</div>
Copiar

Más Snippets

Cómo extraer los valores de un campo enlace múltiple en field.html.twig

drupal/graphql 4.4.0 requires drupal/typed_data *

Apache Service detected with wrong path

Modelo CSS para varios dispositivos

Imagen Background usando Views Template

Enviar json desde Drupal usando behaviors

Descargar contenido de un nodo Drupal 8

Crear Bootstrap Slideshow en Twig con Paragraphs

Comprimir / Descomprimir en Linux

Cómo habilitar la ejecución de scripts para Powershell

Comandos Docker

Autorecargar página usando Javascript

PHPStan and Doctrine: $id is never written, only read

¿Cómo imprimir el logo de drupal en una plantilla twig?

Enviar datos JSON desde Drupal 8

Imprimir valores traducidos en un Twig paragraphs

Como borrar restos de un campo desde Mysql

¿Cómo puedo tener "minimum-stability": "stable" en mi composer.json e instalar la versión alfa de un módulo contribuido?

Cómo resetar la contraseña de un usuario en Drupal con Drush

The metadata storage is not up to date, please run the sync-metadata-storage command to fix this issue

Añadir CSS Personalizado en tu Subtheme Drupal 8/9

Instalar Drupal 9 usando Composer

hook_preprocess_node()

Ejecutar comando Drupal Console Multisite

Crear usuario programáticamente Drupal 8

Corregir errores restos de módulos

Cómo volver a la versión anterior de Composer

Cómo ejecutar Docker-CE en WSL2 - Running Docker-CE in WSL2

Comando sincronizacion Drupal 8

Argument #1 ($validateTo) must be of type DateTimeInterface, string given

Preprocess function views_fields

¿Cómo reviso una rama remota de Git? | How do I check out a remote Git branch?

Drupal + Nginx + Php-cgi : 502 Bad Gateway error

Certbot MisconfigurationError: nginx restart failed

Imprimir archivos Media en Twig Drupal 8,9, o superior

Error: Call to a member function getPath() on null in Drupal\config_translation\ConfigNamesMapper->getOverviewRoute()

Comandos útiles de Git

Imprimir datos usuario en Twig Drupal | get user details in the template page.html.twig

Symfony 6 User Deprecated: Method

Configuración Desarrollo Local Drupal 8

Imprimir errores en pantalla Drupal 8/9

Habilita las sugerencias para aplicar plantillas en bloques

Editar nodo programáticamente Drupal 8

Crear un vista de contenidos relacionados

Consumir Json dentro de un Controller Symfony

Cómo quitar la carpeta /web de la url de Drupal

Cómo conseguir el Token de Sesión en Drupal 8/9

Cannot communicate with server: Post http://localhost/v2/apps: dial unix /run/snapd.socket: connect: no such file or directory

Añadir Errores programáticamente a la tabla de errores Drupal 8

Radix | Generar un Subtheme para Drupal

Imprime imagen en una views template

Corregir Drupal ~10.0 and TWIG ~3.0 Unexpected token name of value if (end of statement block expected)

Cómo recuperar listado de servicios en Drupal 10 | Get the list of available services

Extraer los valores de un campo media plantilla field.html.twig

mkcert : The term 'mkcert' is not recognized as the name of a cmdlet, function, script file.

Comprobar valor de un campo booleano en plantilla Twig Drupal

Cómo instalar Make en Ubuntu

Habilitar node ID dentro de la etiqueta <body> Drupal

Cómo instalar Composer 2 en Ubuntu 20.04

Imprime una imagen sin nada más en el template

Git Ignore para Drupal

Editar información usuario programáticamente Drupal 8

Crear un ancla que se mantenga en la página actual

Configurar Servidor Ubuntu 18

Cómo obtener e imprimir en twig los valores del campo enlace

Cómo conectar con un repositorio nuevo alojado en Bitbucket

Cambiar texto boton Add to cart Drupal 8 Commerce

Añadir clase a formulario con programáticamente

Redirects to external URLs are not allowed

Crear nodo programando Drupal 8

Cambiar icono Accordion Bootstrap 5

Nginx para Drupal | Archivo de configuración para el dominio.

Cómo eliminar completamente Node.js y NVM en Ubuntu

Ejemplo probar CURL usando get en moodle con Ddev

Imprime los valores alt y title desde un campo media en Drupal

Actualizar Drupal 8 usando Composer

Composer | Comprobar fallos en nuestra instalación

Crear un formulario personalizado Drupal 8

Imprime la url de una imagen desde Media en Twig

Extraer URL de archivo en una plantilla tipo Node.twig.html

Doctrine assignment error

Crear un alias en Cywin

Configuración Servidor Local Drupal 8

Cómo instalar cualquier versión Drupal 8 usando Composer

Cómo borrar php7 definitivamente | Permanently removing php 7

Cambiar formato de fecha en plantilla Twig Drupal 8

Añadir botón color en CKEditor

Symfony 2 | Solucionar problemas de instalación/actualización

Cómo ajustar el imágenes en card Bootstrap

"Uncaught ReferenceError: Drupal is not defined", in javascript library.

Failed to unlink file 'assets://css/css_

Cómo actualizar la contraseña en un usuario ya existente de MySQL

Cómo ejecutar Composer y Drush en servidores IONOS

Docker: PermissionError: [Errno 13] Permission denied

Cómo corregir error docker: Got permission denied while trying to connect to the Docker daemon socket

Obtener IDs usando preprocess function Drupal 7/8/9

Imprime imagen fondo para un bloque

Extraer roles del usuario Drupal 8

Docker: Cómo aumentar la memoria de php | increase php memory "the docker way"

Crear tema personalizado Drupal 8/9 con Bootstrap Barrio

Configuración REST Drupal 8

Cómo imprimir un formulario contacto dentro de un paragraphs Drupal 9

Cómo borrar mysql o mariadb definitivamente | Permanently removing mysql

Cambiar el nombre del idioma en in language switcher (English > En)

Alterar plantilla NODE EDIT para tipos de contenido

Symfony Postgree | Datatype mismatch: 7 ERROR:  column "xxx" cannot be cast automatically to type boolean

The DOMPurify library is not installed.

Obtener URI media desde un paragraphs en Twig | Get image URI from paragraph

Versión de Drupal con Drush | y otros datos

Error: Undefined constant PDO::MYSQL_ATTR_USE_BUFFERED_QUERY in Drupal\mysql\Driver\Database\mysql\Connection::open()

Instalar npm y gulp utilizando docker4drupal

OCI runtime exec failed: exec failed: unable to start container process: exec: "bash": executable file not found in $PATH: unknown

Cómo añadir fuentes externas (Google Fonts ) en Drupal 8/9

Mostrar bloque vista usando Preprocess Function Drupal 8/9

Imprime en la plantilla del paragraph imágenes dentro de un campo con múltiples valores

Error icono hamburguesa Bootstrap Barrio

Descargar tipos de contenido programáticamente

Crear tabla programáticamente Drupal 8

Conectarme usando Goozle a un servidor externo a Drupal pasando variables JSON

Como imprimir mensajes en Drupal 9

Cómo borrar Apache2 definitivamente | Permanently removing apache2

Borrar usuario programáticamente Drupal 8

Agregar item sin enlace al menu | No link items menu

Symfony, An exception has been thrown during the rendering of a template

Declarar parámetros opcionales php8.2

lando exec failed: "drush": executable file not found in $PATH: unknown

Imprimir valores desde un Nodo dentro una Twig Paragraphs

Warning: Undefined array key "#submit_button" in Drupal\Core\Render\Element\Button::preRenderButton() (line 92 of core/lib/Drupal/Core/Render/Element/Button.php)

Backup Mysql desde contenedores Docker

lando : Depends: docker-ce but it is not installable

Cómo añadir animaciones con css en tema personalizado

Modificar formularios Drupal 8

Imagen cabecera con Bootstrap

Error de memoria con composer

Descargar datos usuario actual Drupal 8

Crear tabla por defecto al instalar un módulo Drupal 8

Comprueba el valor de un campo SELECT en un TWIG

Como hacer un campo no editable en Drupal 8

Comandos Linux

Borrar un contenido programáticamente Drupal 8

Activar tema por defecto utilizando Consola y Drush en Drupal

Webform | Hook para crear una acción cuando se ha hecho Submit

Como forzar git push | How do i properly force git push

RuntimeException: Adding non-existent permissions to a role is not allowed. The incorrect permissions are...

`let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz)

Instalar dependencia Dragula para Layout Paragraphs