Remove colour overlay from course cards that have an image

[stuart_ryan]

This idea has been developed and deployed to Canvas

Howdy all,

Firstly I have to say the new course cards image feature is awesome and a great leap forward. I have been using it a bit now and have a small request for a future revision.

When a course is given an image for the course card on a user's dashboard, I would really like to see the colour overlay removed (so that the image does not looked washed out with the user selected colour).

Ideally, I would love to see this configurable on an account level rather than an individual course level, but that is just from an administrator's perspective.

Just to visualise this more, the current behaviour with a couple of different colours:

And the ideal/requested behaviour:

Additional thoughts:

I do realise the colour is important for a few different areas in relation to the course, so perhaps the bottom bar could be extended as a border around the entire card (just as one example).

Many thanks  team,

Keep up the awesome work!

Comments from Instructure

For more information, please read through the Canvas Production Release Notes (2017-05-13) 

[jbrady2]

 @James  Now I better understand the point you were attempting to make with your second scenario, and now I am wondering if the changes that have already been made and are being proposed might lead to confusion for students. While I personally like the image feature for course cards, it seems to me that the only way to make them truly effective would be to allow the instructor to set the overlay color to transparent, remove the ability of students to change the color, and make the course card behavior consistent across all platforms so that the image is visible to students no matter where they access the course. Of course my second recommendation goes against notions of allowing students to have a certain amount of autonomy in their pursuit of an education. The other option would be to reverse the decision to allow for images on course cards and perhaps replace both them and the colors with generic icons that could be themed based upon subjects, but that would not be without its own difficulty; for example, trying to figure what course gets what icon especially for cross-listed courses.

[James]

 @stuart_ryan ​​, I love MDN's pages, they're so authoritative. I read that same page and warning last week (maybe two weeks now) when I had to look up how to use the !important because I never do -- at least never on pages that I have control over.

I really think that Canvas should have put the opacity in their CSS files rather than in inline styles, but they didn't. If they had, I wouldn't need the !important. Maybe they felt it was important enough that it be there that they didn't want sites easily overriding it? I think it's just more of a recent rash of sloppy coding as more and more stuff coming out is getting inlined.

So the only way I know of for people to override inline styling is to specify the !important or to use custom JavaScript to go through and modify it. The problem with the JavaScript approach is that the card information is not there when the page is ready and the custom JavaScript is executed. That means that you need to add MutationObservers to the mix and wait for the content to appear and then modify it. Most people aren't willing (and I don't blame them) to insert a MutationObserver to watch for the content to appear, and will use the less-efficient setTimeout() approach if they have to. So I went with the easier, but warned against CSS override.

Either approach means that you'll have to monitor your code for breaking changes to Canvas. The CSS is less likely to break stuff than the JavaScript will. That need for monitoring is why we don't do any custom CSS on our site. I've got some custom JavaScript in a subaccount that my classes are in (so I'll hear about it if it's broke), but I'm wary to add it to the root account.

I provided that information because some people will want the overlay gone badly enough that they'll implement it. For others, they'll live with what Canvas does. And even if Canvas does do something about it, it might take a while, so I try to provide immediate solutions, sometimes even if I personally don't think it's a good idea.

[James]

My comments are probably coming through stronger than I personally care.

I don't like the way it looks with the color overlay but there are potential problems with removing the opacity that I think outweigh the benefits. Allowing the faculty to make the decision opens up a can of worms (I am one, but many don't understand the technical issues, they just know what they like), but if you have instructional designers who control the course settings and not the instructors then they can probably have a screening process for the images and invoke some level of sanity on them.

For those reasons, although I would not have pushed for allowing images in the first place, I can see where some people can benefit from them. We haven't turned it on at our institution yet and it's still listed as a beta feature so it may change before it's finalized -- or the beta might mean, as it does in some cases, that this coming whether you like it or not, but for now we're giving you the chance to play around with it. If it becomes mandatory, then having a toggle for including the overlay might be a nice feature for schools who can enforce good style. We don't have instructional designers, our faculty develop everything, and some would still use the <blink> or <marquee> tags if they could. Other schools have design locked down from people not versed in design so it's not an issue.

Ultimately, that transparency can be fixed through CSS or JavaScript, so I wouldn't go around advocating for a toggle. But I probably wouldn't be as opposed if there was a toggle at the account/subaccount level -- no way I want it at the instructor level as I want the interface to look consistent for the students.

I think it's more important that students have the ability to set their own colors than it is for the instructor to upload a course image. Setting generic icons is problematic, not only for cross-listed courses, but when a student has multiple courses in the same discipline.

I think that overall the color is a nice enhancement and gives the student a sense of personalization and ownership. I am not as enthused about the instructor's ability to brand their course, although I've done it in other software (I use MediaWiki in some of my courses to hold notes and I added a logo there - although they're only in one wiki at a time so it's not really the same issue). I think that if faculty get to brand their course that it should happen within the course, not on the dashboard.

I think a better solution than allowing the faculty to set the image is to let the student set the image -- after all, it's their dashboard. And if that's the case, then I would absolutely argue that there should be no color overlay on the image. I would make sure that they have to go through an editor process to do it so that they are trimmed down to the proper size (that or the API could do the trimming). Otherwise someone will upload a 6 MB file from their DSLR and wonder why things are so slow loading.

Or perhaps the faculty could offer a default image that could be overwritten by the student. As long as the student had that capability, I might be more willing to accept the lack of overlay.

The way things are right now, though, I would not want the default for all of Canvas to be to remove the overlay. Let it be an institutional decision, but default to something that makes sure controls are visible.

[stuart_ryan]

Completely understand, when I had a look and wanted to figure out a workaround, I came to exactly the same conclusions as you have, I was tempted to put a request in to use CSS styles as opposed to inline CSS, but I wasn't sure if such technical requests would gain traction.

[jbrady2]

More great points, and ultimately it should be about what is best for the student. One of the things that I was enthusiastic about when our institution was considering moving to Canvas from our previous LMS is that instructors would be limited in what they could add, if anything, to the course menu, as the previous LMS allowed them to add whatever they wanted, and while most did this sparingly and responsibly, some created navigational monstrosities for their students in their attempts to be helpful.

I am not certain that I would want students to have the ability to add images to the course cards because of the formatting and file size issues that you mention, which will probably already become an issue with some instructors adding images.

Ultimately, I have to agree that controls for these items should remain in the hands of Canvas admins rather than being allowed at the instructor or student level so that each individual institution can determine how much to allow things to be mucked up by the user.

[DrNufer]

I definitely like those mock ups.  The bottom one seems consistent with the latest UI overhaul on the modules page.  I imagine the code for that is out there.  I'll look forward to what the engineering team comes up with. 

[DrNufer]

Ideally it would be nice to have the color overlay as an option and not binary - off or on across the instance.  I imagine that most professors at my institution won't bother with card images.  But if there is a checkbox for no color on a course by course basis then that would be really useful for the people who do choose to go the image route (which would definitely be me). 

[jim_jeffers]

I love the ability to put an image for a course. BUT, I need the students that are using the app on iPads to see the image. It only can be seen on a laptop. It is seen when the students login to Canvas through a webbrowser on their iPad, but all of our students use the App only. Having the image would greatly speed up course selection, as well as help those students navigate that are non-English language.

It seems like what you do on the computer version, should just port over to the App view??

[DrNufer]

Sometimes the computer version will "port over" to the app view, if the app is merely a wrapper.  In other words, there are some apps out there that are simply webpages that look different in order to accommodate the mobile platform.  But the Canvas app is engineered as a native platform (which is better), so the functionality has to be coded from scratch.  Sometimes there are disparities between what you see in the browser and what is rendered in the app.  The primary functionality should be intact though. 

[rconroy]

Love this! From a Graphic Design perspective, this looks a LOT cleaner than the color overlay , but it would be nice for people to have the option to choose Agree'd, the permissions of this action should be limited to the Administrator or course designer, not the faculty. Hope it gets voted up to the next level! Bookmarked, for sure.