Image Gallery (Media Album) Feature in Canvas

  Idea will be open for vote May 5th, 2015 - August 5th, 2015  Learn more about voting...

 

I've heard from a few liberal arts schools that an image gallery feature in Canvas (either connected to the files section or in the pages area) would be very helpful. I've also heard this called a lightbox image gallery.

 

This would be something where the images are uploaded and easily displayed in a preview box. Clicking on the image would then allow it to expand for full viewing.

 

If this is something that would interest your institution, please vote up the feature.

 

David Keiser-Clark Mika Hirai

 

 

  Gathering additional info about this feature request

October 2016 update by Chris Ward

There are a lot of image gallery solutions out there that have excellent solutions in this space. Take any of them, coupled with the Redirect Tool LTI from the Canvas Edu App Center (https://www.eduappcenter.com/apps/63#.WBfIweHyvu0) and you have really elegant solution.

 

We'll be archiving this feature idea. Thanks for voting and participating in the community!

29 Comments
kona
Community Champion

This is definitely something our institution would be interested in!

G_Petruzella
Community Champion

Yep, I'll definitely be voting this one up.

mhirai
Community Explorer

We would love it if Canvas offered "image gallery" like this example.

image-gallery-sample.png

A user uploads a bunch of image files to a folder, then, thumbnails will be created, which are clickable to expand.

Many faculty members (Art, English, Foreign Languages, etc) at our institution use a lot of images to teach.  They just want a very simple way to display multiple images. (Our old CMS had the feature...)

BKINNEY
Community Contributor

OK, I can vote for this, but while we're at it, why not think a bit bigger? Canvas is already loading a terrific js library brimming with great widgets: jQueryUI. Why not document ways to get at them without using a <script> tag? I'm especially interested in tabs, dialogs, and accordions. I realize there are some LTI tools that expose a lot of that stuff, in fact, I wrote one myself. But, I have to load custom css and js in my accounts to make it work. That's kind of a bummer. It would all work way, way better if Instructure were to do it.

awilliams
Instructure Alumni
Instructure Alumni

 @BKINNEY ​ you can just implement the code as outlined in Canvas LMS StyleGuide​ right?​

BKINNEY
Community Contributor

Not in any way I've found. Yes, I can use the accordion style, but without

a script tag, how can I initialize it? If there's an easy answer for this,

call me ten times the fool, but I haven't found one.

Becky Kinney

Academic Technology Services

Project Blog <http://sites.udel.edu/bkinney/>

On Sat, May 9, 2015 at 5:59 PM, Adam Williams <instructure@jiveon.com>

Eric_Roussel
Community Novice

Would also like the ability of uploading mulitple files at a time rather than one at a time

jblumberg
Community Contributor

Becky,

You can enable the tabs and accordion by adding a line or two to your global javascript to force these scripts to run.

jblumberg
Community Contributor

I would like to see a generic lightbox integrated, not something limited to images.  It is also critical that it is ADA compliant and works with screen readers.  Something like Magnific Popup: Responsive jQuery Lightbox Plugin  would add a lot of options.

It is also important that alternative display options are designed for the mobile app. 

BKINNEY
Community Contributor

Yes, I have done that, but I haven't pushed it into our main account, and I

was unaware of the styleguide when I wrote it, so I am using my own styles.

I could certainly consider rewriting my tool to take advantage of the

styleguide, but I would still prefer it if this were something Instructure

would make available for anyone to use without messing around with custom

css or js. Not a huge deal, just something I wish for.

Becky Kinney

Academic Technology Services

Project Blog <http://sites.udel.edu/bkinney/>

On Fri, May 15, 2015 at 10:19 AM, jblumberg@champlain.edu <

BKINNEY
Community Contributor

Here is the intro page for my Page Widgets LTI tool. The interesting thing about this is that all the requests I got to beta test it came from outside our campus, even though I had never advertised it in any way off campus. I had to turn these people down, because they needed custom js and css sheets in their accounts to make it go. So, there is at least some pent up demand for something like this.

Page Widgets

jblumberg
Community Contributor

Becky,

This looks really awesome... I'll check it out. 

We are doing something similar, but took a different approach:

1.  All of our extra CSS & JS needs to be done in the source view of a page... no pretty GUI.

2.  We redefined all elements.  When I talked to the Canvas Style Guide team, they were shocked that anyone was using it for lectures.  I wanted to future proof what we did.  This way even if we switch LMS's we should be able to migrate gracefully. 

3.  We design all elements to fail gracefully on the mobile app (since custom JS & CSS won't run).

4.  We built a responsive design grid system similar to UF.  In the end we decided that our in house design future proofed us better and supported the mobile app better than using Canvas's grid.

I am now actively working on a lightbox and lightweight quizzing options.

ldprogrammers
Community Novice

Our institution has been a little hesitant to set the required css/js for the style guide items in the global js area because we can't figure out why Canvas doesn't do this out of the box?  What about it causes some sort of concern for them that they do not just provide it in the base code?

BKINNEY
Community Contributor

Josh,

It took me a while to realize that all this was going to fail on mobile, and then I never did anything about it, because no one on our campus was signing up anyway. I'd be interested in seeing your solution to the mobile problem. What sort of graceful failure were you able to achieve?

BKINNEY
Community Contributor

That's what I'd like to know, Idprogrammers. Seems like such an easy thing for Instructure, and so hard for us. Hence my request!

awilliams
Instructure Alumni
Instructure Alumni

Yeah, after finding out about the style guide and trying it out a bit and realizing it fails on mobile we decided to avoid it despite the amazing possibilities on desktop. Then I read somewhere over here that the style guide was intended for developers of Canvas and not intended to work in page design or mobile. It appears though that the post about it has been deleted which is why it looks like I replied to "The specified item was not found."

I think until a nice LTI comes along, such as yours  @BKINNEY ​, I will write stuff, host it in Google Drive, and embed it there as described in the comments of Using Google Docs for dynamic Canvas content​.

ldprogrammers
Community Novice

I've created a request for this and it is slated to be open for voting in June.  Please bookmark it, add your comments regarding use case and concerns, etc.  

BKINNEY
Community Contributor

I'm glad you like my app, but the installation instructions are a bit daunting, since you have to install custom css and scripts. Not sure that actually counts as a solution at all.

pam_roberts
Community Novice

Would also like to see the same! The ability to have an iframe URL launch in a lightbox is a feature we are looking for as well. Even if allowfullscreen is enabled, the buttons for user to select that option are not visible. Currently, it appears to rely on videos or URL embed codes.

jacqueline_chu2
Community Novice

Hi guys

I thought this was a great idea and have voted yes. Today I have asked Canvas to include a field to add copyright attribution to each image when we embed them. This way each image can have the attribution necessary for copyright. Please vote if you think this would benefit your school or institution Smiley Happy