Dynamic images in Canvas
Responsive images
Did you know you can show a different banner or image on your Canvas page, determined by the size of the screen your student is using? With some fairly simple code, you can upload multiple images and determine which one displays on large or small monitors. This is great if you have a combination of mobile and desktop users, giving you the flexibility to optimize the image resources on your page with responsive design instead of just having one single image that is scaled across multiple width (which isn’t always a bad thing, but standard images don’t always fill the viewport optimally).
To practice this technique, grab my code below and insert it into a sandbox Canvas page.
<picture>
<source media="(min-width: 1000px)" srcset="https://canvas.instructure.com/courses/2560052/files/148298267/preview" />
<source media="(min-width: 500px)" srcset="https://canvas.instructure.com/courses/2560052/files/160709362/preview" />
<img style="width: 75%; display: block; margin-left: auto; margin-right: auto; max-width: 850px;" src="https://canvas.instructure.com/courses/2560052/files/174147282/preview" />
</picture>The interesting thing about this code is that you can insert it into an announcement, discussion post, assignment page, wiki page, etc. Anywhere you see the option to edit HTML, you can use this code. Try changing these things in the code:
Adjust the widths - how is 1000px different than 700px or 500px different than 400px?
Change min-width to max width and figure out how that is different
Upload or search unsplash for different pictures
In the <img>, change width: 75%; to a different value
Rounded corners
Another interesting and easy effect is that you can round out the corners for any image that you upload or embed into Canvas. The code is very simple. Again, in the HTML editor, you will look for you image and add "border-radius: value; " to the style. The value can be a pixel amount, such as 10px or 25px, or it could be a percentage. A value of 50% will create a perfect oval/circle. Play around with the different values. Here is the code for you to explore:
<img style="border-radius: 10px;" src="URL" />
Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas
And follow us on social media
Twitter: https://twitter.com/HowToCanvas
Instagram: https://www.instagram.com/HowToCanvas
Facebook: https://www.facebook.com/HowToCanvas