Leer imagen de las propiedades de la página

Las instrucciones se refieren a versiones anteriores de TYPO3 en las que aún se utiliza la extensión "css_styled_content".

Existen varias opciones para leer imágenes de las propiedades de la página (recursos). Este método se utiliza a menudo, por ejemplo, para dar salida a imágenes de cabecera que varían en función de su posición en el árbol de páginas.

Primero cree una imagen en las propiedades de la página en la pestaña "Recursos".

Almacenar la imagen en las propiedades de la página

En la configuración de Typoscript, puede leer la imagen con el siguiente código, asignarla a un objeto o marcador y darle la salida correspondiente en la plantilla:

lib.headerimage = IMAGEN
lib.headerimage {
  archivo {
    import.data = levelmedia:-1, diapositiva
    treatIdAsReference = 1
    import.listNum = 0
  }
}

Especificando levelmedia:-1, slide, se utiliza la imagen almacenada en la página actual o, si no hay ninguna disponible, la de una página de nivel superior.

import.listNum = 0 significa que se muestra la primera imagen insertada.

Si se insertan varias imágenes en Recursos, se pueden mostrar aleatoriamente de la siguiente manera:

import.listNum = rand

Insertar imagen como imagen de fondo

Las imágenes que se han integrado en las propiedades de la página en Recursos pueden integrarse en varios puntos del sitio web mediante CSS. También es posible mostrar diferentes tamaños de imagen en función de la resolución de pantalla.

El siguiente ejemplo carga la imagen de fondo en el body

##Lectura de imagen y salida para grandes resoluciones de pantalla
lib.imageresourceBig = IMG_RESOURCE
lib.imageresourceBig {
  archivo {
    import = uploads/media/
    import.data = nivelmedia:-1, diapositiva
    treatIdAsReference = 1
    import.listNum = 0
    ancho = 1600
    altura = 800
  }
}
##Imagen de salida en resolución más pequeña
lib.imageresourceSmall < lib.imageresourceBig
lib.imageresourceSmall {
  archivo {
    ancho = 800
    altura = 400
  }
}

##Cargar CSS en la cabecera con mediaqueries
page.headerData.13 = COA_INT
page.headerData.13 {
  5 = TEXTO
  5.value = <style>
  10 < lib.imageresourceSmall
  10.stdWrap.wrap = @media (max-width: 768px){body { background-image: url(/|); }}
  20 < lib.imageresourceBig
  20.stdWrap.wrap = @media (min-width: 769px){body { background-image: url(/|); }}
  30 = TEXTO
  30.value = </style>
}

Aktualisiert: 10.04.2025