> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hayami.moe/llms.txt
> Use this file to discover all available pages before exploring further.

# Image previews

> What are image previews, and how to properly configure them on Hayami.

Image previews allow you to, on-hover, view the image or images associated with an Imgur, ImageChest, or postimages link. **When you've hovered over a link associated with a single image, these don't require an API key (usually) from any provider as they can be viewed & embedded straight off the bat.** However, for albums, these require interacting with the image APIs to get the images associated with an album. After using your API keys, you should be able to see image albums embedded in Hayami.

<img src="https://mintcdn.com/hayami/jxUzexqMrht2DpyL/images/Animation-ezgif.com-optimize.gif?s=b29d4d86e6bd087440c5dd0b9ec1e7c2" alt="Animation Ezgif Com Optimize" width="3181" height="1749" data-path="images/Animation-ezgif.com-optimize.gif" />

## How to enable image preview functionality

Image previews from Imgur should already work out the box, but the option to override the API keys for this functionality is added in if desired. ImageChest, though, requires an API key to get images from albums. This will require an ImageChest account.

### How to get an Imagechest API Key

Imagechest API keys can be generated from [https://imgchest.com/profile/api](https://imgchest.com/profile/api), given you've got an Imagechest account. Pop inside the 'Name' field what you'd like to remember your API key by (so, Hayami, etc), hit 'Create', and you should get your generated API Key.

<img src="https://mintcdn.com/hayami/J0HVsxfOkfzK8sl4/images/image-1.png?fit=max&auto=format&n=J0HVsxfOkfzK8sl4&q=85&s=7cfde4623bae1d51523428427aabbb84" alt="Image" width="2686" height="621" data-path="images/image-1.png" />

<img src="https://mintcdn.com/hayami/NjctVbRcv4dc5dRy/images/hayamiImgchestAPikey.jpg?fit=max&auto=format&n=NjctVbRcv4dc5dRy&q=85&s=b31d18f4bb03012312eadc9e8c4d1e89" alt="Hayami Imgchest API Token" width="3199" height="1820" data-path="images/hayamiImgchestAPikey.jpg" />

The whole token above is the API Token, which you should copy and place into **Hayami > Settings > Image previews > ImgChest API key**. Ensure you enable image previews if it's not already turned on. Once you've done that, image previews for Imagechest links should now perform properly.

In albums, going to the next image can be done by clicking the Down/Right arrow on your keyboard, both via the popup and on-click previews.

<img src="https://mintcdn.com/hayami/HU3Mo2zbWS1AkbXY/images/Animation2-ezgif.com-optimize.gif?s=17a1a88cb3b9d3f1a63592686e883913" alt="Animation2 Ezgif Com Optimize" width="3178" height="1612" data-path="images/Animation2-ezgif.com-optimize.gif" />

### How to get an Imgur API Key

<Info>
  This guide is intended for people already with Imgur API keys, since Imgur has ceased the creation of new Imgur API applications. **No Imgur key?** **Imgur should already work out the box with Hayami**.
</Info>

All that's required is your client ID directly from the Imgur API. If you go to [https://imgur.com/account/settings/apps](https://imgur.com/account/settings/apps), copy your 'Client ID'.

<img src="https://mintcdn.com/hayami/K1XSkHFRAe5uRnu-/images/imgurapikeyget-2.png?fit=max&auto=format&n=K1XSkHFRAe5uRnu-&q=85&s=44b8dcbaa74d0d54eccd04adf4892187" alt="Imgurapikeyget" width="3199" height="1037" data-path="images/imgurapikeyget-2.png" />

Place into **Hayami > Settings > Image previews > Imgur Client ID**. Ensure you enable image previews if it's not already turned on. Once you've done that, image previews for Imgur links should now perform properly.

<img src="https://mintcdn.com/hayami/zijXbRGAsxD7B67L/images/Animation3-ezgif.com-optimize.gif?s=694513c42397640502e38dc46f66bc51" alt="Animation3 Ezgif Com Optimize" width="3178" height="1708" data-path="images/Animation3-ezgif.com-optimize.gif" />

## How to configure advanced options in image previews

To be more respecting to different preferences, Hayami has provided a multitude of delivery options for serving images from specific image hosts. To configure these options, click 'Expand' under 'Advanced' under Image previews. Hayami allows you to change:

* **Frontend** - This is the site visited *after* clicking onto an image link. This is configured to be the image site as-default usually.
* **Image CDN** - This is how images are *delivered* to you, either through the image site directly, or through a Content Delivery Network, which streamlines and optimises delivery of images directly.

These options can be freely configured & changed to suit different preferences. Advanced options are only triggered for specific image hosts which are clearly labelled per-option under this menu.