Forum Discussion
Adding a photo to the course homepage in Rise
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.