Page 1 of 1

Page dependant background image?

Posted: Tue Apr 11, 2017 10:24 am
by 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

Re: Page dependant background image?

Posted: Tue Apr 11, 2017 1:09 pm
by Jo Morg
Look at your source html and then look at the tag help text:
tag help wrote:(optional) urlonly='' - output only the url to the image, ignoring all parameters like id, name, width, height, etc.

Re: Page dependant background image?

Posted: Tue Apr 11, 2017 1:16 pm
by Rolf

Re: Page dependant background image?

Posted: Tue Apr 11, 2017 1:26 pm
by 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

Re: Page dependant background image?

Posted: Tue Apr 11, 2017 1:29 pm
by 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

Re: Page dependant background image?

Posted: Tue Apr 11, 2017 1:35 pm
by 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...

Re: Page dependant background image?

Posted: Tue Apr 11, 2017 1:52 pm
by 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

Re: Page dependant background image?

Posted: Tue Apr 11, 2017 7:31 pm
by rotezecke
did u try

Code: Select all

urlonly=1

Re: Page dependant background image?

Posted: Wed Apr 12, 2017 5:47 am
by jakovbak
Yes and it didn't work. Really confising and frustrating.

Re: Page dependant background image?

Posted: Wed Apr 12, 2017 6:39 am
by 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

Re: Page dependant background image?

Posted: Wed Apr 12, 2017 1:50 pm
by 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

Re: Page dependant background image?

Posted: Wed Apr 12, 2017 6:17 pm
by 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.

Re: Page dependant background image?

Posted: Wed Apr 12, 2017 6:49 pm
by 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.

Re: Page dependant background image?

Posted: Wed Apr 12, 2017 7:16 pm
by 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!

[SOLVED] Re: Page dependant background image?

Posted: Wed Apr 12, 2017 8:22 pm
by 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