GIFs.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![Callysto.ca Banner](https://github.com/callysto/curriculum-notebooks/blob/master/callysto-notebook-banner-top.jpg?raw=true)\n",
    "\n",
    "<a href=\"https://hub.callysto.ca/jupyter/hub/user-redirect/git-pull?repo=https%3A%2F%2Fgithub.com%2Fcallysto%2Fshorts&branch=master&subPath=GIFs.ipynb&depth=1\" target=\"_parent\"><img src=\"https://raw.githubusercontent.com/callysto/curriculum-notebooks/master/open-in-callysto-button.svg?sanitize=true\" width=\"123\" height=\"24\" alt=\"Open in Callysto\"/></a>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Including GIFs\n",
    "\n",
    "A GIF, or Graphics Interchange Format files, contains a series of images that can be used as an short animation. \n",
    "\n",
    "The GIF is included and displayed using the Markdown language, or by using HTML code within Markdown.\n",
    "\n",
    "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:\n",
    "\n",
    "```\n",
    "![Any text here](yourFile.gif)\n",
    "```\n",
    "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. \n",
    "\n",
    "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. \n",
    "\n",
    "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:\n",
    "```\n",
    "<img src=\"yourFile.gif\" alt=\"Alternate text\" width=\"200\"/>\n",
    "```\n",
    "\n",
    "Look at the following examples to illustrate the ideas. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "### Example 1\n",
    "\n",
    "Here is a local GIF file displayed. The code is\n",
    "```\n",
    "![Rubik's Cube](RCube.gif)\n",
    "```\n",
    "\n",
    "Note this file came via GIPHY, from this post: https://www.itsokaytobesmart.com/post/86221967962/rubiks-cube-arrangements\n",
    "\n",
    "https://giphy.com/ is a nice source for many interesting GIFs. But check the copyrights!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![Cube](RCube.gif)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Example 2\n",
    "\n",
    "Here is a remote GIF file displayed, loaded in from the internet. The code is\n",
    "```\n",
    "![Rubic's cube, remote](https://media.giphy.com/media/V25gdutt6iuWc/giphy.gif)\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![Rubic's cube, remote](https://media.giphy.com/media/V25gdutt6iuWc/giphy.gif)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Example 3\n",
    "\n",
    "Here is a local GIF file displayed, in HTML syntax. Here, we can control the width of the displayed image. The code is\n",
    "```\n",
    "<img src=\"RCube.gif\" width=\"200\" >\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<img src=\"RCube.gif\" width=\"200\" >"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "##### Example 4\n",
    "\n",
    "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\n",
    "```\n",
    "<img src=\"https://media.giphy.com/media/V25gdutt6iuWc/giphy.gif\" alt=\"drawing\" width=\"250\"/>\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<img src=\"https://media.giphy.com/media/V25gdutt6iuWc/giphy.gif\" alt=\"drawing\" width=\"250\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Old ways.\n",
    "\n",
    "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. \n",
    "\n",
    "On the other hand, this html code is just copied and pasted from the \"Embed\" command on the Giphy webpage, which is handy. \n",
    "\n",
    "```\n",
    "%%html\n",
    "<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>\n",
    "```\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/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>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<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>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Callysto.ca License](https://github.com/callysto/curriculum-notebooks/blob/master/callysto-notebook-banner-bottom.jpg?raw=true)](https://github.com/callysto/curriculum-notebooks/blob/master/LICENSE.md)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}