FIXED: Controlling image widths in Frog

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:


$(document).ready(function() {

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

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

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

} });



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…

2 Responses to FIXED: Controlling image widths in Frog

  1. M. Montagne says:

    Hi Graham,
    Thanks for a great blog. Am a new Frog VLE user -we started this year in my school-, and a MAC user at home.Struggling a bit as the compatibility is not fully there, but am keen on finding all possible helpful info. Any recommendations from your part?

  2. Graham Quince says:

    Frog works best in IE. With the shift to FrogOS next year, we should see an across the board change.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: