Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-31978

Images elements not responsive when inserted via CKeditor

    Details

    • Type: Bug
    • Status: RESOLVED
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 11.2
    • Fix Version/s: 12.0
    • Component/s: morpheus
    • Labels:
      None
    • Test Plan:
      Hide

      1. Create a lessons tool. In the tool, select Add Text and in the CKeditor select 'image' and Browse Server for a big image. Save it. The resulting image should be 'contained' and should not spill over the Lesson tool's black border (in full browser size) (and there should be no sideways scrolling) and it should resize accordingly when the browser size is reduced (it does not). (It does both these things if you select Embed Content and pick the image that way.)

      2. In Resources, select 'create HTML page' and select 'image' and 'Browse Server' for the large image, save the file. View it (both inline by pointing the Overview Tool "Site Info URL" at the page) and in the Resources tool and by clicking on the file opening it up in a new tab. The resulting image on the page should be 'contained' in the browser (and should be contained in the browser if you resize the browser) (and there should be no sideways scrolling) and it should resize accordingly when the browser size is reduced (it does not).

      3. Check existing legacy images that they resize properly when the browser is resized.

      4. Add a large image via ckedit but set the display size to be half the dimensions as the original. make sure the image is displayed at this size by default, then check that the image shrinks whilst keeping the same aspect ratio when the browser is made thinner.

      5. add a large image with no size specified at all. Check it shrinks when the browser is made thinner

      6. Repeat the above in all tools that have CKEditor, eg, Polls, Sign Up, Announcements and so on.

      7. submit a word doc / PDF to Assignments tool and on the view submissions page, check the paperclip is the correct size

      8. In Resources, select a file for copying, make sure the paste icon is the right size.

      For the following elements

      <video>, <object>, <embed>, <iframe>

      1/ Add to an HTML page with a fixed size - make the page really wide, they should stop expanding at the size specified by "height" and "width" elements. Make the page thin, the elements should squish right down in size.

      2/ Add to a page with no size given - make the page really wide, they should stop expanding at their natural size. Make the page thin, the elements should squish right down in size.

      3/ Repeat 1 but add to a variety of tools, eg, Lessons, Polls, announcements, Forums (Note: You cannot add an embed or iframe tag to these tools as AntiSamy strips it).

      4/ Repeat 2 but add to a variety of tools, eg, Lessons, Polls, announcements, Forums (Note: You cannot add an embed or iframe tag to these tools as AntiSamy strips it).

      5/ Create HTML pages in Resources with these 4 things and go to Lessons tool and select Add Content Link and Select File from Resources and select the HTML pages and make sure they work as 1/ and 2/ specify.

      6/ On a mobile, do regression testing on the pop up help - make sure it behaves in the same way as before this patch was applied. Do the same with the Overview tool / page when it has synoptic tools. Test also that any other tools that still use iFrames still work correctly, eg, Overview tool w/ synoptic displays.

      Show
      1. Create a lessons tool. In the tool, select Add Text and in the CKeditor select 'image' and Browse Server for a big image. Save it. The resulting image should be 'contained' and should not spill over the Lesson tool's black border (in full browser size) (and there should be no sideways scrolling) and it should resize accordingly when the browser size is reduced (it does not). (It does both these things if you select Embed Content and pick the image that way.) 2. In Resources, select 'create HTML page' and select 'image' and 'Browse Server' for the large image, save the file. View it (both inline by pointing the Overview Tool "Site Info URL" at the page) and in the Resources tool and by clicking on the file opening it up in a new tab. The resulting image on the page should be 'contained' in the browser (and should be contained in the browser if you resize the browser) (and there should be no sideways scrolling) and it should resize accordingly when the browser size is reduced (it does not). 3. Check existing legacy images that they resize properly when the browser is resized. 4. Add a large image via ckedit but set the display size to be half the dimensions as the original. make sure the image is displayed at this size by default, then check that the image shrinks whilst keeping the same aspect ratio when the browser is made thinner. 5. add a large image with no size specified at all. Check it shrinks when the browser is made thinner 6. Repeat the above in all tools that have CKEditor, eg, Polls, Sign Up, Announcements and so on. 7. submit a word doc / PDF to Assignments tool and on the view submissions page, check the paperclip is the correct size 8. In Resources, select a file for copying, make sure the paste icon is the right size. For the following elements <video>, <object>, <embed>, <iframe> 1/ Add to an HTML page with a fixed size - make the page really wide, they should stop expanding at the size specified by "height" and "width" elements. Make the page thin, the elements should squish right down in size. 2/ Add to a page with no size given - make the page really wide, they should stop expanding at their natural size. Make the page thin, the elements should squish right down in size. 3/ Repeat 1 but add to a variety of tools, eg, Lessons, Polls, announcements, Forums (Note: You cannot add an embed or iframe tag to these tools as AntiSamy strips it). 4/ Repeat 2 but add to a variety of tools, eg, Lessons, Polls, announcements, Forums (Note: You cannot add an embed or iframe tag to these tools as AntiSamy strips it). 5/ Create HTML pages in Resources with these 4 things and go to Lessons tool and select Add Content Link and Select File from Resources and select the HTML pages and make sure they work as 1/ and 2/ specify. 6/ On a mobile, do regression testing on the pop up help - make sure it behaves in the same way as before this patch was applied. Do the same with the Overview tool / page when it has synoptic tools. Test also that any other tools that still use iFrames still work correctly, eg, Overview tool w/ synoptic displays.

      Description

      Images inserted into the ck editor in Lessons or Resources do not resize in the same desirable, pleasant way they do if you insert then in the Lesson tool using Embed Content.

      All other tools require that images are inserted via CK Editor - they are inserted as fixed size by default so require sideways scrolling when viewed on a mobile device / thin screen.

      In much the same way as above, there is a problem with elements inserted via CK Editor that behave like an iframe: <video>, <object>, <embed>, <iframe> (but not iframes used on the Overview / Home page or in the pop-up help).

      Add some intelligent code so that such elements shrink on a mobile but "work as expected" on desktops.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  nickwilson Nick Wilson
                  Reporter:
                  nickwilson Nick Wilson
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  5 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code