cancel
Showing results for 
Search instead for 
Did you mean: 
MattHanes
Community Champion

Elementary Theme Course Banner Sizes

I was playing a bit with the banner situation. It appears that if you upload an image in the Course Settings, that image will be used as the banner image in content courses. It auto-crops the center of the image for the course card. So with some experimentation, I have found that 1200 x 200 pixels works very well for the banner. And if you put some stuff right in the center of that size then you get about 350 x 200 pixels to work with. So the banner or hero image or whatever it's called looks like this:

MattHanes_0-1619722197165.png

And the corresponding Course Card image looks like this on the dashboard:

MattHanes_1-1619722245476.png

Here's a link to the banner I used in Canva if you want to play around with it:
https://www.canva.com/design/DAEdEgGkOCw/wwtCyHho4_RqOE4FGkbWGg/view?utm_content=DAEdEgGkOCw&utm_cam... 

 

5 Replies
MattHanes
Community Champion

Side note: It would be AWESOME if we could use SVGs for these images to scale nicely too!

rebecca_esplin
Community Participant

@MattHanes Thank you for figuring this out!

 

I wonder if there is a way to separate the two images so the course card and banner could be different. I know why the course card is the same as the banner now, but I may not want my course card to have the image from the middle of my banner.

I really like the idea of being able to use a scaleable image!

peytoncraighill
Instructure
Instructure

Nice @MattHanes! Right now the height of that image scales to 25% of the window height up to a max of 400px, so you could go bigger if you wanted, though what you've got looks great. Good thinking on featuring the thing you want on the course card in the center of that banner image. We'll have to look into SVGs...don't know why those wouldn't be allowed.

@rebecca_esplin This is a good idea. It might be a little trickier than you think. There are a lot of advantages to keeping these subjects as backwards-compatible as possible with normal Canvas courses...like switching to elementary mode with the flip of a button, or sharing content from a subject to a course, or using Blueprints to create elementary subjects...In other words, having everything "just work." So if something in a subject just doesn't exist in a normal Canvas course (like a banner image vs. a course card image in this case), compatibility can get a little wonky. I'll talk about this in the project update today, because it's an interesting limitation and we may have to shift our thinking at some point.

Ahhh thanks for that info @peytoncraighill . I probably should have thought to inspect the stylesheet...

I'll definitely have to leave some filler space at the top and bottom of the image for low resolution devices like our Chromebook. Centering any text in the middle of the vertical space so that it is still visible on something with a tiny viewport. Our Chromebook resolutions are 1366 x 768 which ain't the greatest. I got lucky though, my template still just barely fit on the CB screen without cutting into the text. 

MattHanes_0-1619803720546.png

 

audra_agnelly
Community Champion

@peytoncraighill  Is there a reason the banner needs to stay locked at the top of the screen when scrolling in a course? Under Home, it takes up a lot of real estate when home is set to Front Page. When I first open a course, I see my most recent announcement, the banner, the menu tabs and my homepage. The announcement + banner + menu occupies about 2/3s of the page height so most of my page content isn't visible to start. When I scroll, the most recent announcement scrolls off the top, but the banner stays locked. I can see more of my page, but the banner + menu tabs +(manage button in teacher view) still fills close to half the screen. It remains locked at the top under the schedule tab as well, and in the preview I can only see 5 items at a time. Under the Modules tab it does float off the top when I scroll and I can see a more complete view of my modules.