Changing Logo header image for different media types

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
mmoltzan
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu May 03, 2012 9:02 pm

Changing Logo header image for different media types

Postby mmoltzan » Mon Oct 29, 2012 8:29 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Tue Oct 30, 2012 8:11 pm

Re: Changing Logo header image for different media types

Postby numiah » Thu Nov 01, 2012 4:53 pm

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

vidak
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Mon Mar 30, 2009 9:43 pm
Contact:

Re: Changing Logo header image for different media types

Postby vidak » Sun Nov 04, 2012 11:27 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Tue Oct 30, 2012 8:11 pm

Re: Changing Logo header image for different media types

Postby numiah » Tue Nov 06, 2012 7:47 pm

Thank you. I'll give it a go.


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: No registered users and 2 guests