Pasar al contenido principal

Imagen Background usando Views Template

Descripción

Este código permite imprimir una imagen de fondo utilizando vistas y plantillas mediante la declaración de una variable.

Instrucciones

  1. Añadimos el campo imagen a nuestro contenido antes de crear la vista.
     
  2. Creamos una vista del tipo "Fields o Campos" y añadimos los campos que deseamos mostrar.
     
  3. Copiamos la plantilla "views-view-fields.html.twig" desde el módulo views y lo copiamos en las plantillas de nuestro tema personalizado
     
  4. Creamos la estructura con los divs donde queremos poner nuestra imagen de fondo
     
  5. Configuramos la vista para que muestre la URL de la imagen
     
  6. En el template o plantilla declaramos una variable con nuestro campo imagen y luego podremos imprimir nuestro background.

Código

{# Declaramos una variable y le asignamos el valor del campo sin etiquietas adicioales #}

{% set background_image = fields.yourimage_field.content|striptags|trim %}

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

Copiar