0

I'm fairly new to Drupal. In my current project, I'm using Drupal 8. The site is supposed to have a fairly different look depending on the device, in a way such that being responsive is not enough here.

So, within a single custom theme, I would like my site to have two different block layouts depending on the type of device (mobile / desktop) on which it is displayed. This can be achieved by showing / hiding blocks depending on the device. For performance reasons it is important for the hidden blocks to not be rendered at all in the HTML code (i.e. merely hiding with CSS won't do).

For this it seems that a combination of the Context module and its little brother Context Mobile Detect would do the trick. However, Context Mobile Detect is not yet available in Drupal 8, preventing me of using the Context module with the relevant condition.

  • Is this the right approach? Any other solutions for achieving what I'm trying to do here? This seems like a common enough problem to me and I'm expecting other developers to have found a way.
  • If it is: I'm tempted to write my own custom condition (wrapping the project Mobile Detect) so I can use it with the Context module. It seems Context uses the Drupal 8 Condition API, but I can't find any useful resource on how to write my own custom conditions in version 8 of Drupal. The official doc is sparse at best and I would rather avoid trying to reverse-engineer the thing. Any of you have a useful link/video/advice for this?
Improve this question
4
  • 1
    IMHO, this is a bad idea. You're going to have a lot of problems with caching, internal page cache and also external caches like Varnish do by default (varnish could be configured to do so) not cache by device, and you'd end up caching many different variations. What we've done for this use case is actually using a separte subdomain and theme to have a separate "mobile site". And then we have some JS to detect mobile clients and redirect them. Anything else is IMHO going to get you into trouble.
    – Berdir
    Mar 6, 2017 at 23:27
  • 1
    I agree with Berdir on this. If the layout changes to a degree that responsiveness is not an option, you should opt in for a complete different site and host it on a separate domain.
    – Ash U
    Mar 7, 2017 at 5:05
  • @Berdir: I guess this solution does not imply to have two separate instances of Drupal 8 for the same website? Did you achieve this with any specific module / method?
    – Zephyr
    Mar 10, 2017 at 11:27
  • No, it does not. What you need is a custom theme negotiator that picks your theme if you're on the mobile domain. Similar to how to admin theme selection works in Drupal 8, so you can look that up, copy and adjust it for your use case. See drupal.stackexchange.com/questions/201530/… for example
    – Berdir
    Mar 10, 2017 at 14:24

1 Answer 1

Reset to default
1

I followed the counsel of Berdir and Ash Upadhayay. Having a sub-domain dedicated to mobile devices is a sound advice as many important websites currently use this method. As they say, using the same domain for both version could cause problems with caching and referencing by indexation robots.

This however doesn't clash with my requirements, and I was able to fulfill them using the Drupal 8 version of the Domain Access module.

The Domain Access module allows to define specific sub-domains that Drupal 8 will be able to recognize. The module then makes possible to condition all manner of things depending on the current domain, including the block layout.

I installed the module itself and its contrib module (packaged with it) Domain Alias. This last module allows you to associate various patterns to a domain that works as an alternative way of detecting the domain. This allows to match the URLs of local installs of the project without changing the Domain configuration.

This is the perfect solution for me as I am now able to condition the display of blocks from a single page - the block layout page.

All that's left to do then is to redirect the user on the correct sub-domain depending on the device, using a module such as Mobile JS Redirect.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.