Configure Image Files in Speedgrader to Fit the Window

[cpowell]

This idea has been developed and deployed to Canvas

Can we make it so that in Canvas’ Speed Grader, submitted image files appear as “fit to window” instead of 1:1 pixel resolution?  It might be a simple adjustment to the webpage code, but it would allow student submissions in my Photography classes to actually be viewed in Canvas.  Right now when I view submissions in Speed Grader, I only see the top left corner of each picture because the image is larger than the viewing window.  It would be speedier to see a thumbnail of each file…

Let me know if that’s an option.

Thank you!

Kirk

Comments from Instructure

For more information, please read through the https://community.canvaslms.com/docs/DOC-14712-canvas-production-release-notes-2018-06-02 .

[janderson6]

I use a Canvas course for program orientation of my paramedic students.  They have to turn in many documents as a part of that orientation and we give them the option of uploading a picture of the document.  Having the image fit the window would be very helpful to us.  The ability to rotate the image would also be helpful.  Thank you for considering this.

[awolfe]

Being inspired by jamesjonesmath's Canvancements I wanted to see if this is something that could be an easy workaround for a Greasemonkey userscript, but my knowledge of JavaScript is somewhat limited and I'm stuck now. So, hopefully this helps somebody more experienced than me fix it.

Manually changing the style attribute from:

<img style="-webkit-user-select: none;" src="url_to_image">

To:

<img style="-webkit-user-select: none; width: 100%;" src="url_to_image">

did the trick. The image was completely visible and maintained its aspect ratio when adjusting the Speedgrader sidebar. I checked this in both Chrome and Safari on my Mac.

However... because Speedgrader loads submissions in an iframe i was getting "cross-origin frame" DOMExceptions when trying to select the img object using Javascript.

So, I'm not sure how easy it is to add a line of code somewhere in the backend that just adds this to the style attribute or if there's a userscript workaround that could actually work, but I just wanted to throw this out there!

It's frustrating because looks like such an easy fix, but I'm sure it's slightly more complicated to actually implement either as a userscript workaround or an actual Canvas patch.

[ezaurova]

I just came across the following https://community.canvaslms.com/ideas/9534-zoom-in-and-out-on-any-student-submission-file-type  which reminded me of this idea.  Perhaps folks who wanted the image to fit the window would also appreciate upvoting the ability to zoom in and out of an image.

[James]

Is this still an issue?

I uploaded a large photo, 1700x2200 pixels, into our beta instance (I didn't need it hanging around forever so I didn't want to upload it to production).

When I viewed it, it was scaled to fit the available space. In the case of this image, it was constrained vertically.

If I shrunk the DocViewer portion of SpeedGrader down, the image adjusted accordingly.

When I look at the styling, Canvas added the following to the image.

style="max-width:100%;max-height:100%;"

That constrains it to the viewing window in both directions, but maintains the aspect ratio of the image.

Is this what you were asking for or am I missing something?

Image from Natural Resources Conservation Service of the U.S. Department of Agriculture. https://www.nrcs.usda.gov/Internet/FSE_MEDIA/stelprdb1167162.jpg

[RobDitto]

 @James , was your test on a beta instance?  There's a welcome Large Image Submissions fix in the next production release.

[James]

Yes, I mentioned that in the post but missed it in the release notes. Thanks for catching it.

[KristinL]

Hi Everyone -- Did you see today's Canvas Beta Release Notes (2018-05-21)? DocViewer received some image support updates!

[Renee_Carney]

This idea has been developed and is On Canvas Beta 

:smileyinfo: Upcoming DocViewer features are not available for testing in the beta environment.

For more information, please read through the Canvas Beta Release Notes (2018-05-21) .

[Renee_Carney]

This idea has been developed and deployed to Canvas 

For more information, please read through the Canvas Production Release Notes (2018-06-02) .

[Renee_Carney]

cpowell Thank You  for submitting this idea, as well as,  @KristinL  Thank You , terry_hill Thank You , LisaCasto Thank You , cassandra_stackis Thank You ,  @Jeff_F  Thank You ,  @kls505  Thank You , straughans Thank You ,  @bsnelearning  Thank You , blettiere Thank You , kamyx Thank You ,  @swinter  Thank You , janderson Thank You ,  @awolfe  Thank You ,  @ezaurova  Thank You ,  @James  Thank You , &  @RobDitto  for your contributions. Your investment in this idea helped refine a feature which is now part of Canvas