I must be doing something wrong here; hoping someone can help. Context is working fine as long as I don't include a breakpoint condition. The breakpoints are showing up in the list which presumably means I haven't used any illegal syntax (they're very simple, e.g. "all and (max-width: 479px)") but as soon as I add a breakpoint condition to a working context, it stops working. Any ideas about what configuration step I may have missed or what else I can do to troubleshoot?

Comments

goldenfire’s picture

I'm having similar issues.
I can add, when developing locally, the break points work for me, but when placed on a liver server (gotPantheon) they are not working. Other contexts are working fine, just not breakpoints.
I've tried disabling varnish and all caching without any success.

BrightBold’s picture

@goldenfire — I am on Pantheon too, so I wonder if there's anything about their environment (Pressflow? Varnish? Redis?) that is affecting our sites.

sec1214’s picture

I am also Pantheon and the breakpoint condition does not work with context and delta. If anyone has a solution please let me know.

joshk’s picture

Hey all,

I took a look at this, and it's definitely something you can't use on Pantheon. I'm sorry to say I can't recommend you use it on any production server anywhere.

The module works by having the user-agent (javascript) detect a number of settings about the browser, put this in a cookie, and then send it along with the page request to Drupal. Drupal can then evaluate the cookie and change the CSS or context served.

That's a nice idea, but here's the problem: Drupal needs to process that cookie every single pageload. You're basically saying "no page caching, ever". That's unacceptable for any public-facing site. The way we have our Varnish configured, this isn't going to be allowed to work, so you'll need to find another means to achieve your use-case.

If you want to let me know a bit more about what you're trying to do, I can try and offer some suggestions.

sec1214’s picture

Hi Josh,

Thanks for responding. I am trying to get the blocks in the omega theme to arrange themselves according the screen size.

theduke’s picture

Joshk:

You are not entirely correct, there are ways to cache.
A while ago I adapted the module to store the currently active breakpoints by name instead of the resolution.
This means there is only a small amount of possible cookie values.

You now can cache efficiently by configuring the cache backend to include the "context_breakpoints" cookie for determining the cache key/the uniqueness of a page.

This is possible with Varnish, for example, by altering vcl_hash.

I realize that Varnish is out of reach for many developers,
so I have also written a patch for the boost module that makes it work with my module: http://drupal.org/node/1973266

So while caching is more complicated, it is certainly possible.

theduke’s picture

@goldenfire and @brightbold:

I will update the readme soon with instructions on how to configure Varnish.

JonesUI’s picture

@theduke:

I'm trying to get your Boost patch for Context Breakpoint working.

I've successfully patched Boost (I think) and enabled it on my server and I have Context Breakpoint configured to "Save resolution in cookie"

I can see that Boost is working but I don't know what settings to modify to in Boost to preserve the Context Breakpoint cookie.

Can you point me in the right direction?

(BTW, when applying the patch file using OS X, the patcher hung unless I used the --verbose option... maybe the patch didn't actually work?)

Alternatively, could you send me the patched version of Boost that you have working?

Thanks!

nightlife2008’s picture

Hey theduke,

Could you provide a quick note about the Varnish VCL configuration?

I just can't seem to get this working properly, as Varnish sometimes caches the "context-altered" page ouput, after the context_breakpoint reload has fired...

The next visitor, would see the same altered version, which isn't the wanted result ofcourse...

Thanks in advance!

*edit* Found the updated README.txt in your latest dev version. Thx !

BrightBold’s picture

Any advice for those of us on Pantheon, since it's running Varnish but we don't have the ability to configure it? It does look like we could deliver a cache-segmentation cookie per http://helpdesk.getpantheon.com/customer/portal/articles/425726 (scroll down to the section on STYXKEY cookies under Advanced Topics.) So I guess that's the way to go — if anyone else is doing this and has a code example that you could share, that would be appreciated!

BrightBold’s picture

Title: Can't get breakpoint contexts to work » Breakpoint contexts doesn't work with Boost or Varnish caching
Les Lim’s picture

BrightBold’s picture

I just re-read Pantheon's joshk's comment and realized he asked for more information but only sec1214 provided it. Here's my use case:

I have a responsive site built on a child theme of Zen with a language switcher block placed (using Context) at the top of the sidebar. This is great on a wide screen — the language switcher is always visible near the top of the page. However, on mobile, the sidebar is pushed down below the content, so if you hit the site in the wrong language you have to do a lot of scrolling to find the option to change languages (and more likely you'll just fail to realize there's a Spanish option at all and just bail.) So I'd like to move the block into the header region when the width is narrow.

joshk’s picture

You now can cache efficiently by configuring the cache backend to include the "context_breakpoints" cookie for determining the cache key/the uniqueness of a page.

That's good to hear.

If the cookie name were configurable, you could make this work on Pantheon via use of our STYXKEY cookie:

http://helpdesk.getpantheon.com/customer/portal/articles/425726-varnish-...

That will allow you to set different vcl_hash values based on the cookie value.

However, this cookie won't be set on the initial pageload. Ideally you would combine this with a fast-loading early JS (not wrapped in document.ready()) which would set the cookies and trigger a redirect or reload in the case of a mobile device — or if you want to be "mobile first" in the case of a desktop browser.

manmohandream’s picture

Issue summary: View changes

@BrightBold

Is this fixed for you? I am facing this issue too in D7.

Regards
Manmohan

BrightBold’s picture

@manmohandream Unfortunately since this was two years ago, I can't remember what I did!

Håvard’s picture

Same problem here (Pantheon). Critical issue!!

endiku’s picture

Does anyone have a working solution for the breakpoint_contexts cookie with Varnish (4 specifically). I see references above but there was never anything in a readme that I could find describing the VLC configuration. I've read numerous examples and tested various VLC configurations but haven't gotten anywhere. If someone has a working Varnish config with Context Breakpoints it would be extremely helpful.

joro78’s picture

In my .vcl file in section sub vcl_recv (Varnish 4):

set req.http.Cookie = regsuball(req.http.Cookie, ";(SESS[a-z0-9]+|SSESS[a-z0-9]+|context_breakpoints+|NO_CACHE)=", "; \1=");

Remember to reload & restart the varnish service, after editing.

Context Breakpoints works as expected afterwards.

robotjox’s picture

I added the line from #19 in my vcl file, and Varnish resumed working. But none of the block contexts are working any longer :/