Ich möchte im Header ein Bild, welches je nach Bildschirmauflösung ein unterschiedliches Bild anzeigt. Also z.B. bei einem Smartphone header340.jpg und beim Desktop header1200.jpg. Ich verwende das Bootstrap Package in der neuesten Version und hier der aktuelle Code:
Fluid Template:
<div class="navbar navbar-{themeNavigationstyle} navbar-top{f:if(condition:logoFile,then:' navbar-has-image')}" role="navigation">
<div class="container">
<div class="navbar-header navbar-header-main">
<f:if condition="{logoFile}">
<f:then>
<div id="headerbackground">
<f:link.page pageUid="{rootPage}" class="navbar-brand navbar-brand-image">
<img src="{f:uri.image(src: logoFile)}" height="{logoHeight}" width="100%" />
</f:link.page>
</div>
<div id="loginbox">
<f:cobject typoscriptObjectPath="login" />
<div id="registerlink">
<f:link.page pageUid="26">Registrierung</f:link.page>
</div>
</div>
<div id="search">
<f:cobject typoscriptObjectPath="googlesearch" />
</div>
</f:then>
<f:else>
<f:link.page pageUid="{rootPage}" class="navbar-brand">{siteTitle}</f:link.page>
</f:else>
</f:if>
<f:if condition="{f:cObject(typoscriptObjectPath:'lib.navigation.main')}">
<button type="button" class="navbar-toggle navbar-toggle-menu" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-list"></span>
<span class="sr-only">Toggle navigation</span>
</button>
</f:if>
<span class="navbar-header-border-bottom"></span>
</div>
<div id="menu">
<div class="navbar-collapse collapse">
<f:cObject typoscriptObjectPath="lib.navigation.main" />
</div>
</div>
</div>
</div>
Es handelt sich um das logoFile.
Typoscript Constants:
page {
logo {
# cat=bootstrap package: basic/110/file; type=string; label=Logo:Leave blank to use website title from template instead
file = fileadmin/imagebase/mp3tht_2015_header_1200.jpg
# cat=bootstrap package: basic/110/height; type=int+; label=Height: The image will not be resized!
height = 260
# cat=bootstrap package: basic/110/width; type=int+; label=Width: The image will not be resized!
width = 1200
}
}
Typoscript Setup:
10 = FLUIDTEMPLATE
10 {
...
...
variables {
...
logoFile = TEXT
logoFile.value = {$page.logo.file}
logoHeight = TEXT
logoHeight.value = {$page.logo.height}
logoWidth = TEXT
logoWidth.value = {$page.logo.width}
...
}
}
Ich habe dazu son folgende Artikel gelesen, aber offentsichtlich fehlt mir ein bischen Wissen, damit das klappt.
http://typo3blogger.de/responsive-images-typo3-6-2/
http://die-netzialisten.de/anleitung/responsive-web-design-4/
http://t3-developer.com/tutorials/responsive-webdesign-mit-typo3/part-ii-responsive-webdesign-mit-typo3/
Moin. Was genau verstehst du an den Artikeln denn nicht? Ich habe jetzt auch nur den ersten gelesen, aber ich sehe nichts davon in deinem Code. Daher die Frage, was genau du nicht verstehst, bzw. was du ausprobiert hast und was nicht ?
Also, ich habe mir als erstes ein Subtemplate angelegt und mich für die Variante srcset entschieden:
header_template >
header_template = COA
header_template {
#10 = IMAGE
# mp3tht_header_2015.jpg has the dimensions 1170 x 260 pixels.
#10.file = fileadmin/imagebase/mp3tht_header_2015.jpg
30 = IMAGE
30 {
file = fileadmin/imagebase/mp3tht_header_2015.jpg
file.width = 1170
layoutKey = default
layout {
default {
element = <img src="###SRC###" width="###WIDTH###" height="###HEIGHT###" ###PARAMS### ###ALTPARAMS### ###BORDER### ###SELFCLOSINGTAGSLASH###>
source =
}
srcset {
element = <img src="###SRC###" srcset="###SOURCECOLLECTION###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
}
picture {
element = <picture>###SOURCECOLLECTION###<img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###></picture>
source = <source src="###SRC###" media="###MEDIAQUERY###" ###SELFCLOSINGTAGSLASH###>
}
data {
element = <img src="###SRC###" ###SOURCECOLLECTION### ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
source.noTrimWrap = | data-###DATAKEY###="###SRC###"|
}
}
sourceCollection {
small {
width = 200
srcsetCandidate = 800w
mediaQuery = (min-device-width: 800px)
dataKey = small
}
smallHires {
if.directReturn = 1
width = 300
pixelDensity = 2
srcsetCandidate = 800w 2x
mediaQuery = (min-device-width: 800px) AND (foobar)
dataKey = smallHires
pictureFoo = bar
}
}
}
40 < 30
40.layoutKey = data
50 < 30
50.layoutKey = picture
60 < 30
60.layoutKey = srcset
}
Dieses Template wollte ich dann einfach dem Logo File im Main Template zuweisen:
10.10.variables.logoFile < header_template
Das hat aber nicht geklappt, kannst du mir sagen, ob ich zumindest im Prinzip richtig liege, dass wäre für die Motivation schon enorm wichtig, da ich nicht weis, ob ich den richtigen Weg eingeschlagen habe.
Tendenziell wohl ja. Unten in den Kommentaren habe ich folgendes gefunden, vielleicht hilft dir das ja weiter:
lib.logo = IMAGE
lib.logo {
file = IMAGEPATH
altText = ALTTEXT
titleText < lib.logo.altText
params = class="img-responsive"
file.width = 220
layoutKey = srcset
layout {
srcset {
element = <img src="###SRC###" srcset="###SOURCECOLLECTION###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
}
}
sourceCollection {
small {
width = 300
srcsetCandidate = 800w
mediaQuery = (min-width: 480px)
dataKey = small
}
smallHires {
if.directReturn = 1
width = 320
pixelDensity = 2
srcsetCandidate = 800w 2x
mediaQuery = (min-device-width: 800px) AND (foobar)
dataKey = smallHires
pictureFoo = bar
}
big {
width = 364
mediaQuery = (min-width: 1600px)
dataKey = small
}
}
}
Mhh, wenn die oben gepostete Variante verwende und das Fluid Template ändere von
<div id="headerbackground">
<f:link.page pageUid="{rootPage}" class="navbar-brand navbar-brand-image">
img src="{f:uri.image(src: logoFile)}" height="{logoHeight}" width="100%" />
</f:link.page>
</div>
in
<div id="headerbackground">
<f:link.page pageUid="{rootPage}" class="navbar-brand navbar-brand-image">
{logoFile}
</f:link.page>
</div>
dann bekomme ich vom Typo3 Paser folgendes ausgegeben:
<img src="fileadmin/_processed_/csm_mp3tht_2[page.10.__][page.10.__]5_header_[page.10.__]2[page.10.__][page.10.__]_ae9cefcd28.jpg" srcset="fileadmin/_processed_/csm_mp3tht_2[page.10.__][page.10.__]5_header_[page.10.__]2[page.10.__][page.10.__]_8faf[page.10.__]9b[page.10.__]ad.jpg 8[page.10.__][page.10.__]w,fileadmin/_processed_/csm_mp3tht_2[page.10.__][page.10.__]5_header_[page.10.__]2[page.10.__][page.10.__]_ff53dc87ed.jpg 8[page.10.__][page.10.__]w 2x,fileadmin/_processed_/csm_mp3tht_2[page.10.__][page.10.__]5_header_[page.10.__]2[page.10.__][page.10.__]_5e4[page.10.__]a7a766.jpg " class="img-responsive" alt="mp3tht records" title="mp3tht records" >
Kann es sein, dass der Typo3 Rederer hier noch einen Bug hat?
Ok, ich habs im Fluid Template muss noch die Formatierung vorangestellt werden.
<f:format.html>{logoFile}</f:format.html>
damit ist das Header Image "Resposible fähig", aber ich muss noch untersuchen, ob das kleinere Image in kleiner Größe geladen wird.
Im Chrome Browser wird nur die kleinste Version angezeigt??? In allen anderen Browsern sieht es gut aus.