Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Problem

Can I use animated .gif images in my app?

Solution

You cannot use an animated .gif image for an Image Library image (some will just show a single static frame, others will not display at all).  There is, however, a way to display one in your app, at least on the Detail View of a Flex AppBlock.

 

Watch this video or follow the steps below:

Widget Connector
width954
urlhttps://www.youtube.com/watch?v=hz9pjP3Yw_s
height408

 

 

 

 

1. Go to Data Mapping for your Flex AppBlock.

2. Add a new field and set the Field Type to "Long Text with HTML Content".

3. Click the green "Apply" button.

 

 

4. Go to AppOffice for your Flex AppBlock.

5. Click the Edit button (far left side of table) for an item.

6. Find your new field (in the "Long Text Fields" section) and click into it.

 

 

 

 

7. When the menu displays, click the Insert/Edit Image button.

 

 

 

8. Paste your animated GIF's URL into the Source field.

9. The Image Description field does not matter.

10. The Dimensions field affects how big the image will display on devices - you might have to try a few different numbers to get the right size.

11. Leave "Constrain proportions" checked - this ensures your image will maintain aspect ratio.

12. Click the "OK" button.

 

 

 

 

13. Click the green "Save Edits" button.

 

 

14. Repeat steps 5-13 for all items you want to show an animated GIF.

15. Go to Phone Canvases for your Flex AppBlock.

16. Go to the Detail View.

17. In the Tool Box on the right, on the My Content tab, open the Text drawer, find your new field, and drag it onto the canvas.

18. Once you can see the GIF on the canvas, you may want to change the size.  To do that:

a. Edit Go to AppOffice and edit the item. (step 4 & 5)

b. Find your GIF field and click the image.

c. Click the Insert/Edit Image button.

d. Change a dimension (the other dimension will automatically update to maintain aspect ratio) and click the OK button.

e. Click the green "Save Edits" button. (step 13)

f. Go back to the canvas and see how it looks with the new dimensions

 

Filter by label (Content by label)
showLabelsfalse
max5
spacesMOSTKB
showSpacefalse
sortmodified
reversetrue
typepage
cqllabel in ("gif","images","gifs","animated","html","image") and type = "page" and space = "MOSTKB"
labelsgif animated image images html GIFs

Page Properties
hiddentrue
Related issues