Page 1 of 2

SOLVED: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 1:47 pm
by Adheera
Hoe kun je per pagina een ander achtergrond afbeelding instellen?
Ik las ergens:
You can put a smarty tag in the "Page Specific Metadata" field of a page, like {cms_stylesheet name='myspecialstylesheet'}

Dus een stylesheet gemaakt - bg01 - met alleen onderstaande regels erin. En {cms_stylesheet name='bg01'} in "Page Specific Metadata"
Maar dat werkt niet.
Wat doe ik fout?
***********
Waar is trouwens die Miniatuur en Afbeelding voor op de pagina -> Opties.
***********
body {
background: url(........bg01.jpg) no-repeat fixed center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 2:19 pm
by velden
Deze vraag is al meerdere malen aan de orde geweest.

Ik zou persoonlijk eens even kijken naar de {content_image} tag. Die is waarschijnlijk perfect geschikt voor jouw doel. Geen gedoe met losse stylesheets en makkelijk te selecteren afbeelding per pagina.

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 2:47 pm
by Adheera
{content_image block='afbeelding1' class='body'}
Maar hij pakt de class niet.
De afbeelding komt links bovenaan, boven de hele content... die zkt naar beneden.
na </__body> komt
<img class="body" alt="http://www.praktijkbewust-zijn.nl/uploa ... e-roos.jpg" name="afbeelding1" src="http://www.praktijkbewust-zijn.nl/uploa ... e-roos.jpg">

De style pakt ie niet.

Sorry als dit eerder gepost is. Ik ben al uren aan het zoeken, kan het niet vinden.

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 2:56 pm
by velden
Voorbeeld:

Ergens in de head-sectie van het template (tussen <head> en </head> dus):

Code: Select all

{content_image block='page_image' label='Pagina achtergrond' urlonly=1 dir='images/achtergrond' assign='page_image'}
<style type="text\css">
  {literal}
    body {
       background-image : url('{/literal}{$page_image}{literal}');
    }
  {/literal}
</style>

Denk dat het zo wel ongeveer klopt.

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 3:33 pm
by Adheera
YES, het werkt..
ook zonder {literal} in de style.
Werkte eerst niet, alles geprobeerd.... stond de slash verkeerd in <style type="text/css">
Tja, dan kun je lang puzzelen

Dank je wel, echt heel fijn.

{content_image block='page_image' label='Pagina achtergrond' urlonly=1 assign='page_image'}
<style type="text/css">
body {
background-image : url('{$page_image}');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

Re: SOLVED: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 3:36 pm
by Adheera
Echt heel blij mee.
TOP, dank je wel

Re: SOLVED: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 3:41 pm
by velden
Je kunt nu natuurlijk nog checken op de waarde van $page_image. Als die leeg is kun je ervoor kiezen een default achtergrond te tonen.

Code: Select all

background-image : url('{if $page_image}{$page_image}{else}{uploads_url}/template/defaultbackground.jpg{/if}';
als voorbeeld natuurlijk

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 3:49 pm
by Adheera
Helaas... werkt alleen in FF en dan nog... hij rekt 'm heel raar uit.
Chrome, Opera en Safari snappen het niet.

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 3:54 pm
by velden
Adheera wrote:Helaas... werkt alleen in FF
Chrome, Opera en Safari snappen het niet.
Dat kan natuurlijk niet. Dan staat er een fout in de stylesheet ofzo. De output van cmsms is niet afhankelijk van de browser.

Het je een voorbeeld-link?

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 3:57 pm
by Adheera
http://www.praktijkbewust-zijn.nl/index.php
http://www.praktijkbewust-zijn.nl/voorstellen.html

Ik zie de hele style niet staan in de source van Chrome, in FF wel.
Met en zonder {literal}

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 4:32 pm
by deactivated010521
----------

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 4:59 pm
by Adheera
Alleen niet in IE, de andere browsers snappen het wel.
http://www.praktijkbewust-zijn.nl/ die staat buiten de CMS.
En dit was de 1e opzet, met dezelfde style in de head. Doet het ook overal.
http://adheera.nl/roos/index8.html

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 5:31 pm
by velden
De code staat (natuurlijk) wél in de source van beide browsers (Chrome en FF). In beide gevallen is overigens de url leeg.

Ik zie ook dat de quotes ontbreken binnen de url() maar weet niet of dat per se verplicht is.

Code: Select all

<style type="text/css">
 
    body {
       background-image : url();
	-webkit-background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
    }

</style>
Denk eraan dat je je browser goed refresht als je iets wijzigt in het template.

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 5:59 pm
by Adheera
Ah die kl.... cache...
Met of zonder quotes werkt het niet, die is ook leeg url() in alle browsers behalve FF.
Quotes zijn volgens mij ook niet verplicht.
velden wrote:De code staat (natuurlijk) wél in de source van beide browsers (Chrome en FF). In beide gevallen is overigens de url leeg.

Ik zie ook dat de quotes ontbreken binnen de url() maar weet niet of dat per se verplicht is.

Code: Select all

<style type="text/css">
 
    body {
       background-image : url();
	-webkit-background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
    }

</style>
Denk eraan dat je je browser goed refresht als je iets wijzigt in het template.

Re: Achtergrond afbeelding per pagina

Posted: Mon Nov 26, 2012 6:05 pm
by velden
Even voor de duidelijkheid in géén enkele browser verschijnt er een achtergrond op die pagina!

Tenzij je expliciet browser-specifieke code inbouwt (en die kans lijkt me klein) zal de output ook in alle gevallen hetzelfde zijn.

Er gaat dus duidelijk iets niet goed m.b.t. je implementatie van de {content_image} tag.

Wellicht kun je het betreffende deel van je template hier posten?
Het is natuurlijk ook wel belangrijk dat er daadwerkelijk een afbeelding is geselecteerd.