hugo-module-img-srcset

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

hugo-module-img-srcset

★ 12 Open GitHub ↗

A Hugo module to modify image Markdown tags to support srcsets

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# hugo-module-img-srcset

A [Hugo](https://gohugo.io) module to modify image Markdown tags to support [srcsets](https://www.w3schools.com/tags/att_source_srcset.asp)

This module turns your normal image shortcode into a srcset:

```markdown
![I wonder where I have to go](https://raw.githubusercontent.com/jan-xyz/hugo-module-img-srcset/main/image/map.jpg "a map of the universe")
```

resizes the image to support multiple view port sizes and renderes the
appropriate HTML source set:

```html
<p class="md__image">
<picture>
  <source media="(min-width:500px)" srcset="/.../image/map_800x0_resize_q75_box.jpg">
  <source media="(min-width:800px)" srcset="/.../image/map_1200x0_resize_q75_box.jpg">
  <source media="(min-width:1200px)" srcset="/.../image/map_1500x0_resize_q75_box.jpg">
  <source media="(min-width:1500px)" srcset="image/map.jpg">
  <img src="/.../image/map_500x0_resize_q75_box.jpg" alt="a map of the universe" title="a map of the universe" style="width:auto;">
</picture>
</p>
```

## Usage

Add the module to your `config.toml` :

```toml
theme = [ "github.com/jan-xyz/hugo-module-img-srcset"]
```

## Example

[github.com/jan-xyz/blog](https://github.com/jan-xyz/blog)

hugo-module-img-srcset

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README