Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

Change theme automatically for mobile and desktop

theme

Solved by Kai View solution

Started by Kai 7 years ago · 6 replies · 1004 views
7 years ago

Hi all,
I have 2 different themes for my website: one is for desktop, and one is for mobile. Now I want to switch them automatically based on users device. I've found [Change theme dynamically](/forum/archive/change-theme-dynamically-t3524) but there is some code missing because there is no text after the final doublepoint 😔

Maybe anyone could share the full code how to switch themes based on users device?

Many thanks!

7 years ago

Maybe there was just no code behind the : in the mentioned post ? 😀
Anyway, I think it should be possible with the given hint.
Just try an event Hook like this which is fired just before the theme is rendered, as said.
refer to the Plugin Tutorial on how to act upon event occurrence.
at that point, you should evaluate which theme is currently in use and switch, if it is not the one you wish in case of mobile_detect == true.

7 years ago

Thanks @hoernerfranz for the info! Instead of this deep dive, I'll create a separate subdomain m.mydomain.com and copy all the files to that place with a different theme by default. Nevertheless thanks for your support!

7 years ago

@Kai23, Maybe I'm overlooking something, but aren't most themes responsive? Meaning they adapt to the window size of the mobile device or desktop...

What is the rationale for using two different themes?

7 years ago

@pamtbaau, sure, most templates are responsive. But you still have the same stuff, just displayed more nicely. With dedicated themes for mobile (and or tablet) and desktop you could also decide better about the size of the page. In many cases mobile has a slower network than desktops. Therefore e.g. in my blog overview I could display 10 latest entries on desktop but just 5 on mobiles.
Additionally I see that many sites have additional subdomains m.mydomain.com , probably due to the mobile-first trend.
My theme looks completely different on mobile and on desktop. On mobile it's more like an app, with tab bar at the bottom. That does not make too much sense on desktops.

7 years ago Solution

If anyone is interested: I'm now using JS Redirection Mobile Site. Just add the JS file to the js-path of your theme.

I then added this script in the head of base.html.twig of my desktop theme so it's used on every desktop page:

HTML
<script src="/user/themes/mydesktoptheme/js/redirect.js"></script>
<script>
    SA.redirection_mobile ({
        mobile_prefix : "m",
        tablet_redirection : true,
        keep_path : true,
        keep_query : true
    });
</script>

The mobile prefix "m" is the subdomain of my mobile page. With keep path I could forward the user to the correct page. So if a smartphone user opens http://mydomain.com/folder/anypage he will be automatically forwarded to http://m.mydomain.com/folder/anypage 😎💪

👍 1
7 years ago

You might want to be sure that having the same (almost) content on 2 differents url will not affect your SEO.

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 76 7 hours ago
General · by pamtbaau, 13 hours ago
1 47 12 hours ago
General · by Andy Miller, 1 day ago
0 44 1 day ago
General · by Marcel, 12 months ago
6 346 5 days ago
General · by Duc , 5 days ago
3 40 5 days ago