Adding a photo to the course homepage in Rise

Nov 20, 2018

Mary Clark
By Mary Clark

Is it possible to insert a photo on the course home page with the course title?

Also, is there a way to shift images within the frame of the slide? I'd like to move the image down in the frame to have more headspace.

 

36 Replies
Allison LaMotte
over 5 years ago11/28/18 at 9:52 am (UTC)

Hi Mary!

You can absolutely add a photo on the course home page. Just open up the Course Settings and click on Add Cover Photo (see how to do this step by step in this gif).

To answer your second question, I think the easiest way to do that would be to add extra padding before your image. To do that, simply click on Edit, select Settings, and change the top padding to 100 pixels (see this gif). 

I hope that helps! :)

Brett Treptow
4 years ago04/16/20 at 1:37 pm (UTC)

Hello, adding to this thread about images to the homepage. I understand how to change the "cover photo" in settings but what I would like to know is whether I could add an image in the course description similar to an image & text block.

Also, would like to know if there are additional formatting options for text AND images. For example, changing the name of the image file so it does not scale. Looking for advanced "cheats". Thanks. 

Shrav Krishna
4 years ago04/16/20 at 1:46 pm (UTC)

Yes, I too would like to know what options we have to add images in the course description and additional formatting options. A workaround for formatting I've been using is creating a custom table in Microsoft Word and copying and pasting that into the course description. I noticed the description can allow Unicode text symbols (think "emojis"), but it'd be great if I can import my company's brand-specific icons in the course description as well. Thanks.

Robbi James
3 years ago03/03/21 at 5:16 pm (UTC)

Wait... you're telling me that the course description is a completely static text block with no options?  Why can't we access the same blocks there that we can access in a regular lesson?  I have a very simple graphic that my SME wants as part of the course description.  Not only is it a completely valid request, it's a valuable request.  But I'm going to have to go back to my SME with the news that our much-lauded course authoring tool is not capable of something that a simple Word Processing app has been able to do since the 1980s?  Yikes.  :(

Please add me to the list of voices requesting more flexibility, both in the course description and for in-line images.

Mateusz Szuter
3 years ago03/22/21 at 9:54 am (UTC)

Seriously, can anyone from the staff explain to us why you can't add a block like image or video to the course overview? Guys, that's like a main page of a website. Do you imagine main page of website with only text and some blurry image?

I know workaround for placing image by editing published course, but what the, why you just won't enable adding images or something? Please, elaborate someone, why that's not implemented. I'm very curious, maybe I don't see something.

@Renz, that's not fresh topic to share with the team. Someone posted that 2 years ago. That topic should be already widely discussed, not to mention simply implemented, as that's not something complicated.

Mateusz Szuter
almost 3 years ago06/20/21 at 9:32 am (UTC)

Since staff doesn't give a...nything about that simple problem, I'm coming with a little rescue. Maybe not the most elegant, but working.

Steps to do:
1. Export your Rise course to your computer
2. Edit file index.html in notepad or similiar
3. Right before </body> at the end of the document paste one of the following:

Video:

<script type='text/javascript'>
var obj = document.createElement('video');
obj.src = 'your_video_source.mp4';
obj.setAttribute('id', 'example_video');
obj.setAttribute('width', '600'); // 600 is the container width. It of course can be overriden and produce bigger video, but that's not the time for this.
obj.setAttribute('height', '337'); // 16:9 proportion to 600px wide.
obj.setAttribute('controls', ' ');
obj.setAttribute('poster', 'your_video_poster_img.jpg');
obj.setAttribute('preload', 'auto');
setTimeout(function(){ 
 var ovi_cont = document.getElementsByClassName("overview__main-col");
 ovi_cont[0].prepend(obj); 
 }, 1000);
 </script>

Img:

<script type='text/javascript'>
var obj_img = document.createElement('img');
obj_img.src = 'your_image_source.jpg';
obj.setAttribute('id', 'example_img');
obj_img.setAttribute('width', '600'); // 600 is the container width. It of course can be overriden and produce bigger image, but that's not the time for this.
obj_img.setAttribute('height', 'set_your_height_in_pixels'); // to keep it nice looking
setTimeout(function(){ 
 var ovi_cont = document.getElementsByClassName("overview__main-col");
 ovi_cont[0].prepend(obj_img); 
 }, 1000);
</script>

4. You can put your image/video file right where the index.html file is, then your source would be simply the name of the file.

5. The setTimeout function is what makes it not 100% elegant, as you have 1s delay before showing the image/video. You can try to adjust 1000 to 500 or something. It's that way because the page must first load to show "overview__main-col" in DOM, and it's not immediate.

6. You can also add tag <style> and style your produced img/video with CSS.

Sign In to Reply