Responsive billeder

<ec-picture> renderer et responsive billede fra et media item, MediaWithCrops, ImageCropperValue, en lokal sti eller en ekstern URL.

Helperen kan generere crops, srcset, WebP, AVIF, lazy loading og automatisk højde ud fra billedets ratio.

Genbrug i andre klasser

Genereringslogikken er tilgængelig via IResponsivePictureGenerator, som registreres automatisk i Umbracos DI-container. Det gør det muligt at genbruge og teste genereringen uden at køre en Razor tag helper:

public class HeroViewComponent(IResponsivePictureGenerator pictureGenerator)
{
    public async Task<ResponsivePicture> GetPictureAsync(IPublishedContent image)
    {
        return await pictureGenerator.GenerateAsync(new ResponsivePictureRequest
        {
            Source = image,
            Width = 960,
            Height = 540,
            AltText = image.Name,
        });
    }
}

I unit tests kan IResponsivePictureGenerator mockes, eller ResponsivePictureGenerator testes direkte med mocks af dens eksterne afhængigheder.

Brug

<ec-picture media="Model.HeroImage"
            width="960"
            height="540"
            sizes="(min-width: 1024px) 960px, 100vw"
            alt="Forsidebillede">
</ec-picture>

<ec-picture src="/media/hero.jpg" width="960" height="540"></ec-picture>

<ec-picture src="https://cdn.example.com/images/hero.jpg"
            width="960"
            height="540"
            alt="Forsidebillede">
</ec-picture>

Eksterne billeder

Eksterne URL’er sendes gennem ImageSharp remote provideren, så billedet kan caches og behandles lokalt.

Tillad eksterne domæner i appsettings.json:

{
  "Umbraco": {
    "Community": {
      "ImageSharpRemoteImages": {
        "Settings": [
          {
            "Prefix": "/remote",
            "AllowedDomains": ["cdn.example.com"]
          }
        ]
      }
    }
  }
}

Brug AllowedDomains eller AllowedDomainsRegex. Undgå AllowAllDomains på produktion.

Attributter

Attribut	Standard	Beskrivelse
media		Media item, MediaWithCrops eller cropper value.
src		Lokal sti, ekstern URL eller samme objekttyper som media.
width	160 hvis width og height mangler	Ønsket bredde.
height	auto	Ønsket højde. Auto-beregnes når muligt.
sizes	auto	Bruges til sizes. I block preview bliver auto til 100vw.
width-step	160	Spring mellem bredder i srcset.
max-width	FallbackMaxWidth	Øvre grænse for srcset.
quality	DefaultQuality	ImageSharp kvalitet.
crop-alias		Umbraco crop alias.
mode	Crop	ImageCropMode.
anchor		ImageCropAnchor.
img-class		Klasse på <img>.
class		Klasse på <picture>.
loading	lazy	Loading-attribut.
view	/Views/Partials/Picture.cshtml	Partial der renderer modellen.

Formater

WebP srcset er slået til som standard. AVIF og default srcset kan slås til via options.

builder.Services.Configure<ResponsivePictureOptions>(options =>
{
    options.EnableDefaultSrcSet = true;
    options.EnableWebP = true;
    options.EnableAvif = true;
    options.DefaultQuality = 82;
    options.FallbackMaxWidth = 2400;
});

SVG

SVG behandles som image/svg+xml. Små SVG’er kan inlines:

<ec-picture src="/media/logo.svg"
            inline-svg="true"
            inline-svg-threshold="8192">
</ec-picture>

inline-svg-threshold er 4096 bytes som standard.

Caching af billeddimensioner

Dimensioner for lokale og eksterne billeder gemmes i EcreoEssentialsImageSizeCache. Tabellen og eksisterende rows fra tidligere NPoco-versioner genbruges; ved første opstart tilføjes LastAccessedUtc, og eksisterende rows får opgraderingstidspunktet som første værdi.

Cachen preloades som standard ved opstart. Det betyder, at sider med mange billeder ikke laver ét databaseopslag pr. billede. Nye opslag og cache writes er asynkrone, og samtidige opslag for samme key deler ét load.

Brug følgende configuration for cleanup:

{
  "Ecreo": {
    "Essentials": {
      "ImageSizeCache": {
        "PreloadOnStartup": true,
        "DatabaseRetention": "30.00:00:00",
        "CleanupInterval": "1.00:00:00",
        "AccessFlushInterval": "00:05:00"
      }
    }
  }
}

Cleanup er aktiv som standard. Sæt DatabaseRetention til null for at slå oprydning fra. Access-tidspunkter opdateres lokalt og skrives samlet til databasen som best-effort batches. Data, der ikke er brugt i retention-perioden, kan regenereres og slettes.