rtgx

Nastaviteľné pozadie stránky

Typo3 6.x

Zadanie

Potrebujeme, aby backend užívateľ mohol meniť pozadie každej stránky pridaním obrázku do vlastnosti stránky Files/Media:

Vlastnosť stránky Files/Media s jedným pridaným obrázkom

Riešenie

Vygenerujeme cestu k obrázku pomocou Typoscriptu a vložíme ju do objektu FLUIDTEMPLATE.

Typoscript constants

Je tu definovaný defaultný obrázok, ktorý sa použije ak nie je na stránke žiadny dostupný.

content {
  backgroundImage = fileadmin/sitename/img/image-background.jpg
}

Typoscript setup

Objekt temp.backgroundImage vygeneruje kompletnú cestu k obrázku, ktorú použijeme v HTML:
fileadmin/sitename/img/image-background.jpg

temp.backgroundImage = COA
temp.backgroundImage {
  stdWrap {
    wrap = |
    ifEmpty = {$content.backgroundImage}
  }
}
temp.backgroundImage.10 = FILES
temp.backgroundImage.10 {
  references {
    table = pages
    uid.data = page:uid
    fieldName = media
  }
  begin = 0
  maxItems = 1
  renderObj = IMG_RESOURCE
  renderObj {
    file {
      import.data = file:current:publicUrl
    }
  }
}

page.10 = FLUIDTEMPLATE
page.10 {
  file = fileadmin/sitename/tmpl/Index.html
  variables {
    backgroundImage < temp.backgroundImage
  }
}

Súbor Index.html

(fileadmin/sitename/tmpl/Index.html)

Skrátený príklad použitia premennej backgroundImage:

<section style="background-image:url('{backgroundImage}');">
...
</section>

Výsledok (HTML)

<section style="background-image: url("fileadmin/sitename/img/image-background.jpg");">
...
</section>
 
Žiadne dokumenty ani odkazy k tejto stránke.