Including GIFs¶
A GIF, or Graphics Interchange Format files, contains a series of images that can be used as an short animation.
The GIF is included and displayed using the Markdown language, or by using HTML code within Markdown.
The GIF will “live” as an item that is loaded into a Markdown cell. The Markdown syntax to insert a GIF is straightforward: start with an exclamation point, then include text and file names in square and curved brackets:
The name of your local GIF file goes in the curved brackets. The text in the square brackets is loaded only if the computer can’t find the GIF file.
This is useful for when you are loading in an image from the internet – the link might fail, so you can have some text instead.
When you need more control over the image display, you can use HTML syntax. For instance, to control the width of the displayed image, use the following in your Markdown cell:
<img src="yourFile.gif" alt="Alternate text" width="200"/>
Look at the following examples to illustrate the ideas.
Example 1¶
Here is a local GIF file displayed. The code is
Note this file came via GIPHY, from this post: https://www.itsokaytobesmart.com/post/86221967962/rubiks-cube-arrangements
https://giphy.com/ is a nice source for many interesting GIFs. But check the copyrights!
Example 2¶
Here is a remote GIF file displayed, loaded in from the internet. The code is
Example 3¶
Here is a local GIF file displayed, in HTML syntax. Here, we can control the width of the displayed image. The code is
<img src="RCube.gif" width="200" >
Example 4¶
Finally, here we load in a remote GIF file for display, in HTML syntax. Here, we can control the width of the displayed image. The code is
<img src="https://media.giphy.com/media/V25gdutt6iuWc/giphy.gif" alt="drawing" width="250"/>
Old ways.¶
We used to use html magic commands iframes to display GIFs, but now Jupyter supports GIFS directly. If you see code like the following, you might want to upgrade to the methods described above.
On the other hand, this html code is just copied and pasted from the “Embed” command on the Giphy webpage, which is handy.
%%html
<iframe src="https://giphy.com/embed/6yWV529bDk3WU" width="480" height="349" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/nasa-concorde-airlineflights-6yWV529bDk3WU">via GIPHY</a></p>
%%html
<iframe src="https://giphy.com/embed/6yWV529bDk3WU" width="480" height="349" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/nasa-concorde-airlineflights-6yWV529bDk3WU">via GIPHY</a></p>
