#guides
## Overview
This gallery uses [[image grids]] with [[Minimal for Obsidian Publish]]. Images can be placed side by side, and clicked to open a zoomed in version.
![[eink-mode1.jpg]]
![[eink-mode2.jpg]]
## Requirements
For this guide you will need an [Obsidian Publish](https://obsidian.md/publish) site with a [custom domain](https://help.obsidian.md/Obsidian+Publish/Set+up+a+custom+domain), which is required to use `publish.js` on Obsidian Publish.
## Step 1. Add theme and JS code to your vault
1. Download [[Minimal for Obsidian Publish]] version 1.1+, and add it to your vault.
2. Download [publish.js](https://github.com/kepano/obsidian-minimal-publish/blob/master/publish.js) with the image zoom code, and add it to your vault.
Learn more about how to use `publish.css` and `publish.js` on the official [Obsidian Help site](https://help.obsidian.md/Obsidian+Publish/Customize+your+site).
## Step 2. Add helper classes to your note
For notes where you want to allow zoom, include the `img-zoom` [[Helper classes|helper class]]. You can also include the `img-grid` class if you want to enable [[Image grids]].
```
---
cssclasses:
- img-grid
- img-zoom
---
```
From here you can add images to your note following the instructions in [[Image grids]]. Note that the code for image zoom currently only supports local image embeds (not remote assets).
## Step 3. Publish your note and resources
The final step is to publish all the relevant resources:
- Your `publish.js` file
- Your `publish.css` file
- Your note and images
More information can be found on the [Obsidian Help Site](https://help.obsidian.md/Obsidian+Publish/Publish+and+unpublish+notes).
You’re done! Refresh your site to see the image gallery. Note it may require a hard refresh (using `CMD + Shift + R`) or a few minutes to clear the cache.
## Adapting this code to other Publish themes
The resources associated with this feature can be found in the Minimal for Publish [GitHub repo](https://github.com/kepano/obsidian-minimal-publish/tree/master). You can use this to adapt the CSS and JS to other Publish themes. [Image zoom CSS](https://github.com/kepano/obsidian-minimal-publish/blob/master/src/scss/publish/image-zoom.scss)
Not found
This page does not exist