WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Hans on November 18, 2012, 04:48:43 PM
-
Hello fellow WB users,
I have found something like the following code here on the forum and I use it in combination with sections to give my customers an easy way to change header-images. When noting is set in a headersection with code page_content(2) the default image (here: standardheader.jpg) appears.
<?php
ob_start();
page_content(2);
$out1 = ob_get_contents();
ob_end_clean();
if(empty($out1)) {
echo '<img src="http://www.awebsite.nl/media/headers/standardheader.png" alt="A website title" />';
} else { echo $out1; }
?>
Now I am asked if it is possible to do the same but then to change the image not as "plain image" but as background-image. The client wants to place a logo over that background-image. That way he doesn't have to make headers-with-logo's but only one logo-image in the template that appears over the changing background header-images ;-)
Is that possible and is someone willing to share the code?
Thanks in advance
Hans
-
Try changing this:
<?php
ob_start();
page_content(2);
$out1 = ob_get_contents();
ob_end_clean();
if(empty($out1)) {
echo '<img src="http://www.awebsite.nl/media/headers/standardheader.png" alt="A website title" />';
} else { echo $out1; }
?>
to this:
<?php
ob_start();
page_content(2);
$out1 = ob_get_contents();
ob_end_clean();
if(empty($out1)) {
echo '<div style="background:url(http://www.awebsite.nl/media/headers/standardheader.png) 0 0 no-repeat;width:123px;height:123px;"></div>';
} else { echo '<div style="background:url('.$out1.') 0 0 no-repeat;width:123px;height:123px;"></div>'; }
?>You have to change 123px to the right size of your header. An empty DIV needs dimensions to show up.
Not tested though!
-
Hello Jurgen
thanks for your code! Unfortunately there seems to be an error in it, please look at the attached screenshot. I changed both width and heigt to the real dimensions. Hope you can find a solution!
Hans
-
I think the error is that the WYSIWYG by default put <img src="URL"> in.
And for your purpose you only need the url of the image. Not the whole img scr.
-
Yes, of course, I should have tought about that. Hm... I'm sure there must be some solution. Let me think about it.
-
Not the same method, but the same result is to let your clients upload a header with a fixed name, for example "header-alt.jpg" to some Media-folder and call that image directly with the function below.
<?php
if (file_exists('http://www.awebsite.nl/media/headers/header-alt.jpg') ) {
echo '<div style="background:url(http://www.awebsite.nl/media/headers/header-alt.jpg) 0 0 no-repeat;width:123px;height:123px;"></div>';
} else { echo '<div style="background:url(http://www.awebsite.nl/media/headers/standardheader.png) 0 0 no-repeat;width:123px;height:123px;"></div>'; }
?>
Not tested :roll:
-
I think this will also not work. Because it will allways try to load the alt image.
There is no check if there is or isn't a image.
I think your initial idea will work with some additional javascript to remove <img src" and ">.
To obtain only the url of the image.
But i'm no javascript expert
-
There is no check if there is or isn't a image.
But there is a check, isn't there? IF the alternative image exists, THEN use that image as background. IF the alternative image NOT exists, THEN show the regular image as background.
-
My bad. It checks for the alt file.
-
Interesting question isn't it ;-)
It's now a pure academic one because the client has decided to use different images with the logo on it (can be inserted as shown in the first post), but maybe (and I hope) someone finds a way nevertheless, because it could bring a multi-face site with only one template a step nearer.
Thanks for your contributions so far!
Hans
-
Attached a edited version of Ruud's minigallery.
You can only upload one image per gallery (the background image)
By default the logo in front of the background has to be media/logo.png
You could change this in the frontend.php if you really want to.
In your template use: (please notice i use block 2!)
<?php
ob_start();
page_content(2);
$out1 = ob_get_contents();
ob_end_clean();
if((strlen($out1) < 60) && (substr($out1,0,2) == '<a') && (substr($out1,-4) == '</a>')) {
echo 'YOUR DEFAULT CONTENT';
} else { echo $out1; }
?>
Where you have to replace the YOUR DEFAULT CONTENT placeholder by your own content.
A little demo over here:
nothing uploaded: http://slaaptotaal.com/addons/pages/no-image.php
with background uploaded: http://slaaptotaal.com/addons/pages/with-image.php
BTW the image you upload has to be JPG
Good luck :)
P.s. you can change the height and width of the background image in frontend.css
07 DEC - VERSION .0.3 ! Important please first remove previous versions installed, before installing this version
Note: This is an experimental module, for academic purpose!
I used Minigallery as a base, since i am not a PHP expert i will not be able to solve al your questions..
-
Hi nibz
I sent you a PM to thank you but want to do that here too ;-). I'll give it a try next week and let you know!
Thanks again
Hans
-
Read the PM ... curious what you think about it :)
-
Updated the file, there was an error.
The background image wasn't visible on some browsers due to a missing ' in the view.php, please update the module
-
Thanks!! gonna give it try this week.
Hans
-
Did you try my solution, it's much easier...
-
He Argos...
I know your solution is easier, but if you want a different image on multiple pages you have to make different templates or you have to work with e.g. PAGE_ID or PAGE_TITLE.
By default your solution can have just one alternative.
With mine you can have just one template, and for the user it's iintuitive, and i think that in Hans's case he wants more variations on different pages..
A while ago for a site i am maintaining i usede the page id and some css to style this like body.page-id12{},
But for a user this is difficult..
But my solution is a little playin' around :)
-
Nibz, I agree with you :-D
-
Hi Argos
I couldn't explain much better than nibz did ;-). Sorry didn't have time to respond earlier on your question,
Hans
-
No probs :-D