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
Quote from: nibz on November 22, 2012, 02:40:58 PM
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