base_href html-tag runs into problems with responsive images

Scott Jehl has a method for responsive images which currently is the only reasonable solution to work with. But it depends on base href tag which should be changed for different devices:
https://github.com/filamentgroup/Responsive-Images

What do you think how it can be solved with MODX?

Anselm,

Could you describe the usage issues in more depth. It’s not clear what is failing and what you are trying to accomplish.

@novolo: Have you tried it?

I did try it - though it seemed likely that it would not work!

And............

it did not work - at least with furls on it did not work.

After a quick perusal of the resulting html (after the the js runs) it seems that:
Either the rewrite rules it needs conflict with the rules used by furl,
and/or
the base url thing it does breaks things.
It seems to get rid of the base url and adds -


I’m sure it could be made to work with Modx but it is going to require one or both of them to have some modifications so that the two play nice.

It would work if a user is not acting too fast. base_href is preserved in this case and is only changed for a short time to another url then back to original. But in the meantime it’s the wrong path…
I didn’t tried it but heard of it in a (nerd-)podcast today with these problems mentioned so I would ask you if there are already thoughts of it. I think it needs to be discussed as responsive design is now only the small start and we will produce such sites in a couple of years as a standard.

I’m very interested in any discussion about this but in my opinion it would be unreasonable to change MODx to accommodate what is at the moment an experimental technique. I imagine the web community will soon enough produce a more solid solution for this - see today’s article on css-tricks.

I haven’t personally tried the Jehl script with MODx, but if I’ve understood it correctly I’m wondering if it could be achieved with clever use of a plugin to insert the [tt]/rwd-router/[/tt] routing... or even just using that as a standard prefix for all image, script and stylesheet paths.

This could become a useful addition to the HTML5 MODx Boilerplate

Quote from: lucas at Jun 28, 2011, 11:38 AM

This could become a useful addition to the HTML5 MODx Boilerplate

Yep. It will… think not in first version of v2 but it definitely will.

Maybe this could be a solution. http://adaptive-images.com/

mr.johansson,

I've been looking at this solution.
However, if i use Chrome, open their webpage, click one of the smaller images (my screen res is 1024x768), below (second image on first line) the browser still retrieves the big image (555kb, becca.jpg).
Also tried Firefox: still 555kb transfered.
So the idea is good, but they can't make it work themselfs....

Or am I missing something?

Maurice.

Did you try making the site_url tag uncached? That's often necessary.

Hi BobRay,

I have not tried it in ModX as it doesn't even work for their site, adaptive-images.com (unless Chrome & Firefox are playing me)