Different logo for mobile AND different pages? - Support | Kriesi.at

Tagged: different logo, mobile

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
March 28, 2017 at 10:53 pm #768495
haydaw
Participant
I currently have a site setup with a different logo on the homepage. I did this by setting the theme logo to the logo for all pages and using
```
add_filter('avf_logo','av_change_logo');
function av_change_logo($logo)
{
    if(is_page(97) )
    {
    $logo = "http://website.com/logo-image.png";
    }
    return $logo;
}
```
And I when attempting to use the other code to use a separate mobile logo I run into issues. I’m not very familiar with PHP so I am having a hard time combing the code to get it to function correctly, or if it can at all, or if it should just be done through css.

Here is the mobile code I was using
```
add_filter('avf_logo','av_change_logo');
function av_change_logo($logo)
{
    if(wp_is_mobile() )
    {
    $logo = "http://kriesi.at/wp-content/themes/kriesi/images/logo.png";
    }
    return $logo;
}
```
- This topic was modified 7 years, 7 months ago by haydaw. Reason: added code tag
March 28, 2017 at 11:16 pm #768502
Guenni007
Participant
maybe it is only because you have now two functions with the same name ;)
```
add_filter('avf_logo','av_change_mobile_logo');
function av_change_mobile_logo($logo){
    if(wp_is_mobile() ) {
    $logo = "http://kriesi.at/wp-content/themes/kriesi/images/logo.png";
    }
    return $logo;
}
```
but i would try this code instead:
```
function avia_custom_mobile_logo(){
if(wp_is_mobile()){
?>
 <script>
jQuery(".logo img").attr("src", "http://kriesi.at/wp-content/themes/kriesi/images/logo.png")
 </script>
<?php
}
}
add_action('wp_footer', 'avia_custom_mobile_logo');
```
March 29, 2017 at 8:00 am #768640
John Torvik
Inactive Moderator
Hi,

The above code works, but you need to put a “;” in the jQuery function.

The incorrect:
```
jQuery(".logo img").attr("src", "http://kriesi.at/wp-content/themes/kriesi/images/logo.png")
```
the correct:
```
jQuery(".logo img").attr("src", "http://kriesi.at/wp-content/themes/kriesi/images/logo.png");
```
Thanks Guenni007 for the code :)

Best regards,
John Torvik
March 29, 2017 at 8:35 am #768661
Guenni007
Participant
yes – Thanks that is right syntax – sorry – so here is for copy / paste the whole correct code:
(btw. it works without semicolon too – but better is to have the correct way)
```
function avia_custom_mobile_logo(){
if(wp_is_mobile()){
?>
 <script>
jQuery(".logo img").attr("src", "http://kriesi.at/wp-content/themes/kriesi/images/logo.png");
 </script>
<?php
}
}
add_action('wp_footer', 'avia_custom_mobile_logo');
```
March 29, 2017 at 11:35 pm #769161
haydaw
Participant
Hmmm I added the code but ~~no luck!~~ the code semi-works. It’s only displaying on a mobile device and not on browsers at mobile widths.

I knew it would be an issue with the same function, but wasn’t sure how to work around that. You can take a look at the site here:

Home

And here is the full code I added to the theme functions.
```
add_filter('avf_logo','av_change_logo');
function av_change_logo($logo)
{
    if(is_page(97) )
    {
    $logo = "http://dev.andrewmorrallarchitect.com/wp-content/uploads/2017/03/Logohome-150-numbers.png";
    }
    return $logo;
}

function avia_custom_mobile_logo(){
if(wp_is_mobile()){
?>
 <script>
jQuery(".logo img").attr("src", "http://kriesi.at/wp-content/themes/kriesi/images/logo.png")
 </script>
<?php
}
}
add_action('wp_footer', 'avia_custom_mobile_logo');
```
Any advice is greatly appreciated. Thanks!
- This reply was modified 7 years, 7 months ago by haydaw.
March 30, 2017 at 2:34 pm #769487
Guenni007
Participant
well on my iphone i see the kriesi logo on your page.

the hint on your beginning thread was that function name was the same ( function av_change_logo($logo) ) so i did take a different name for the second rule

But you have to change it in that code by your alternative logo and you have to style it via quick css
- This reply was modified 7 years, 7 months ago by Guenni007.
March 30, 2017 at 2:43 pm #769492
Guenni007
Participant
and btw you only asked for a mobile logo version – why don’t you ask for a small screen logo ! ?

To have a good answer there has to be good question ;)
i don’t know if window load function is necessary but try that instead mobile rule
```
function av_dif_mobile_logo(){
?>
 <script>
jQuery(window).load(function(){
if (jQuery(window).width() < 480) {
jQuery(".logo img").attr("src", "http://kriesi.at/wp-content/themes/kriesi/images/logo.png");}
});
 </script>
<?php
}
add_action('wp_footer', 'av_dif_mobile_logo');
```
April 6, 2017 at 4:25 am #772940

haydaw
Participant

So I updated this in the backend, and this latest version works, however once the logo loads it does not change back if the browser expands again.
Is this something that will be achievable through php/js or should I just use css to swap the images out?

Thanks!
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.