Author Topic: Standard logo and changing background (Read 14271 times)

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

Code: [Select]

page_content(2) the default image (here: standardheader.jpg) appears.

Code: [Select]

<?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

Argos · « **Reply #1 on:** November 22, 2012, 12:56:50 AM »

Try changing this:

Code: [Select]

<?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:

Code: [Select]

<?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!

Hans · « **Reply #2 on:** November 22, 2012, 09:52:44 AM »

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

nibz · « **Reply #3 on:** November 22, 2012, 10:27:49 AM »

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.

Argos · « **Reply #4 on:** November 22, 2012, 11:15:19 AM »

Yes, of course, I should have tought about that. Hm... I'm sure there must be some solution. Let me think about it.

Argos · « **Reply #5 on:** November 22, 2012, 11:29:45 AM »

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.

Code: [Select]

<?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

nibz · « **Reply #6 on:** November 22, 2012, 02:40:58 PM »

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

Argos · « **Reply #7 on:** November 22, 2012, 03:36:51 PM »

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.

nibz · « **Reply #8 on:** November 22, 2012, 06:15:11 PM »

My bad. It checks for the alt file.

Hans · « **Reply #9 on:** November 23, 2012, 11:09:48 AM »

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

nibz · « **Reply #10 on:** November 28, 2012, 01:01:26 PM »

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!)

Code: [Select]

<?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..

Hans · « **Reply #11 on:** November 28, 2012, 10:34:37 PM »

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

nibz · « **Reply #12 on:** November 28, 2012, 11:39:46 PM »

Read the PM ... curious what you think about it

nibz · « **Reply #13 on:** December 04, 2012, 08:08:16 PM »

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

Hans · « **Reply #14 on:** December 04, 2012, 11:15:31 PM »

Thanks!! gonna give it try this week.
Hans

Argos · « **Reply #15 on:** December 05, 2012, 11:42:01 AM »

Did you try my solution, it's much easier...

nibz · « **Reply #16 on:** December 05, 2012, 12:20:23 PM »

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

Argos · « **Reply #17 on:** December 05, 2012, 12:41:53 PM »

Nibz, I agree with you

Hans · « **Reply #18 on:** December 06, 2012, 07:55:07 PM »

Hi Argos
I couldn't explain much better than nibz did

. Sorry didn't have time to respond earlier on your question,
Hans

Argos · « **Reply #19 on:** December 06, 2012, 09:24:35 PM »

No probs

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: Standard logo and changing background (Read 14271 times)

Argos

Argos

Argos

Argos

Argos

Argos

Argos