Template Bulletproof - Headerbild für statische Seiten

B.E.A. · Post by **B.E.A.** » Thu Nov 22, 2012 10:11 am

Ich würde gerne wissen, ob es die Möglichkeit gibt per CSS beim Template Bulletproof jeder statischen Seite ein eigenes Headerbild zukommen zu lassen. Und wenn das geht, dann wäre die Frage wie ich das machen kann. Ein Beispielcode wäre hierzu hilfreich.

Oder mache ich das in einer tpl-Datei.

Vielen Dank für eure Hilfe.

Liebe Grüße
Bea

Post by **garvinhicking** » Thu Nov 22, 2012 12:20 pm

Hi!

Die Smarty-Variable {$staticpage_pagetitle} ist ja in der index.tpl auch zuweisbar. Man könnte dies z.b. als ID oder CLASS vom <body> tag einsetzen, um dann per CSS für gewisse Seiten das Headerbild auszutauschen. Leider fehlt mir die Zeit, dass jetzt mit Beispielcode direkt vorzukauen, aber evtl hilft das als Anreiz.

Viele Grüße,
Garvin

Post by **yellowled** » Thu Nov 22, 2012 5:36 pm

garvinhicking wrote:Die Smarty-Variable {$staticpage_pagetitle} ist ja in der index.tpl auch zuweisbar. Man könnte dies z.b. als ID oder CLASS vom <body> tag einsetzen, um dann per CSS für gewisse Seiten das Headerbild auszutauschen. Leider fehlt mir die Zeit, dass jetzt mit Beispielcode direkt vorzukauen, aber evtl hilft das als Anreiz.

Hmja, wobei das natürlich nur funktioniert, wenn auch ein $staticpage_pagetitle gesetzt ist – das muss aber, glaube ich, sein. (Garvin wird schon wissen, wovon er redet.) Außerdem ist das Ganze natürlich nicht updatesicher, sollte also in einem BP gemacht werden, das in ein eigenes Verzeichnis kopiert wurde.

Und dann macht man halt in der index.tpl aus

Code: Select all

<body{if $template_option.jscolumns == 'true'} onload="P7_equalCols2(0,{if $template_option.layouttype != '1col'}'content','DIV',{/if}'serendipityLeftSideBar','DIV','serendipityRightSideBar','DIV')"{/if}>

folgendes:

Code: Select all

<body id="{$staticpage_pagetitle}|@makeFilename}" {if $template_option.jscolumns == 'true'} onload="P7_equalCols2(0,{if $template_option.layouttype != '1col'}'content','DIV',{/if}'serendipityLeftSideBar','DIV','serendipityRightSideBar','DIV')"{/if}>

(ich nehme an, dass der Modifier wie auch in der plugin_staticpage.tpl sein muss, Garvin?)

Wenn man jetzt z.B. eine statische Seite mit dem pagetitle "blafasel" hätte, könnte man in CSS folgendes machen:

Code: Select all

#blafasel #serendipity_banner {
    background-image: url("/pfad/zum/bild");
}

Optional kann man da auch noch background-position und background-repeat setzen, wie es das CSS von BP in der index.tpl im <style>-Bereich im <head> vorgibt. Dürfte in den meisten Fällen aber gar nicht nötig sein, weil man sehr wahrscheinlich ja Headerbilder gleichen Formates verwenden wird, die auch gleich ausgerichtet werden. Und genauso macht man das halt auch für alle anderen Seiten, die ein individuelles Headerbild haben soll.

Den pagetitle sollte man sich wohl mit Firebug jeweils aus der id des body-Elementes in der jeweiligen Seite fischen, weil der @Modifier da eventuell den in der Verwaltungsoberfläche eingetragenen pagetitle noch bereinigt (Stichwort: Umlaute).

Optimal ist das technisch allerdings nicht, weil für die statischen Seiten mit individuellem Headerbild beide Grafikdateien geladen werden – Standard-Header und individueller Header. Das heißt nicht (unbedingt, siehe unten), dass beide Dateien angezeigt werden, aber sie werden halt geladen und verzögern ggf. den Seitenaufbau. Wenn überhaupt, würde ich das nur mit weboptimierten Bildern in überschaubarer Dateigröße machen.

Und da alles, was ich eben geschrieben habe, komplett aus dem Kopf geschrieben und somit ungetestet ist, könnte es auch noch sein, dass dabei die Kaskade dazwischenspuckt und man dem individuellen Headerbild noch ein !important mitgeben muss. Glaube ich zwar nicht, bin mir aber nicht sicher.

YL

Template Bulletproof - Headerbild für statische Seiten

Template Bulletproof - Headerbild für statische Seiten

Re: Template Bulletproof - Headerbild für statische Seiten

Re: Template Bulletproof - Headerbild für statische Seiten