Context based on media queries

Media queries are specifically a user agent spec if I'm not mistaken. Not exactly sure how you would build conditions based on data that is client/browser side. If you come up with something please submit a patch for review or it can initially be created as a separate condition plugin for consideration. Thanks.

sub

@febbraro is right.

@bmx269 , @nigel.waters
You'd need to use something like http://drupal.org/project/browserclass or Themekey to pickup User-Agent information. The user agent string should be able to tell you what browser, version, operating system, and critical plugins are running on the client machine. This information should be more than adequate to deal with multiple devices (which I'm assuming you were trying to solve).

Context based on media queries would be best suited to responsive web design. Using projects like browserclass or themekey is for useragent sniffing- Responsive web just looks for the size of the viewport, regardless of device. Adding a way to do media queries via context would be a killer feature.

Responsive images using cookies has been proposed here :
http://blog.keithclark.co.uk/responsive-images-using-cookies/

Excuse my ignorance, but has this issue been closed because it isn't technically possible in Context? If so, what are the issues? A media query context in Context would be a game changer in many ways.

The idea of being able to do something like this is exciting. There is currently no way to push or pull content based on media queries. There are a few half-baked answers to do images, but not content. The alternative is to use device detection (which contradicts responsive design entirely) or use display:none in your css (which means the browser still has to load the info, but doesn't display it). If there was any way to determine the device viewport before constructing the page, it would be a complete game changer.

Fantastic! The status is showing up as closed (won't fix) so I thought that was the end of it. Personally, I don't see requiring JavaScript as a problem. If a mobile first approach is taken, then content and design will work on any mobile device that doesn't support JavaScript as a default. If someone turns off JS in a browser that supports it, I'm sure they have reasons, but I doubt optimal user experience is at the top of the list.

Any chance of starting a "chipin" or something similar for this? I don't have the development skills, but this would be a major leap forward for responsive Drupal design and I'd like to support its development somehow.

I would also be willing to chip in some dough to get it done, if there is someone willing to tackle it.

@nicoz, agree completely with #8. If a context could be created based on media queries or a JS equivalent, then the sky is pretty much the limit. Using Delta, one could create a different template structure entirely and present it to the browser based on viewport. This would solve the image issue as one could use two different views, one for width 960 and above an one for mobile using different image styles for each. Completely different blocks could be shown at different sizes with no redundant or hidden data. This is critical for those who don't have unlimited data plans, for instance. It isn't enough to collapse everything to a single column. Data needs to change base on the device as well.

Mobile tools ships with a Context for mobile devices. You can do a lot with it. And if u are working with a base theme, Omega can do the tricks. Additional modules; omega tools, delta, ctools(of-course), browscap, wurfl (if needed)
http://groups.drupal.org/omega-framework

The challenge is to create a context for screen size, not devices. Responsive design is supposed to be device agnostic and the use of mobile tools, wurfl, browsecap etc contradicts that.

sub

but has this issue been closed because it isn't technically possible in Context? If so, what are the issues

Yes.

The only way I can envision something like this would ever be possible is to let the theme set a cookie and re-use its value on the NEXT page load. My understanding of the way the context module works, is that it will assemble an ENTIRE page, rather than ever having the ability to pick-off regions based on some AJAX implementation. This feature request is actually comprised of both the client side and the server side, so I really don't see how Drupal could handle something like this (in D7 or prior).

What this feature request really asks is this:
1. Client requests a page (note: http headers DO NOT include ANY CSS or understanding of the viewport)
2. Drupal Renders a page (attaches javascript to set a cookie that will find out the media queries in your CSS that will match)
3. The client sets a cookie
4. The client is redirected to a new page, which Drupal will render (attempting to use the value of said cookie(s))
5. Context fires (NOW Drupal can re-structure the page)

Not to mention, I think this would be entirely theme dependent. The added overhead of trying to attach all of this, redirecting the site, and THEN getting the result you want is really wonky. I just don't see the benefit of a feature like this. If you plan your theme/site well enough, responsive approaches can be baked in--and thus a feature like this isn't needed.

There may be a possibility this could work in D8--but this module could be deprecated by core anyway.

Disabling blocks via context in a responsive design will not work well with cache I think. If anonymous page cache is on it will show the block enabled or disabled depending on the moment the cache is refreshed and that status will be the same for all devices until the next cache refresh. It's only possible I think when you have different urls, like when you work with a m. subdomain because then the page cache is different by subdomain.

@hansrossel, interesting.
Do you think that there could be problems also with css and cache?

Sub

sub

If you need this functionality, you can now use http://drupal.org/project/context_breakpoint

The media queries in omega theme set a class on the body element of 'wide', 'normal', 'narrow' or 'mobile'. Isn't there a way of adding a context condition that looks for body class and then sets template (or whatever action) accordingly?