Table of Contents

Interface IResponsiveImage

Namespace
ToSic.Sxc.Images
Assembly
ToSic.Sxc.dll

A object which contains everything to create HTML for responsive img tags with optimal srcset offering all the sizes you may need.

You can simply add this object to the source, like @image to render the image - which is the same as @image.ImgTag

Will generate a responsive <img> tag which also has srcset attributes so the browser can get the best image for the current display.

Tip

We suggest you read the Image Guide for maximum power!

📔 Images Guide (Best Practices & Code)

[PublicApi]
public interface IResponsiveImage

Remarks

History: Released 2sxc 13.10

Properties

Alt

An Alt-description on the image which is retrieved from (in order of priority):

  1. the Razor code creating this object using the parameter imgAlt
  2. or from image metadata - see Description
  3. or from the Razor code using the parameter imgAltFallback new v15
string Alt { get; }

Property Value

string

Class

The Class of the image. Usually created from these sources

  • The initial call creating this image tag
  • Resize-Settings which may add classes
  • Rule which determines if the image should crop or not, which may add a class
string Class { get; }

Property Value

string

Description

Image description from the image Metadata. See also Alt.

string Description { get; }

Property Value

string
  • null if no metadata exists
  • "" empty string if metadata exists but no description was given
  • a string containing the added description

Remarks

Added in v15

DescriptionExtended

Extended description, typically used in galleries.

string DescriptionExtended { get; }

Property Value

string

Remarks

Added in v16.04

Height

The image height, if it should be set at all. Will be null otherwise.

string Height { get; }

Property Value

string

Img

The img tag which would normally be added to the page automatically. You can also use the normal RazorBlade API and do things like .Alt("description") etc. See also the RazorBlade Img docs

Img Img { get; }

Property Value

Img

ShowAll

Determines if the image should be shown entirely. This usually means that the image is a logo or something, so cropping was not an option. This also usually means that the aspect ratio / height may be different than expected

bool ShowAll { get; }

Property Value

bool

Sizes

The sizes in case you need it in your custom img-tag. It will only be used for normal img tags, but not for img tags inside picture tags.

string Sizes { get; }

Property Value

string

Src

The main url, used for main src property

string Src { get; }

Property Value

string

Remarks

Added in v13.11

SrcSet

The SrcSet in case you need to use it in your own custom img-tag. Note that it will be null if the image has no reason to have a srcset.

It will only be used for normal img tags, but not for img tags inside picture tags.

string SrcSet { get; }

Property Value

string

Width

The image width, if it should be set at all. Will be null otherwise.

string Width { get; }

Property Value

string

Methods

Toolbar()

Get the toolbar to show it on another tag (typically a figure around the picture) or set another toolbar instead.

[InternalApi_DoNotUse_MayChangeWithoutNotice("WIP 16.04, may still change")]
IToolbarBuilder Toolbar()

Returns

IToolbarBuilder

Remarks

Added in v16.04

Edit this page