FIXED: Controlling image widths in Frog

February 15, 2012

We, like many schools, use Frog to display notices to the staff and students.

Something that always bugs me though is when a teacher adds a picture to their notice that is far too large for the display frame.  It pushes everything out of alignment and adds scrollbars.  (I know: real world problems etc…).

Anyway, I’ve stumbled across a quick and easy solution which resizes pictures if they are over a certain width:

<script>

$(document).ready(function() {

$(‘img’).each(function() {

if ( $(this).width() > 290) {

$(this).css({‘width’: 290});

} });

});

</script>

The code, which just sits in an HTML brick, scans through all images and if the image width is over 290 pixels (in this case) sets the stylesheet width to be 290px.   All smaller images are left untouched.

Now, if I can just figure out how to get them to stop uploading the pictures to their private user area…

Advertisements

Quick Tip: Creating an icon for mobile shortcuts

August 12, 2011

One of the cute things about most mobile sites these days, is that when you make an shortcut and set it to your phone’s desktop* a personalised favicon type image is used, instead of just a boring standard bookmark.

These are cute and very easy to do.  Simply paste the following code into the <head></head> section of your page.  Ideally it should be in the <head> bit, though it doesn’t have to be (if using Frog for example) :

 <link rel=”apple-touch-icon” href=”full path to your image” />

 There’s some debate on the internet as to whether you need the full path or if the local path will do, but I’ve used the full path and been happy with the results.

Your image should be the official 57×57 pixels, but again, there’s plenty of debate on the best size.  It should be  saved as a png.

And don’t worry Android users, the code may say apple-touch-icon, but works just the same. 

*(is that the right term???)


Quick tip: Make your web page mobile

June 19, 2011

Recently, I showed off some of our VLE pimping at Frog’s National Learning Platforms conference in Birmingham, things like our Rewards system and My Classes – a whole section where a teacher can create seating plans, interact with the students via blogs, run a Random Name Selector etc…  

I also showed everyone the mobile version of the VLE, built entirely inside Frog.  Just using an HTML brick with the code below, web pages render at the width of the browser viewing them.   It’s that simple.

<meta name = “viewport” content = “width = device-width, height = device-height” /> 

This code doesn’t detect if you’re using a mobile device.  Personally, while I have implemented them on my own blogging engine, I don’t recommend detection code.  Detection and redirection are simply too irritating for words.  I’ve lost count of the number of times I’ve tried to visit a site after searching from Google, only to be redirected to the site’s mobile front page (Gamespot I’m looking at you). 

We provide a link on the VLE frontpage to a different login screen.   Couple this with use of a tinyurl and a QR code and job done!