A bug while inserting an image to glossary and making it smaller on FF...

A bug while inserting an image to glossary and making it smaller on FF...

by Miki Alliel -
Number of replies: 11
Picture of Translators
Hello
under mooodle 1.9.2 I'm trying to insert a picture (I tried JPG) when I'm adding a new entry to the glossary.
I'm trying to make it smaller with the arrow - it does turn smaller but after clicking on "save changes " I see the entry as the large original size
like it was before making it small and inserting it to the "definition"

it happened only on Firefox 3
and on IE it was fine.

is it a bug?
please help thanks.
YOU CAN SEE 3 PICS ABOUT THAT
THANKS


Attachment 11.JPG
Average of ratings: -
In reply to Miki Alliel

תשובה ל: A bug while inserting an image to glossary and making it smaller on FF...

by Miki Alliel -
Picture of Translators
2nd
Attachment 22.JPG
In reply to Miki Alliel

תשובה ל: A bug while inserting an image to glossary and making it smaller on FF...

by Miki Alliel -
Picture of Translators
3rd
Attachment 333.JPG
In reply to Miki Alliel

Re: תשובה ל: A bug while inserting an image to glossary and making it smaller on FF...

by Matt Molloy -

Hi Miki,

I presume you  are resizing the image by dragging on the handles that appear on the image while editing. This will not resize the image, although temporarily when editing, it appears as if it does. If you want to display a smaller version of the image in the glossary, you will have to use a photo editor to resize your original image, save it under a different name (so your original remains intact) and then insert the smaller image into the glossary.

Matt

In reply to Matt Molloy

תשובה ל: Re: תשובה ל: A bug while inserting an image to glossary and making it smaller on FF...

by Miki Alliel -
Picture of Translators

well I have to correct you because by  doing the same resizing thing on IE it does succeed and does work

which mean the image saved well to a smaller size after saving  

In reply to Miki Alliel

Re: תשובה ל: Re: תשובה ל: A bug while inserting an image to glossary and making it smaller on FF...

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

I don't know why those "handles" appear to make one think that you can resize an image in the HTML editor. You can't!sad This is weird, if you resize it, the HTML editor adds something like this in the HTLM code of the <img> tag:

style="width: 302px; height: 187px;"

This will not work, because an image size parameters are simply the width= and height= values inserted inside its <img> tag.

There are 2 ways to achieve what you want:

  1. recommended: resize the image (before uploading it to moodle) using a photo editor (in a pinch you can use picnic, an online photo editor which allows to resize, crop etc.)
  2. in a pinch, insert your image, then click on the Toggle HTML Source button; in the source, change (or add) the width paramater to the value of your choice. If you want the resized image to keep its original proportions, only enter a value for width and remove the height parameter altogether.

Joseph

In reply to Joseph Rézeau

תשובה ל: Re: תשובה ל: Re: תשובה ל: A bug while inserting an image to glossary and making it smaller on FF...

by Miki Alliel -
Picture of Translators

thanks for the replies

again under IE it does shrink them without me shrinking them in a photo editor, but moodle itself.

I'm just curious, does it resize when you try it on IE?

let me know

thanks

In reply to Miki Alliel

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: A bug while inserting an image to glossary and making it smaller on FF...

by Matt Molloy -

Hi Miki,

As Joseph has said, you cannot resize an image in the HTML editor. What you are doing is introducing some extra markup that tells the client's browser to display the image with a certain style ( for example: style="width: 302px; height: 187px;" ). The image then appears smaller, but you have not altered the image itself. You still have the same large image (and the associated file size overhead), with some extra markup telling your visitors' browser to display the image within (smaller) width and height parameters.

I understand what you are saying, and understand the effect you are getting. Experimenting with this, the editor in IE and Firefox will accept the extra style into the markup, and sometimes, on saving, will strip out this extra markup. This results in the image displaying in its original large size.

You can make a browser display a large image in a small way, but to edit the image, you must use a photo editor. The html editor in Moodle cannot do this.

Matt

In reply to Matt Molloy

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: A bug while inserting an image to glossary and making it smaller on FF...

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
Matt > The html editor in Moodle cannot do this.

Yes it can, but you have to go inside the HTML code and do it "by hand", as explained in my post. You cannot do it the WYSIWYG way.

Joseph

In reply to Joseph Rézeau

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: A bug while inserting an image to glossary and making it smaller on FF...

by Matt Molloy -

Hi all,

My point is that the html editor has not altered the image, it cannot. It can put in markup that tells the browser to display a large image in a small way, but it does not alter the image itself.

The danger here is that people will post big images (big in dimensions and big in file size) and simply use the 'handles' in the editor to resize the image. Everything displays fine, but behind the scenes, an image that only needs to be, say 200x200, and 10kb in size is actually 600x600 and 700kb in size.

If you have a visitor to your site on a dialup, and they display the first 10 entries to the glossary, and this is happening with even one or two entries, the page will be slow to load.

I think that if you want to display a 200x200 version of an image, then you should (must, from an accessibility and usability point of view) edit and save a version of your image with these dimensions and quality. Here is exactly the same image, being called from the same place, but displaying in 2 different ways. I resized the second one by dragging the handles, but I did not alter the image, only the instructions I give to the browser about displaying it:

3 effects

3 effects flattened

Matt

In reply to Miki Alliel

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: A bug while inserting an image to glossary and making it smaller on FF...

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Miki,

Just tried again and, you are right, resizing an image in the HTML editor in MSIE (7) and saving it does keep the new size parameters. Please note, however, that the "resizing handles" do not enable you to make a proportional resizing, so if you are not careful you can easily destroy the normal proportions of the image when resizing it.sad

Curiously, in FireFox, the "resizing handles" do enable you to make a proportional resizing, plus the values of the new sized are displayed. This is good, except that the resized values are not saved upon saving.

Looks like it's impossible to have the best of both worlds.wink

In attached screen shot:

  1. original image
  2. in FireFox (3) : resizing is proportional... but you cannot save resized image
  3. in MSIE (7): resizing is not proportional
  4. in MSIE (7): you can save resized image (but it may be distorted)
Joseph
Attachment 02-12-2008_18-05-24.jpg
In reply to Joseph Rézeau

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: A bug while inserting an image to glossary and making it smaller on FF...

by Mauno Korpelainen -

Dave asked the same question in Editor forum http://moodle.org/mod/forum/discuss.php?d=108048 and although current HTMLArea can not resize images you could change the height and width of images with some previous versions of moodle and HTMLArea in FF (just tested with an old 1.6) and other editors like TinyMCE and FCKEditor can still do it - with extra plugins it is even possible to change the real height and width of images with editor just like in offline image editors - but not with current HTMLArea... so it's clearly a new FF bug. Should we add this to tracker (or just "let it beee..." in HTMLArea)? I'm not sure if this is an editor issue or a filter issue (XHTML...)

For example http://www.phpletter.com/Demo/Tinymce-Ajax-File-Manager/ is a free online image editor plugin for TinyMCE and FCKEditor - advanced image editor plugin itself could be a nice new feature in moodle 2.X  http://moodle.org/mod/forum/discuss.php?d=110902#p487598