Static Sites with Sphinx and Markdown Transcripts
Chapter: Simple Markdown
Lecture: Images

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Markdown really is a simple syntax, gets a lot of things, right. One of the things that really gets right is images.
0:09 Let's take a look at how you can use markdown image syntax for your images in Sphinx. I'm back in the About us document and I'd like to add a little
0:22 section. It says something cool about the usage of Python, Schlockchain and I want to include the Python logo and I want to do that
0:33 just after this paragraph. So I'll put a blank line in and I'll paste in some text. And this looks a lot like the link syntax that we just saw
0:43 from Markdown. It's got the URL in parenthesis in this case it's the URL to the Python logo as a PNG file and it's got some text
0:54 in square brackets. In this case it will be the alt text for an image But we're telling Mark down this is an image by putting the exclamation point,
1:04 the exclamation point in front. I get a preview in my tool that shows the rendered image and when I save and Sphinx runs MyST,
1:15 converts that into an image that is displayed in line using the URL to.
1:22 That logo. Now, that's going to have visitors retrieve the image from the Python site every time maybe you want to have a local image.
1:33 Let's do that instead. Let's go to the terminal and let's run 'wget' to go download the Python logo to something local and now what I can do instead of
1:44 providing the full URL. I can just say get Python-logo, which is here in my file system as Python-logo,
1:56 right beside the markdown file that we're editing and when I save my tool previews the
2:04 markdown correctly, but also it still works when rendered in Sphinx.
2:10 in markdown more specifically what it's going to do is take that file that's on disk
2:17 here and it's going to copy it into the build output into the target of HTML
2:22 that we're building towards. And there's now a subdirectory called images with all the images They're part of our content.
2:30 And when I look in there I will see this file Python-logo, the 'AboutUs.html' file that was just built We'll have a URL
2:40 that's relative to go up and down into images to point at that logo file just to ramp up and show one last part of this markdown syntax,
2:52 If I made a mistake in the file name, we'll see that the all text is displayed in place of the image.
3:01 This is the simple image syntax using the existing markdown image syntax as we'll see in later sections, MyST has a much more interesting,
3:13 much more useful, much more powerful syntax that taps into the underlying Sphinx directive for images.

Talk Python's Mastodon Michael Kennedy's Mastodon