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?
  • 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 '17 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 '17 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 '17 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 '17 at 14:24
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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