https://github.com/richdom2185/jekyll-dynamic-images

A GitHub Pages-compatible, no-JavaScript syntax extension to create dynamic dark/light mode HTML pictures for Jekyll.
https://github.com/richdom2185/jekyll-dynamic-images

github-pages jekyll jekyll-plugin markdown

Last synced: 15 days ago
JSON representation

A GitHub Pages-compatible, no-JavaScript syntax extension to create dynamic dark/light mode HTML pictures for Jekyll.

• Host: GitHub
• URL: https://github.com/richdom2185/jekyll-dynamic-images
• Owner: RichDom2185
• Created: 2024-05-18T18:28:47.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-10-28T19:48:20.000Z (3 months ago)
• Last Synced: 2024-11-15T13:38:45.333Z (3 months ago)
• Topics: github-pages, jekyll, jekyll-plugin, markdown
• Language: Liquid
• Homepage: https://richarddominick.me/jekyll-dynamic-images/
• Size: 28.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Jekyll Dynamic Images

> View the demo [here](https://richdom2185.github.io/jekyll-dynamic-images).

GitHub Pages only allows a specific set of [plugins](https://pages.github.com/versions/) to run, hence, additional plugins that are in the form of RubyGems are not supported.

This plugin wraps the HTML `` element, generating the necessary `` elements for the specified light/dark modes. This allows for different images to be displayed based on the user's system theme preference.

Benefits:

* Fully compatible with GitHub Pages

* Easily customisable to your needs

* Composable API with all my [other Jekyll plugins](https://github.com/RichDom2185/jekyll-showcase)

## Add it to your site

### Step 1: Copy the required files

Copy the `dynamic-images.liquid` file to your site's `_includes` folder. This is the main file that converts the extended Markdown syntax into HTML.

### Step 2: Include it in your site

#### As a HTML layout

Simply include it in any of the layouts you want to add support for:

**Recommended:** Reassign the layout's `content` variable. This approach ensures composability should you want to include additional plugins/perform additional processing on the content.

```html

{% capture content %}{% include dynamic-images.liquid html=content %}{% endcapture %}

{{ content }}

```

**Alternative:** Replace `{{ content }}` directly:

* Before:

  ```html

  

  {{ content }}

  ```

* After:

  ```html

  

  {% include dynamic-images.liquid html=content %}

  ```

## Usage

Write your dynamic images in this format:

````markdown

```img

default-image-path

```dark

dark-mode-image-path

```light

light-mode-image-path

```

````

The plugin converts it to the following HTML code:

```html

  

  

  

```

This allows the browser to natively control the displayed image based on the user's system theme, without any JavaScript.

**Note:** The sections `dark` and `light` are optional. If they are not provided, the default image will be displayed in both modes. Their ordering also does not matter.

If both the `dark` and `light` sections are provided, there is no need to provide a `default` image. For example:

````markdown

```img

```light

https://fakeimg.pl/1200x400/eaeaea/?text=You%20are%20in:%0A%0ALight%20Mode%20%E2%98%80%EF%B8%8F&font=museo&font_size=72

```dark

https://fakeimg.pl/1200x400/282828/?text=You%20are%20in:%0A%0ADark%20Mode%20%F0%9F%8C%91&font=museo&font_size=72

```

````

Gives the following (you may want to change the system theme between light and dark mode to see the effect):

  

  

  

## Use Cases

* Product Screenshots

* User Avatars

* Background Images

* Logos