Page dependant background image?

[jakovbak]

Hello everyone!
Is it possible to use

{content_image block='MyImage' dir='img'}

for a background image in a <div>? I have tried with

<section id="chapterimage" background='{content_image block='MyImage' dir='img'}'>

and it gives me a dropdown menu to pick an image when editing page but there is no output in front-end (you can see it at http://www.adriaticsolution.hr/index.php?page=marine).

Thank you in advance for any kind of help or ideas!
Regards,
jakovbak

[Jo Morg]

Look at your source html and then look at the tag help text:

(optional) urlonly='' - output only the url to the image, ignoring all parameters like id, name, width, height, etc.

[Rolf]

https://www.cmscanbesimple.org/blog/ass ... e-per-page

[jakovbak]

Hello Jo Morg and Rolf!
Thank you for helping me out on this!

@Jo Morg - I did notice source html and urlonly option but couldn't get it to work (several attempts - from urlonly='0' to urlonly="false")... Shouldn't it be off by default?
To me, if I would be able to make it work, this method looks most straightforward and I would really like to use it.

@Rolf - I'm checking your link and I'll try suggested methods and get back to you with results!

Thank you again and best regards!
Jakovbak

[Jo Morg]

Keep in mind that urlonly='0' and urlonly="false" all resolve to TRUE in PHP and Smarty.
urlonly=0 or urlonly=false or even urlonly=FALSE should work fine

[jakovbak]

No luck with this:

<section id="chapterimage" background="{content_image block='MyImage' dir='img' urlonly=0}">

Still only url of the image in output...

[jakovbak]

@Rolf - did it!!! Method #2 worked perfectly. Still, I would really like to know how to deal with that urlonly issue so I could assign an editor to change background images. I don't like them to mess around with the css.
I'll leave this topic open for awhile if someone figure out urlonly='' solution.
Thank you guys and have a great rest of the day!
Jakovbak

[rotezecke]

did u try

Code: Select all

urlonly=1

[jakovbak]

Yes and it didn't work. Really confising and frustrating.

[Rolf]

for a background image in a <div>? I have tried with

<section id="chapterimage" background='{content_image block='MyImage' dir='img'}'>

Use inline style background declarations instead. Afaik background="" doesnt work

[jakovbak]

Thank's Rolf but it would lead me to a territory unknown to me... Let me explain a bit:
- Editor of the site should be able to change background image in Page Edit tab via dropdown selector.
- I don't know how to write inline style with smarty commands or tags or whatever to make it work. I have tried thou, with a piece of code like this

Code: Select all

<section id="chapterimage" style="background-image: {content_image block='MyImage' dir='img'}">

but it didn't work.
I believe it would be a very handy feature if it comes to life (for instance: if a page is about food, we don't want carousel but it won't hurt if an editor changes background image according to seasonal groceries or something like that), but if we can't find a solution I'll stick with css/page alias method.
However, this topic is still open to everyone who finds it interesting or challenging enough to search for solution.
Many thanks and have a great day!
Jakovbak

[velden]

Jakovbak, it's nothing special. Many people do it like that.

I would be interested in what it DOES do; there must be some kind of html output (frontend)

And in your last code example you're not using the urlonly=1 parameter.

[scooper]

and just in case you didn't try it, that 'background-image' inline style isn't quite right. It should be something like:

Code: Select all

<section id="chapterimage" style="background-image: url({content_image block='MyImage' dir='img' urlonly=1});">

but if you can let us see what the output actually when you do that we can take a better guess.

[jakovbak]

I'll be back home in about an hour and a half and I'll let you know when new link is ready.
Tnx!

[jakovbak]

Thank you scooper so, so much! You saved my day! I used your code and added in CSS

Code: Select all

section#chapterimage {
	background: no-repeat center center;
	background-size: cover;
}

and finally it works like a charm!
Also many thanks to all the others on their efforts and suggestions.
Good night and best regards,
Jakovbak