{"id":13620454,"url":"https://github.com/lucaorio/obsidian-image-gallery","last_synced_at":"2025-04-14T21:31:23.781Z","repository":{"id":38676104,"uuid":"493112805","full_name":"lucaorio/obsidian-image-gallery","owner":"lucaorio","description":"A zero setup masonry image gallery for Obsidian","archived":false,"fork":false,"pushed_at":"2023-06-06T08:52:07.000Z","size":23725,"stargazers_count":187,"open_issues_count":20,"forks_count":14,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-08-01T21:44:26.617Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lucaorio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-05-17T05:51:24.000Z","updated_at":"2024-07-26T01:53:28.000Z","dependencies_parsed_at":"2024-01-14T04:58:52.349Z","dependency_job_id":"eb9f1690-6207-46f9-a0c3-3862a4879bee","html_url":"https://github.com/lucaorio/obsidian-image-gallery","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaorio%2Fobsidian-image-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaorio%2Fobsidian-image-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaorio%2Fobsidian-image-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucaorio%2Fobsidian-image-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucaorio","download_url":"https://codeload.github.com/lucaorio/obsidian-image-gallery/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223647926,"owners_count":17179345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T21:00:55.977Z","updated_at":"2024-11-08T07:30:26.218Z","avatar_url":"https://github.com/lucaorio.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"![Obsidian Image Gallery](assets/obsidian-image-gallery-header.jpg)\n\n# Obsidian Image Gallery\nObsidian Image Gallery is a zero setup masonry image gallery for [Obsidian](https://obsidian.md/).\n\n**Table of Contents**\n- [Requirements](#requirements)\n- [Usage](#usage)\n- [Settings](#settings)\n- [Notes](#notes)\n- [Examples](#examples)\n- [Acknowledgments](#acknowledgments)\n- [License](#license)\n- [Contacts](#contacts)\n\n## Requirements\n\n- [Obsidian](https://obsidian.md/) `(ver \u003e= 1.1.8)`\n- A folder(s) of local images located somewhere in your vault\n\n## Installation\n\nObsidian Image Gallery can be installed from within Obsidian, as for [every other community plugin](https://help.obsidian.md/Advanced+topics/Community+plugins#Discover+and+install+community+plugins).\n\n## Usage\n\nTo create a dynamic gallery, add one of the following code blocks to a note (make sure to customize the path!):\n\nFor a horizontal masonry:\n````\n```img-gallery\npath: Attachments/Folder\ntype: horizontal\n```\n````\n\nFor a vertical masonry:\n````\n```img-gallery\npath: Attachments/Folder\ntype: vertical\n```\n````\n\nTake a look at [settings](#settings) to see how to tweak some properties of the gallery; the examples available above are the most minimal configuration possible.\n\nIn *[Live Preview](https://help.obsidian.md/Live+preview+update)* mode, the gallery will be generated after moving the cursor outside the code block. Using the regular *Source Mode*, press `cmd+e` (or `ctrl+e`) to trigger Obsidian's Note Preview.\n\n![Obsidian Image Gallery - Animation](assets/obsidian-image-gallery.gif)\n\n`1.1.1` introduces a lightbox view accessible by clicking on any image part of the gallery. Then, if you need to, click the button on the top right to open the original image in a new tab.\n\n![Obsidian Image Gallery - Animation](assets/obsidian-image-gallery-lightbox.jpg)\n\n## Settings\n\nSettings can be customized in any order, in `yaml` syntax. Optional properties default to the values outlined in the tables below:\n\n| Option   | Default      | Alternatives    | Required | Description                            |\n| -------- | ------------ | --------------- | -------- | -------------------------------------- |\n| `path`   | -            | -               | Yes      | Path relative to the root of the vault |\n| `type`   | `horizontal` | `vertical`      | No       | Type of masonry                        |\n| `gutter` | `8`          | (any number)    | No       | Spacing in px between the images       |\n| `radius` | `0`          | (any number)    | No       | Border radius in px of the images      |\n| `sortby` | `ctime`      | `mtime`, `name` | No       | Sort images by                         |\n| `sort`   | `desc`       | `asc`           | No       | Order of sorting                       |\n\nOptions applicable only for `type=horizontal`:\n\n| Option   | Default | Alternatives | Required | Description              |\n| -------- | ------- | ------------ | -------- | ------------------------ |\n| `height` | `260`   | (any number) | No       | Height in px of all rows |\n\nOptions applicable only for `type=vertical`:\n\n| Option    | Default | Alternatives | Required | Description                   |\n| --------- | ------- | ------------ | -------- | ----------------------------- |\n| `columns` | `3`     | (any number) | No       | Number of columns for desktop |\n| `mobile`  | `1`     | (any number) | No       | Number of columns for mobile  |\n\n\n## Notes:\n- For `path` there is no need to specify the name of the vault\n- As mentioned in the [Requirements](#requirements) section, only local images are accepted. This plugin was designed with a specific use case in mind: create a gallery from a folder of images with as little setup as possible.\n- Make sure the images to embed have a reasonable size: generating a masonry with 60 4k photos will most likely slow down the app to a crawl!\n\nAn additional note about the orientation of the masonry vs. the distribution of its images: [until a true masonry layout](https://drafts.csswg.org/css-grid-3/) is available for native `css` grids, the sorting of the vertical version is a hit or miss. This is because the flow of its elements goes from top to bottom (see [this article](https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout) for more info about it.) If sorting is critical, please rely on the horizontal version; its images are sometimes cropped, but their ordering is way more intuitive.\n\n## Examples:\n![Obsidian Image Gallery - Examples](assets/obsidian-image-gallery-examples.jpg)\n\n## Changelog\n\n`1.1.1`\n  - fixed bug for the \"open image in new tab\" feature\n\n`1.1.0`\n  - fixed alphabetical sorting\n  - introduced lightbox for both desktop and mobile\n  - added a \"open image in new tab\" button available in the lightbox\n  - fixed the casing of README.md to let Obsidian retrieve the correct file\n\n## Acknowledgments\nAll photos in the header are by various photographers and available on [Unsplash](https://unsplash.com/s/photos/architecture).\n\n## License\n![https://github.com/lucaorio/obsidian-image-gallery/blob/master/license](https://img.shields.io/badge/license-MIT-blue.svg)\n\n## Contacts\n- Twitter: [@lucaorio_](http://twitter.com/@lucaorio_)\n- Website: [lucaorio.com](http://lucaorio.com)\n- Email: [luca.o@me.com](mailto:luca.o@me.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucaorio%2Fobsidian-image-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucaorio%2Fobsidian-image-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucaorio%2Fobsidian-image-gallery/lists"}