Changing Logo header image for different media types

[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>';
}

[numiah]

I hope you find the answer to this.
I'm struggling with the same issue.

[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

[numiah]

Thank you. I'll give it a go.