Media Formatting¶

Image Formatting¶

You can add images with optional captions using:

The captions show below the image when you click on it.

![optionalCaption](pathToImage.png)

Image Resizing¶

You can resize images using CSS.

![](pathToImage.png){width='300px' height='300px'}

Image Alignment¶

You can align images with .left, .center, or .right. You can add CSS attributes to aligned images as well!

![](pathToImage.png){.left width='100px' height='100px'}

![](pathToImage.png){.center}

![](pathToImage.png){.right}

Images with Links¶

You can add links to images by putting the image syntax within the hyper link syntax.

[![](pathToImage.png)](https://www.example.com/)

Dark & Light Mode Images¶

You can append #only-dark or #only-light to the end of the image path to have different images for dark and light mode of Catalyst Guides.

Click the or in the header to see the example!

![](img/pathToDarkImage.png#only-dark)
![](img/pathToLightImage.png#only-light)

Gifs¶

You add gifs the same way you add images.

![](pathToGif.gif)

Videos¶

You can link mp4 files using:

![type:video](pathToVideo.mp4)

You can also embed YouTube videos using:

https://youtube.com/embed/<videoID>