Skip to main content

Docebo may not currently have a built-in way to add GIFs to your pages, but with a few extra resources, you can add them to your pages.  I’ll share here what we have done on our LMS to use GIFs.

We have a webserver where we are able to host images outside of Docebo - but there may be other storage options out there that will also work.  As for creating the GIFs, we have been using mostly Canva lately to create them (it’s super easy to use and inexpensive for a PRO account).

Sometimes we’ll do a single GIF image and place on the page to draw more attention to a topic.  Other times, we do a set of “slides” to scroll additional information on the page.  Once we have the slide(s) created, we export them as a GIF in Canva.  We then upload that GIF to our webserver (please comment below if you have found other hosting solutions for images) and place it on a page using an HTML widget.

In the HTML widget, we just use a simple <img> tag to display the GIF.  Here’s a sample code snippet and GiF below:

<img src="https://FULL_IMAGE_PATH_HERE.GIF" alt="" width="100%" style="display:block;margin-left:auto;margin-right:auto;" />

 

This is clever...something I have been experimenting with that may be relevant? You can also generate animated GIFs that can have a limited count of loops. It could help with keeping the “noise” down to something minimum on a page...and works nicely with a web based SCORM course builder I have been using.

I think the one thing that feels missing is that we need the support of animated gifs with the HTML widget all together...that would take a way a half of a step of complexity….

I think the one thing that feels missing is that we need the support of animated gifs with the HTML widget all together...that would take a way a half of a step of complexity….

 

Agreed!  I think some updates to the Image widget would help as well - allow more control of sizing and allow for GIFs to be used.

I’d also love to see the ability to upload a series of images and build a rotating banner directly in Docebo.  We do this by other means outside of Docebo and iFrame it in, but a built-in option would be a huge time-saver for sure.  Allow for the upload of up to X number of images and set a URL link for each image, then maybe some options to auto-scroll the images and/or allow for manually advancing through the images.

The one major drawback to using Canva GIFs in an HTML widget is that I cannot put links within the images or make each image/slide link to a different URL - it’s treated as one image, so it can only link to one URL.

I remember at some point Docebo supported APNG images, they just couldn’t be large.   Not sure if that still the case? 

Thank you for this workaround! The ability to upload GIFs should absolutely be a standard feature in Docebo 🤦.

I have added a GIF on the homepage of our learning platform. It is a single play GIF.
We are looking for a way to make the GIF clickable to play it again. Would anyone of you know how to achieve that using CSS/HTML?

Hey @sjennings78 , 

 

What a great idea to use Gif image. 

I am currently experimenting this. We have a designer who created the GIF for us. I uploaded to Docebo server… then with html code, but it only shows up as a static image. How frustrating? 

Do I need to host the GIF somewhere else? 

 

@Gracie WADA - I am not sure if you have to host the GIFs elsewhere or not.  We have a webserver that we have been using to host our static images and GIFs and found that much easier to manage than having to upload images into Docebo directly every time (I never found that interface to be very user-friendly, but I haven’t actually looked at doing it that way in a very long time).

Another option we have used in a small handful of situations is using Canva to host the images.  We designed a couple of slides that users can flip through and click on different parts of the images so they are more interactive.  For those, we build the graphics/slides in Canva and then used an HTML widget to display them on a page in Docebo - using an iFrame URL from Canva for the image path.  These are “live” projects in Canva - any change you make to them in Canva will automatically show up on Docebo without having to update anything there.

You should be able to use Docebo to host it…calling @gwlasiuk the gif master!

Thanks for the shoutout @Bfarkas !!!

 

I think the easiest way to get GIFs up and running on your pages is with the WYSIWYG tab on the HTML widget.

 

 

From there you select the image icon - and then upload your GIF directly. You should see it show up in the preview area.

Finally, to turn your GIF into a clickable ‘button’ - click on the GIF in the preview window and then select the link icon.

That should be it! Definitely the most straightforward method to adding GIFs!

Nice @gwlasiuk !

​@gwlasiuk Great tip! Not sure whether you’d know the answer to this or not but whenever I try to enter a GIF using the WYSIWYG tab, it gets rid of my transparent background and replaces it with a white one! Have you come across this problem? If so, how did you fix it? :) 

Hi ​@niamhking - Sorry to hear about that! I’d make sure you are uploading the gif using the image upload tool within WYSIWYG. Either that or check and make sure the gif is indeed transparent from the export / file - or if your page background is any different than the normal white. Sorry I can’t help more!

Reply


Terms & ConditionsCookie settings