The web2py modifications include the
{{is_mobile=request.user_agent().is_mobile}}
{{def SKYPE(number,phone):}}
<a href='{{response.write("tel:" if is_mobile else "callto:")
response.write(phone)}}'>{{=number}}</a>
{{return}}
So I can use SKYPE('xxx-xxx-xxxx','+1xxxxxxxxxx') which expands to <a
href="callto:+1xxxxxxxxxx>xxx-xxx-xxxx</a> or "tel:" on mobiles which seems
to be the recommendation as far I can find.
I use DEFER to delay the loading of images since the code is written using
document.write which allows the html to load first, it also works if
javascript is disabled since I use <noscript> to handle that. I use it as
follows {{=DEFER(URL('static/images','staff.jpg'),'Staff')}} and that
generates code like
<noscript><img src="/welcome/static/images/staff.jpg" alt="Staff"
/></noscript><script language="JavaScript">resizeImage(
"/welcome/static/images/","staff.jpg","Staff","")</script>
You can see the source for resizeImage at the website, but I wrap the image
in a <a> tag which opens the full size version of the image (unless it was
already full size), and loads the image from 1280/ 1024/ 960/ 800/ etc
directories. This means that mobile devices can be served a lower size
image to cut down on the bandwidth used, and also allows for the tweaks
rather than just a straight size reduction such as cropping a particular
image at lower resolutions.
I added the code for DEFER to html.py as
class DEFER(XmlComponent):
tag = 'IMG'
def __init__(self,url,alt=None,_class=None):
self.url = url
self.text = '<noscript><img src="' + url + '"'
if alt:
self.text += ' alt="' + alt + '"'
if _class:
self.text += ' class="' + _class + '"'
self.text += '/></noscript><script language="JavaScript">'
dir = url.rfind('/') + 1
self.text += 'resizeImage("' + url[:dir] + '","' + url[dir:] + '","'
;
if alt:
self.text += alt
self.text += '","'
if _class:
self.text += _class
self.text += '")'
self.text += '</script>\n'
def xml(self):
return self.text
I think it should have an extra parameter to control whether it should
include the <a> wrapping around the image.
Neil Harding
On Tuesday, September 4, 2012 5:15:47 AM UTC-7, Alan wrote:
>
> responsive layouts are pretty amazing, working through my own design at
> the moment after following the guide below:
>
>
> http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-responsive-layout-with-skeleton-navigation/
>
> might want to take a look so that the menu alters to a select dropdown to
> be more mobile friendly.
>
> not sure i get what you mean on modifying web2py, the media screen part of
> the above tutorial should come in handy for scaled images along with the
> flexslider code - this is what i intend to do.
>
>
--
