Using Gifs as banners in Rise 360 - not responsive on tablets and mobiles

Oct 15, 2020

Leonard Puglia
By Leonard Puglia

I’m trying to use an animated GIF as a section header or banner in Rise.

I created an animation in SL, saved it as a video, then converted it to a GIF that plays once. It is a 2000x400 px size image and text animates in as well as a subtle change to the image itself.

It works fine in the desktop view, but my Rise course is designed to be viewed/played on a tablet.

The GIF is not responsive when viewed in either landscape or portrait. I've attached some screenshots as a reference. 

Funnily enough, I have a GIF as the cover photo of my course, and it IS responsive (although it doesn't have text on it).

Has anyone had any experience with this?

 

Other options I've explored to achieve my desired effect:

  • Insert the animated banner as a video – this creates a play button and opens in a player that creates huge padding between the video and the content
  • Insert the animation as a SL block – in the tablet view you get that annoying play button instead of a smooth transition.

Any help is greatly appreciated.

Thanks - Leonard

4 Replies
Elizabeth Pawlicki
over 3 years ago10/15/20 at 3:52 pm (UTC)

Hey Leonard!  The difference with the cover image and what you see in the course is how they crop.  What happens in your course if you use something like the full width image instead of the text on image, or the "quote on image" option?  (Hint on the 'quote on image' block, if you hit enter a bunch of times on the "author name", it will give you more room on the image).

Leonard Puglia
over 3 years ago10/15/20 at 11:34 pm (UTC)

Hi Elizabeth,

Thanks so much for your reply.

I wasn't quite sure what you meant at first, so I tried a few things.

I'm currently using the full-width image, and this doesn't work.

I tried the "quote on image" option and it works to a degree. If I hit enter too many times in the author name section (I did 5 times to get my image full-text animation in), I get the same results at the screenshots above. 

However, when I hit enter 2 times or less (3 lines in total), it works! 

It tells me that I only have a certain image height (px) to play with and I need to contain my text and animated elements within this. After inspecting the properties of the preview section, it looks like I have 147px of height to play with to fit text and animated elements.

I'll keep experimenting and add any findings in this thread.

Thanks so much.

Leonard Puglia
over 3 years ago10/16/20 at 12:26 am (UTC)

Thanks Matt,

You just saved me an email to you!

I'm going to play with this a bit more, but I think I could probably use the full-width image option as well to achieve my desired outcome. I think I have to play with my original slide size in the SL interaction that I created to ensure 

The original slide size was 2000pm x 400px.

When I inspected the elements in the preview using the "quote on image" block, it came up with some dimensions to play with (see screenshot).

The space for the text looks limited to 147px in height to achieve the desired result. 

Cheers 

This discussion is closed. You can start a new discussion or contact Articulate Support.