Page 1 of 1

Changing Logo header image for different media types

Posted: Mon Oct 29, 2012 8:29 pm
by mmoltzan
My current Logo/Header scales nicely with the Protostar template option fluid_layout set to on.

But I need to display a less complicated logo/header image on handhelds. So I'm wandering how to change the index.php file for the Protostar Template so it would test the media type and load a header image for different media types?

ie.

if (@media handheld) then load alternate image from the one set in the template

else run normal.

Thanks

Code: Select all

// Logo file or site title param
if ($this->params->get('logoFile'))
{
	$logo = '<img src="'. JURI::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
}
elseif ($this->params->get('sitetitle'))
{
	$logo = '<span class="site-title" title="'. $sitename .'">'. htmlspecialchars($this->params->get('sitetitle')) .'</span>';
}
else
{
	$logo = '<span class="site-title" title="'. $sitename .'">'. $sitename .'</span>';
}

Re: Changing Logo header image for different media types

Posted: Thu Nov 01, 2012 4:53 pm
by numiah
I hope you find the answer to this.
I'm struggling with the same issue.

Re: Changing Logo header image for different media types

Posted: Sun Nov 04, 2012 11:27 pm
by vidak
Today is my first Bootstrap day in CSS and my answer is probably not good but you can try add two img tags. One set with class='hidden-tablet visible-desktop visible-phone' and another class='visible-tablet hidden-desktop hidden-phone'

$logo = '<img class='hidden-tablet visible-desktop visible-phone' src="'. JURI::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />
<img class='visible-tablet hidden-desktop hidden-phone' src="'. JURI::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';

... and change src JURI::root() to real images path ... ?

more on http://twitter.github.com/bootstrap/sca ... responsive

Re: Changing Logo header image for different media types

Posted: Tue Nov 06, 2012 7:47 pm
by numiah
Thank you. I'll give it a go.