Tagged: different logo, mobile
-
AuthorPosts
-
March 28, 2017 at 10:53 pm #768495
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, 8 months ago by haydaw. Reason: added code tag
March 28, 2017 at 11:16 pm #768502maybe 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 #768640Hi,
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 TorvikMarch 29, 2017 at 8:35 am #768661yes – 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 #769161Hmmm 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:
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 #769487well 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 ruleBut 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 #769492and 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 rulefunction 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 #772940So 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!
-
AuthorPosts
- You must be logged in to reply to this topic.