SrcSet.Statiq
4.0.0
See the version list below for details.
dotnet add package SrcSet.Statiq --version 4.0.0
NuGet\Install-Package SrcSet.Statiq -Version 4.0.0
<PackageReference Include="SrcSet.Statiq" Version="4.0.0" />
paket add SrcSet.Statiq --version 4.0.0
#r "nuget: SrcSet.Statiq, 4.0.0"
// Install SrcSet.Statiq as a Cake Addin #addin nuget:?package=SrcSet.Statiq&version=4.0.0 // Install SrcSet.Statiq as a Cake Tool #tool nuget:?package=SrcSet.Statiq&version=4.0.0
SrcSet
Tools to create sets of responsive images for the web
Tools
This repository contains 3 projects:
- SrcSet: a CLI utility to create sets of responsive images
- SrcSet.Statiq: pipeline and helper for integrating responsive images into a Statiq site
- SrcSet.Core: a library used by the above, also available for public consumption
CLI
Requirements
- .NET SDK 6
Installation
dotnet tool install -g SrcSet
Usage
srcset {file or directory} [-r] [space delimited set of widths]
e.g.
srcset IMG_9687.jpg 500 1000
will resize the image to 500 and 1000 pixels wide, with the filenames IMG_9687-0500.jpg
and IMG_9687-1000.jpg
srcset all_images/
will resize all images in the all_images
directory (recursively if -r
is included) to each of the default widths
Statiq
This package contains a Statiq pipeline and HTML helper method to easily integrate responsive image generation into a Statiq site.
The process to accomplish this has two steps:
- create the set of responsive images to use (using the pipeline)
- reference the images in the generated HTML (using the HTML helper)
Step 1
To create a set of responsive images, place the originals (to be resized) alongside your other assets, and then in your bootstrapper code, add:
bootstrapper.AddPipeline("SrcSet", new ResponsiveImages("**/*.jpg"));
where the optional parameter **/*.jpg
is a glob pointing to the image assets to resize.
A custom set of widths can also be passed as a second parameter:
bootstrapper.AddPipeline("SrcSet", new ResponsiveImages("**/*.jpg", new ushort[] { 100, 200, 300 }));
Step 2
In your Razor file, call the HTML helper to create an <img/>
tag with the relevant attributes set:
@Html.Raw(ResponsiveImages.SrcSet("images/original.jpg"))
You can also customize the widths, default width, and add any other attributes here:
@Html.Raw(ResponsiveImages.SrcSet("images/original.jpg", new ushort[] { 100, 200, 300 }, 200))
@Html.Raw(ResponsiveImages.SrcSet("images/original.jpg", attributes: new Dictionary<string, string>
{
{ "class", "full-width" },
{ "alt", "don't forget about accessibility!" }
}
))
Library
The "Core" library can be used to incorporate SrcSet's functionality into your own app.
First, create a new SrcSetManager
:
var manager = new SrcSetManager();
Then invoke it's SaveSrcSet()
method:
await manager.SaveSrcSet("file.png", SrcSetManager.DefaultSizes);
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:
var manager = new SrcSetManager(Image.LoadAsync, (string s) => logger.LogDebug(s));
await manager.SaveSrcSet("file.png", new ushort[] { 100, 200, 300 });
Default widths
- 240px
- 320px
- 480px
- 640px
- 800px
- 960px
- 1280px
- 1600px
- 1920px
- 2400px
File types
SrcSet
uses ImageSharp 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:
- jpg / jpeg / jfif
- png
- bmp / bm / dip
- gif
- tga / vda / icb / vst
Contributing
Please be sure to read and follow ecoAPM's Contribution Guidelines when submitting issues or pull requests.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net6.0
- SrcSet.Core (>= 4.0.0)
- Statiq.Web (>= 1.0.0-beta.33)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.