How do you link to images used in customised certificates?

[KathWilliams]

Hello fellow Canvas peeps!

We are attempting to customise our certificates for Catalog.

We already have the images we would like to use uploaded in Canvas and would prefer to use these and we do know how to use images that are on a public URL.

Our question is:

1. Is it possible to use the images we have in Canvas? And has anyone achieved this?

2. If so, what would be the source code (https//) for these images? 

Thanks in advance Kath!

[jsowalsk · Accepted solution]

Hi,

Here is an example, you need to host the image externally or point to it in the files folder in Canvas.

<div style=" position: absolute; box-sizing: border-box; width: 10.6in; height: 7.5in; margin:auto; margin-top: 40px; border: 4px solid #000; padding: 1em; text-align: center; overflow: hidden;">
<img id="Google" src="http://www.google.com.jpg" alt="Google" width="310" height="110" style="position: absolute; bottom: .5in; left: .5in;">
<img id="Google" src="{{catalog_logo}}" alt="Google" width="300" height="61" style="position: absolute; bottom: .75in; right: .5in;">
<p style="font-size: 250%;">Certificate of Completion</p>
<p>Awarded to</p>
<p style="font-style: italic; font-size:200%;">{{student_name}}</p>
<p>For Completing</p>
<p style="font-size: 150%;">Google</p>
<p>{{completion_date}}</p>
<p>4 Contact Hours</p>
<p style="font-weight: bold;">
Developed by Google
<br>
in cooperation with
<br>
Google
</p>
</div>

[jsowalsk · Accepted solution]

Hi,

Here is an example, you need to host the image externally or point to it in the files folder in Canvas.

<div style=" position: absolute; box-sizing: border-box; width: 10.6in; height: 7.5in; margin:auto; margin-top: 40px; border: 4px solid #000; padding: 1em; text-align: center; overflow: hidden;">
<img id="Google" src="http://www.google.com.jpg" alt="Google" width="310" height="110" style="position: absolute; bottom: .5in; left: .5in;">
<img id="Google" src="{{catalog_logo}}" alt="Google" width="300" height="61" style="position: absolute; bottom: .75in; right: .5in;">
<p style="font-size: 250%;">Certificate of Completion</p>
<p>Awarded to</p>
<p style="font-style: italic; font-size:200%;">{{student_name}}</p>
<p>For Completing</p>
<p style="font-size: 150%;">Google</p>
<p>{{completion_date}}</p>
<p>4 Contact Hours</p>
<p style="font-weight: bold;">
Developed by Google
<br>
in cooperation with
<br>
Google
</p>
</div>

[KathWilliams]

Thank you for sharing the code 🙂

We are working on something similar but your ideas are spot on! Thanks 🙂

[hechla · Accepted solution]

Hi @KathWilliams - The image file(s) you use in the customized certificate would need to be publicly accessible so using images from Canvas would tricky, unless you create a special course and make the Visibility set to public. 

We added the two images we use in our custom certificates to our regular website server. They're not added to any of our webpages, but since the server/website is publicly visible, it made sense to have the images there. 

[KathWilliams]

Thanks so much for your reply, we had this idea but not sure if it's something we want to attempt etc etc.

The public hosting of images via our website seems to be the best option.

Thanks again 🙂