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
2541e.g.
2642
27- srcset IMG_9687.jpg 500 1000
43+ ``` bash
44+ srcset IMG_9687.jpg 500 1000
45+ ```
2846
2947will 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
3353will 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