Fix all blog images

content/blog/death-of-gfx/index.md

@@ -13,17 +13,17 @@ aliases:
 In under an hour, I was able to port my already existing Vulkan code from [Prism](/projects/prism)
 to Metal using [MoltenVK](https://github.com/KhronosGroup/MoltenVK). <!--more--> Here's a screenshot (very exciting):
 
-![Screenshot of Prism running on macOS over MoltenVK](/articles/img/prism-on-mac-vulkan.png)
+![Screenshot of Prism running on macOS over MoltenVK](prism-on-mac-vulkan.webp)
 
 To clarify, Prism running on macOS is nothing new. In fact, a large portion of the engine was
 developed natively on macOS using Metal. Vulkan was actually added after the fact, and since I already had plenty of
 Vulkan experience it was no trouble. I initially chose to use Metal natively (over MoltenVK at the time) because the tooling was still too new, and I wanted to learn Metal. However, something big has come along since then, the rise of the [Vulkan Portability Initiative](https://www.vulkan.org/portability)!
 
-![Vulkan Portability Logo](/blog/img/Vulkan-Portability.svg)
+![Vulkan Portability Logo](Vulkan-Portability.svg)
 
 The biggest thing to come out of this is the introduction of _first class macOS support_. If you've used the Vulkan SDK before on macOS, you _must_ give this new version a try. The new Vulkan SDK has an installer that takes cares of everything for you. Even the **Vulkan Configurator works**! This gets you the _same exact experience_ like as if you were developing with Vulkan on Windows or Linux. Yes, even the _Vulkan CMake module works out of the box_, thank you to every developer who worked on this!
 
-![Screenshot of Vulkan configurator running on macOS](/blog/img/vkconfig-mac.png)
+![Screenshot of Vulkan configurator running on macOS](vkconfig-mac.webp)
 
 What does this mean for Prism? Not much yet except that it's awesome that it works pretty much of the box. However, for any future graphics endeavours for me, **I unfortunately won't be supporting Metal anymore**, there just isn't a reason to. I learned as much Metal as I wanted, and the Metal backend fulfilled that purpose. However, there's still a purpose to abstracting GFX away in Prism, _to make way for DirectX support_ :-)
 

content/blog/figure1/index.md

@@ -21,7 +21,7 @@ didn't preorder her on your typical reseller website but instead got her a littl
 
 This is one of the few times that I think the figure looks much better than it does in real life than the photos provided by the company:
 
-![The photo Sega provided](figure-review-mari-sega.jpg)
+![The photo Sega provided](figure-review-mari-sega.webp)
 (Seriously?? Why doesn't she have _any_ background? I understand she is a prize figure but come on.)
 
 The materials are surprisingly decent, and it has a nice premium feel to it, but she doesn't end up looking too glossy. The paint

content/blog/opening-addresses/index.md

@@ -16,7 +16,7 @@ But I learned that [KDE Marble](https://marble.kde.org/) exists, a native KDE ap
 
 1. We set the "Show Address" to open an "External Application", this is where we'll call our python script `geo.py`:
 
-![KAddressBook settings](/blog/img/kaddressbook-settings.png)
+![KAddressBook settings](kaddressbook-settings.png)
 
 The full command is:
 
@@ -46,7 +46,7 @@ This is actually quite interesting, as I would think KAddressBook would have thi
 
 So this is where Nominatim comes in, which as said before - is a service run by OpenStreetMap. Its API is extremely simple, which is perfect. I originally tried to only do this in Shell and CURL, but it turned out to be much easier just to use GeoPy and Python.
 
-![KDE Marble without the extra arguments](/blog/img/kdemarble-faraway.png)
+![KDE Marble without the extra arguments](kdemarble-faraway.png)
 
 Then, you'll notice if you don't add any extra arguments to Marble, it'll open up super far away and also in a weird default view that's not suitable for viewing addresses. Luckily, the developers already added some nice arguments to allow us to change this default behavior:
 
@@ -54,4 +54,4 @@ Then, you'll notice if you don't add any extra arguments to Marble, it'll open u
 
 This will set the initial distance to "0 km" and also changes the map view to OpenStreetMap, perfect!
 
-![KDE Marble in it's ideal view for streets](/blog/img/kdemarble-fixed.png)
+![KDE Marble in it's ideal view for streets](kdemarble-fixed.png)

content/blog/prism-changes-feb-april-2021/index.md

@@ -18,7 +18,7 @@ The Vulkan backend is moving very quickly to reach feature parity soon with the
 fully usable for most tasks on Windows and Linux! The main roadblock right now is implementing the last of the
 functionality required for IBL and some other graphical features.
 
-![Screenshot of the material editor](/blog/img/PrismEditor_BT44VWksFY.png)
+![Screenshot of the material editor](PrismEditor_BT44VWksFY.webp)
 _This is the Material editor running on Vulkan, on Windows_
 
 ### SDL2 is the new default windowing system for Windows and Linux
@@ -35,7 +35,13 @@ Right now SDL is used for Windows and Linux, and I have no plans on supporting i
 
 ### Windows now has multiviewports!
 
-{{< youtube 1WGRgIb9WJI >}}
+{{< rawhtml >}}
+
+<video width=100% controls>
+<source src="weewoo.webm">
+</video>
+
+{{< /rawhtml >}}
 
 This is a pretty and clear nice benefit from using the SDL backend, because now it gets multiviewport support for free! If you've never seen this [dear imgui feature before](https://github.com/ocornut/imgui/wiki/Multi-Viewports), it's really cool to see it in action. It allows regular imgui windows to be dragged outside the main window, and enables some really cool workflows and use-cases you would normally see in other GUI toolkits like Qt and GTK.
 
@@ -43,7 +49,7 @@ This is a pretty and clear nice benefit from using the SDL backend, because now
 
 Before if you wanted to render to another window, static image, viewport you were required to create a whole new renderer instance. This was bad design for a multitude of reasons - duplicated work, resources and lack of proper cohesion or synchronization. This was because a single renderer instance only supported rendering to one target. Now everything is reworked and I can use just one renderer instance for the whole engine, even down to the tooling!
 
-![Screenshot of two viewports open at the same time](/blog/img/PrismEditor_Okvgr9cuI3.png)
+![Screenshot of two viewports open at the same time](PrismEditor_Okvgr9cuI3.webp)
 _This is two editor viewports running at the same time in two different windows, something not possible before under the old system._
 
 The new render target system is also the backbone of the new cross-platform dear imgui multi-viewport support (try saying that 5x fast!) The API is also extremely easy to use:

content/blog/prism-changes-may-march-2022/index.md

@@ -24,7 +24,7 @@ It wasn't until I realized that I'm pulling apart my engine for no good reason j
 
 I recently was able to get a [nice Windows setup going](https://knockout.chat/thread/25747/28#post-1207745), so now DX12 support is going to finally begin. This is one of the last APIs I plan to support officially, so this is exciting. Now I don't have any real excuse to not support this API.
 
-![Picture of my Linux/Windows desktop](/blog/img/IMG_0246.jpg)
+![Picture of my Linux/Windows desktop](IMG_0246.webp)
 
 ### Moving away from Objective-C
 
@@ -45,7 +45,7 @@ Of course, this is only if the platform supports those APIs, and it's significan
 ### Vulkan is now a first-class GFX backend
 You've seen that Vulkan has been a focus in the last changelog, but now since then it's now has first-class support for all the available graphics functions. There's also a slew of renderer changes that exclusively focus around fixing some broken PCSS among other things, in preparation of making a nicer example app.
 
-Also part of this slew of changes is MoltenVK being fully supported by the Vulkan backend. More is detailed [in the related blog post]({{< ref "the-death-of-gfx" >}}), but we enable the portability subset if detected.
+Also part of this slew of changes is MoltenVK being fully supported by the Vulkan backend. More is detailed [in the related blog post]({{< ref "death-of-gfx" >}}), but we enable the portability subset if detected.
 
 ### Example application available
 There's now a real, working example application available
@@ -54,12 +54,11 @@ right in the source code repository. This has technically been around since the
 {{< rawhtml >}}
 
 <video width=100% controls>
-<source src="/blog/img/JezVKVk.mp4">
+<source src="JezVKVk.webm">
 </video>
 
 {{< /rawhtml >}}
 
-
 ### Material system is being reworked
 I ripped out the old material system, and now it's going to be replaced with something way, way simpler. It was insanely complex, and had really no reason to exist. It was also the cause of a bunch of bugs.
 

content/blog/purging-twitter/index.md

@@ -16,4 +16,6 @@ In my series of purging my content on proprietary platforms I don't align with a
 
 I don't even receive much traffic on the site and I managed to completely cut off my Twitter addiction over the past couple of years, so I think this is the best time to do this. Right now my Twitter profile is set to private, as I still need it for DMs and my Knockout login, but I plan to completely sunset it sometime next year. If you still wish to read my microblogs, you can follow me from any ActivityPub-compliant service such as Mastodon/Pleroma/Pixelfed, etc at [@redstrate@pyra.sh](https://pyra.sh/redstrate).
 
+![Mastodon account](masto-screen.webp)
+
 All of my previous tweets are now deleted however there was some Twitter-exclusive artwork that I didn't realize wasn't posted anywhere else, so I did some reorganizing of my [gallery](/gallery)!

themes/red/layouts/_default/_markup/render-image.html

@@ -9,9 +9,17 @@
 
 <figure>
 <a href="{{ $img.RelPermalink }}" data-download="true">
-<img class="article-img" width="{{ $img.Width }}" height="{{ $img.Height}}" src="{{ $img.RelPermalink }}" alt="{{ $.Text }}" />
+{{ if eq .MediaType.SubType "svg" }}
+<img class="article-img" src="{{ $img.RelPermalink }}" alt="{{ $.Text }}" />
+{{ else }}
+<img class="article-img" width="{{ $img.Width }}" height="{{ $img.Height }}" src="{{ $img.RelPermalink }}" alt="{{ $.Text }}" />
+{{ end }}
 </a>
 <figcaption>{{ $.Text }}</figcaption>
 </figure>
 
+{{- else -}}
+
+<em>Unable to find image {{ $url }}!</em>
+
 {{- end -}}