Laravel detect mobile/tablet and load correct views

Question

I have read how to add different paths or namespaces for views, but I think this is not a proper solution for me. What I would like to do it\'s to set a view base path for

Answer 1

I'm looking at the same issue here, basically wanting to "bolt on" a directory of mobile views without messing with my controllers (if possible).

One place to do this may be the config in app/config/views.php:

<?php

use Jenssegers\Agent\Agent as Agent;
$Agent = new Agent();
// agent detection influences the view storage path
if ($Agent->isMobile()) {
    // you're a mobile device
    $viewPath = __DIR__.'/../mobile';
} else {
    // you're a desktop device, or something similar
    $viewPath = __DIR__.'/../views';
}


return array(
    'paths' => array($viewPath),
    .....

seems to work, giving you a completely different directory to work from.

I'll continue to experiment, as perhaps there will be some overlap between the desktop and mobile includes, but we'll see.

PS: Agent ~= Mobile_Detect

Answer 2

For you Laravel 5 users in the future who are looking for a way to detect devices in the view; another option is to create a ServiceProvier - and then use View::share() - which will then make the device-detecting $agent available inside all of your views.

Install Agent

composer require jenssegers/agent

Create the service provider

php artisan make:provider AgentServiceProvider

In config/app.php

App\Providers\AgentServiceProvider::class,

in app/providers/AgentServiceProvider.php

<?php

namespace App\Providers;

use View;
use Jenssegers\Agent\Agent;
use Illuminate\Support\ServiceProvider;

class AgentServiceProvider extends ServiceProvider
{
    public function boot()
    {
        $agent = new Agent();

        View::share('agent', $agent);
    }

    public function register()
    {
        //
    }
}

Then inside your views

@if ($agent->isMobile())

    Show mobile stuff...

@endif

Answer 3

As suggested in a comment on the accepted answer (include mobile view path only on mobile and fallback to 'default' view):

<?php

$viewBasePath = realpath(base_path('resources/views'));

$viewsPaths = [$viewBasePath];

$agent = new Jenssegers\Agent\Agent();

if ($agent->isMobile()) {
    array_unshift($viewsPaths, $viewBasePath.'/mobile');
}

return [
    'paths' => $viewsPaths
    ...

This way you only override what you need. This may come in handy for emails and when you have several partial views that have the same html regardless of device category.

Note: Usage in controller doesn't change.

Example views:

├── views
|   ├── home.blade.php
|   ├── posts.blade.php
|   ├── post.blade.php
|   ├── emails
|   |   └── subscription.blade.php
|   └── partials
|   |   ├── posts-popular.blade.php
|   |   ├── banner-ad.blade.php
|   |   ├── post-comment.blade.php
|   ├── mobile
|   |   ├── home.blade.php
|   |   ├── partials
|   |       └── posts-popular.blade.php

Answer 4

You could create two folders mobile, desktop inside your view folder. The two folders hold the same views (only the filenames).

├── views
|   ├── mobile
|   |   ├── main.blade.php
|   └── desktop
|       ├── main.blade.php

Then inside your controller you can use the folder names to switch between the desktop and mobile views (or any other if you add more).

You only need to resolve the request's device through PHP. You can do it with this project: http://mobiledetect.net/.

Now your controller looks like:

public function getIndex() {
    $detect = new Mobile_Detect;

    return View::make( ($detect->isMobile() ? 'mobile' : 'desktop') . '.your-view-name' );
}

It's offcourse a good idea to refactor the ($detect->isMobile() ? 'mobile' : 'desktop') to a helper/static function. Or register it as an config item in a before route filter.