HtmlCssToImage.TagHelpers
0.0.9
dotnet add package HtmlCssToImage.TagHelpers --version 0.0.9
NuGet\Install-Package HtmlCssToImage.TagHelpers -Version 0.0.9
<PackageReference Include="HtmlCssToImage.TagHelpers" Version="0.0.9" />
<PackageVersion Include="HtmlCssToImage.TagHelpers" Version="0.0.9" />
<PackageReference Include="HtmlCssToImage.TagHelpers" />
paket add HtmlCssToImage.TagHelpers --version 0.0.9
#r "nuget: HtmlCssToImage.TagHelpers, 0.0.9"
#:package HtmlCssToImage.TagHelpers@0.0.9
#addin nuget:?package=HtmlCssToImage.TagHelpers&version=0.0.9
#tool nuget:?package=HtmlCssToImage.TagHelpers&version=0.0.9
HTML/CSS to Image
.NET / C# Client - Razor Tag Helpers
This package provides Razor Tags for generating Open Graph meta tags using the HtmlCssToImage client.
Getting Started
Installation
Add the package to your project:
dotnet add package HtmlCssToImage.TagHelpers
Configuration
You'll also need to register the IHtmlCssToImageClient in your application's startup (usually Program.cs or Startup.cs):
builder.Services.AddHtmlCssToImage("api_id", "api_key");
Refer to the HtmlCssToImage.DependencyInjection docs for more details on configuring the client.
Tag Helper Reference
Finally, you need to add the tag helpers to your _ViewImports.cshtml file:
@addTagHelper *, HtmlCssToImage.TagHelpers
Setup
In your _Layout.cshtml you'll want to add a Section to your head tag to include the generated meta tags:
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>@ViewData["Title"] - RazorPagesSample</title>
@await RenderSectionAsync("HCTIMetaTags", required: false)
</head>
and in each page you want to generate an image for, add a Section like so:
@section HCTIMetaTags {
<hcti-og-templated template-id=..... />
}
If you already have a Section for meta tags in your layout, it's fine to use the tag helpers there, they don't require a dedicated section.
Tag Helpers
There are 2 available tag helpers, to inject meta tags for your pages.
hcti-og-templated
Use the <hcti-og-templated> tag to generate OG meta tags using a HCTI template.
Parameters
| Parameter | Required | Description |
|---|---|---|
template-id |
✅ | The ID of the template to use. |
template-values |
✅ | A JSON-serializable object that will serve as the template_values in the request. |
json-options |
A System.Text.Json.JsonSerializerOptions instance that will be used to serialize template-values |
|
template-version |
An optional version of the template to use, if not specified, the latest version will be used | |
og-meta-type |
The type of meta tag to generate, such as twitter:image. When not specified, og:image will be used. |
Template Values
When providing template-values, your object must be serializable to JSON. If you don't want to provide an existing class or create a dedicated one, a System.Text.Json.Nodes.JsonObject can be provided instead.
hcti-og-url
Use the <hcti-og-url> tag to generate an OG meta tag with a URL-generating image request. This tag is handy if you want to use existing styling / razor templates etc as your image source.
Parameters
| Parameter | Required | Description |
|---|---|---|
image-request |
✅ | An instance of HtmlCssToImage.Models.Requests.CreateUrlImageRequest |
og-meta-type |
The type of meta tag to generate, such as twitter:image. When not specified, og:image will be used. |
Image Request
The image-request parameter must be an instance of HtmlCssToImage.Models.Requests.CreateUrlImageRequest . The options will be used to generate a create-and-render request url. All options that are provided will be URL-encoded and included in the hmac signature except for pdf_options which is not currently supported in create-and-render.
Examples
Check out the Sample Project for a full example implementation.
Other Notes
- You can use multiple tag helpers on the same page to define different meta tags like
og:imageandtwitter:image - It is best to keep the
template-values/image-requestparameters as simple as possible to avoid unnecessary complexity and potentially large urls. - Your generated urls will be signed with your API Key & ID, so if you change them, your meta tags will generate different urls.
- If you are interested in using the HCTI API directly to generate & store your images, check out the HtmlCssToImage Client docs
Check out the HTML/CSS To Image Docs for more details on the API's capabilities.
Get started for free at htmlcsstoimage.com.
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net10.0
- HtmlCssToImage (>= 0.0.9)
- HtmlCssToImage.DependencyInjection (>= 0.0.9)
-
net9.0
- HtmlCssToImage (>= 0.0.9)
- HtmlCssToImage.DependencyInjection (>= 0.0.9)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.