Skip to content

Commit b9f1cee

Browse files
Add additional info to README
1 parent d635762 commit b9f1cee

File tree

1 file changed

+102
-14
lines changed

1 file changed

+102
-14
lines changed

README.md

Lines changed: 102 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,127 @@
11
# SrcSet
22

3-
A CLI to create sets of responsive images for the web
3+
Tools to create sets of responsive images for the web
4+
5+
[![SrcSet](https://img.shields.io/nuget/v/SrcSet?logo=nuget&label=SrcSet)](https://www.nuget.org/packages/SrcSet/)
6+
[![SrcSet.Statiq](https://img.shields.io/nuget/v/SrcSet.Statiq?logo=nuget&label=SrcSet.Statiq)](https://www.nuget.org/packages/SrcSet.Statiq/)
7+
[![SrcSet.Core](https://img.shields.io/nuget/v/SrcSet.Core?logo=nuget&label=SrcSet.Core)](https://www.nuget.org/packages/SrcSet.Core/)
48

5-
[![NuGet version](https://img.shields.io/nuget/v/SrcSet?logo=nuget&label=Install)](https://www.nuget.org/packages/srcset/)
69
[![Build Status](https://github.com/ecoAPM/SrcSet/workflows/CI/badge.svg)](https://github.com/ecoAPM/SrcSet/actions)
710
[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=ecoAPM_SrcSet&metric=coverage)](https://sonarcloud.io/dashboard?id=ecoAPM_SrcSet)
811

912
[![Maintainability](https://sonarcloud.io/api/project_badges/measure?project=ecoAPM_SrcSet&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=ecoAPM_SrcSet)
1013
[![Reliability](https://sonarcloud.io/api/project_badges/measure?project=ecoAPM_SrcSet&metric=reliability_rating)](https://sonarcloud.io/dashboard?id=ecoAPM_SrcSet)
1114
[![Security](https://sonarcloud.io/api/project_badges/measure?project=ecoAPM_SrcSet&metric=security_rating)](https://sonarcloud.io/dashboard?id=ecoAPM_SrcSet)
1215

13-
## Requirements
16+
## Tools
17+
18+
This repository contains 3 projects:
19+
- [SrcSet](#cli): a CLI utility to create sets of responsive images
20+
- [SrcSet.Statiq](#statiq): pipeline and helper for integrating responsive images into a Statiq site
21+
- [SrcSet.Core](#library): a library used by the above, also available for public consumption
22+
23+
## CLI
24+
25+
### Requirements
1426

1527
- .NET SDK 5.0
1628

17-
## Installation
29+
### Installation
1830

19-
dotnet tool install -g SrcSet
31+
```bash
32+
dotnet tool install -g SrcSet
33+
```
2034

21-
## Usage
35+
### Usage
2236

23-
srcset {file or directory} [-r] [space delimited set of widths]
37+
```bash
38+
srcset {file or directory} [-r] [space delimited set of widths]
39+
```
2440

2541
e.g.
2642

27-
srcset IMG_9687.jpg 500 1000
43+
```bash
44+
srcset IMG_9687.jpg 500 1000
45+
```
2846

2947
will resize the image to 500 and 1000 pixels wide, with the filenames `IMG_9687-0500.jpg` and `IMG_9687-1000.jpg`
3048

31-
srcset all_images/
49+
```bash
50+
srcset all_images/
51+
```
3252

3353
will resize all images in the `all_images` directory (recursively if `-r` is included) to each of the default widths
3454

55+
## Statiq
56+
57+
This package contains a Statiq pipeline and HTML helper method to easily integrate responsive image generation into a Statiq site.
58+
59+
The process to accomplish this has two steps:
60+
1. create the set of responsive images to use (using the pipeline)
61+
2. reference the images in the generated HTML (using the HTML helper)
62+
63+
### Step 1
64+
65+
To create a set of responsive images, place the originals (to be resized) alongside your other assets, and then in your bootstrapper code, add:
66+
67+
```c#
68+
bootstrapper.AddPipeline("SrcSet", new ResponsiveImages("**/*.jpg"));
69+
```
70+
71+
where the optional parameter `**/*.jpg` is a glob pointing to the image assets to resize.
72+
73+
A custom set of widths can also be passed as a second parameter:
74+
75+
```c#
76+
bootstrapper.AddPipeline("SrcSet", new ResponsiveImages("**/*.jpg", new ushort[] { 100, 200, 300 }));
77+
```
78+
79+
### Step 2
80+
81+
In your Razor file, call the HTML helper to create an `<img/>` tag with the relevant attributes set:
82+
83+
```c#
84+
@Html.Raw(ResponsiveImages.SrcSet("images/original.jpg"))
85+
```
86+
87+
You can also customize the widths, default width, and add any other attributes here:
88+
89+
```c#
90+
@Html.Raw(ResponsiveImages.SrcSet("images/original.jpg", new ushort[] { 100, 200, 300 }, 200))
91+
```
92+
93+
```c#
94+
@Html.Raw(ResponsiveImages.SrcSet("images/original.jpg", attributes: new Dictionary<string, string>
95+
{
96+
{ "class", "full-width" },
97+
{ "alt", "don't forget about accessibility!" }
98+
}
99+
))
100+
```
101+
102+
## Library
103+
104+
The "Core" library can be used to incorporate SrcSet's functionality into your own app.
105+
106+
First, create a new `SrcSetManager`:
107+
108+
```c#
109+
var manager = new SrcSetManager();
110+
```
111+
112+
Then invoke it's `SaveSrcSet()` method:
113+
114+
```c#
115+
await manager.SaveSrcSet("file.png", SrcSetManager.DefaultSizes);
116+
```
117+
118+
If you need more control than the default constructor and sizes provide, you can pass in a specific logging mechanism (other than the default `Console.WriteLine`) and list of widths:
119+
120+
```c#
121+
var manager = new SrcSetManager(Image.LoadAsync, (string s) => logger.LogDebug(s));
122+
await manager.SaveSrcSet("file.png", new ushort[] { 100, 200, 300 });
123+
```
124+
35125
### Default widths
36126

37127
- 240px
@@ -49,13 +139,11 @@ will resize all images in the `all_images` directory (recursively if `-r` is inc
49139

50140
`SrcSet` uses [ImageSharp](https://imagesharp.net) under the hood, and therefore should theoretically support all file types that ImageSharp supports by entering the filename as a parameter, however when entering a directory as a parameter, file types are limited to:
51141

52-
- jpg/jpeg
142+
- jpg / jpeg / jfif
53143
- png
54-
- bmp
144+
- bmp / bm / dip
55145
- gif
56-
- tif/tiff
57-
58-
Feel free to contribute an update that adds more file types to `Arguments.ValidExtensions`!
146+
- tga / vda / icb / vst
59147

60148
## Contributing
61149

0 commit comments

Comments
 (0)