possible to make a responsive theme work with mobile without editing config.php ？

jeongwee

is there anyway to make a responsive theme work with mobile without adding $Configuration['Garden']['MobileTheme'] = 'theme-name'; to config.php ?
in addon.json or about.php maybe?

R_J

Add "mobileFriendly": true, to addon.json or 'MobileFriendly' => true, to the about.php

jeongwee

@R_J

sry, it doesnt work. vanilla still using the origiral mobile theme replacing my responsive theme on mobile.

R_J

Having "MobileFriendly" in the theme information is needed that you can choose the theme to be the mobile theme. Got to the dashboard and the themes and look for the mobile theme section (it's a tab on the themes page)

jeongwee

i have try both "mobileFriendly": true, "mobileFriendly": "true", and clear cache / clear cookie on broswer .
they dont fix it , still only default mobile theme form the dashboard. vanilla 2.6.0here.

{
"key": "a",
"name": "a",
"description": "a",
"version": "1.0.0",
"type": "theme",
"license": "MIT",
"MobileFriendly": "true",
"author": [{
"name": "a",
"email": "a@a.com"
}],
"layout": {
"categories": "Modern",
"discussions": "Modern"
},
"options": {
"styles": {
"Default": "%s",
"Red": "%s_Red",
"Orange": "%s_Orange",
"Yellow": "%s_Yellow",
"Green": "%s_Green",
"Cyan": "%s_Cyan",
"Blue": "%s_Blue",
"Purple": "%s_Purple",
"Ocean": "%s_Ocean"
}
}
}

R_J

Sorry, my fault! It must be "isMobile": true,

jeongwee

@R_J
thank you ,thats correct!
may i ask another question?
the theme uses format screenshot_**.png for pictures.
whats the format of picture for mobile themes?
i believe the tutorial article didnt tell that.

R_J

@jeongwee said:
whats the format of picture for mobile themes?

I do not know that, but from looking at the /themes/mobile folder, I would assume that "screenshot" is used for desktop themes and "mobile" is used for mobile themes

jeongwee

something went wrong.
yes, the mobile is using my theme now.
but after i click on another theme and then refresh the page.
my theme gone from desktop themes and no matter how i refresh the page the theme doesnt coming back.
and on my last comment ， i didnt check carefully , i can not enable a theme from it, they are all enabled....
now i go back to the site, the theme is broken, but on mobile it works fine.

jeongwee

is that i cant enable the theme for both mobile and desktop at a same time from dashboard by using "isMobile": true, ?

R_J

I don't think there is a way to make a theme desktop and mobile at once. You could achieve that with a trick, though. Add something like that to your about.php:

    'Options' => [
        'Text' => [
            'Mobile Theme' => [
                'Description' => 'You can use this theme as your mobile theme, too ',
                'Type' => 'checkbox'
            ]
        ]
    ]

In the themehooks file something like that should do the trick:

    public function settingsController_render_before($sender, $args) {
        if (
            $sender->Request->getPath() == '/dashboard/settings/themeoptions' &&
            c('ThemeOption.Mobile Theme') == true
        ) {
            saveToConfig('Garden.MobileTheme', 'YourThemeName');
        }
    }

jeongwee

thx @R_J
i have questions about it
1.i have a addon.json now and theres no about.php, even i creat one, it is empty before adding the codes to it. so am i still able to use the about.php when the addon.json alrdy exist?
2.if it is able to add a about.php when addon.json alrdy exist ,and add the codes into it. but since its a "trick" ,will the "trick" possibly cause any problem or cause any problem in the future ?
3.by add $Configuration['Garden']['MobileTheme'] = 'theme-name'; to config.php or make the "trick" to make the theme works on both desktop and moble. which one do you recommanded ?

R_J

about.php is the old format. You do not really need it if you use addon.json

Instead of using the PHP array from above, for the addon.json you would need the same info in json format.

The code needs to be in a theme hooks file.

I have called it a trick, but in fact it is a super-genius-solution for solving a problem. There might be an even more elegant solution in the future, but my solution would work nevertheless.

You can certainly change the line in the config directly, but if you want to publish your theme, it is always nice to be able to offer a friendly gui.

jeongwee

ty , appreciated. but since i cant change the picture of mobile theme, it is look bad . i will stay with adding $Configuration['Garden']['MobileTheme'] = 'theme-name'; to config.php.

Shadowdare

@R_J said:
I have called it a trick, but in fact it is a super-genius-solution for solving a problem. There might be an even more elegant solution in the future, but my solution would work nevertheless.

You can certainly change the line in the config directly, but if you want to publish your theme, it is always nice to be able to offer a friendly gui.

I like your solution. Clever!

@jeongwee, I don't think you can set two separate thumbnails for the theme unfortunately, so just having it be a "desktop theme" and applying this solution should work nicely.

R_J

There' always a way:

     public function settingsController_render_before($sender) {
        if (!$sender->ResolvedPath == 'dashboard/settings/mobilethemes') {
            return;
        }

        // Get all themes.
        $themes = Gdn::themeManager()->availableThemes();

        // Make Bootstrap theme a mobile theme;
        $themes['Bootstrap']['IsMobile'] = true;
        $themes['Bootstrap']['ScreenshotUrl'] = '/themes/Bootstrap/mobile.png';


        // Filter themes.
        foreach ($themes as $themeKey => $themeData) {
            // Only show mobile themes.
            if (empty($themeData['IsMobile'])) {
                unset($themes[$themeKey]);
            }
            // Remove themes that are archived
            if (!empty($themeData['Archived'])) {
                unset($themes[$themeKey]);
            }
        }
        uasort($themes, ['SettingsController', '_NameSort']);
        $sender->setData('AvailableThemes', $themes);
    }

    public function settingsController_themeOptions_create($sender) {
        $sender->mobileThemeOptions();
    }

Putting this into the themehooks file makes Bootstrap theme an available mobile theme. And if there would be mobile.png file in the themes folder, it would be displayed. The theme options are not very elegant, but I would call this code a "tweak" and not a real smooth solution.

By the way: when using a themehooks file, you can use

public function setup() {
    saveToConfig('Garden.MobileTheme', 'YourTheme');
}

and that would make your theme automatically also the mobile theme. But that changes a config setting that the user is not expecting, and therefore I would call it bad practice.

jeongwee

ty ,both im trying.