Responsive Media

Reference til billeder, SVG og embeds i Ecreo.Essentials.

Billeder med <ec-picture>

<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>

Picture-attributter

Attribut	Standard	Bruges til
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	HTML 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.

Remote billeder

Eksterne URL’er sendes gennem ImageSharp remote provideren. Tillad domæner i appsettings.json:

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

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

Formater

Format	Note
WebP	srcset er slået til som standard.
AVIF	Kan slås til via ResponsivePictureOptions.
Default srcset	Kan slås til via EnableDefaultSrcSet.
SVG	Behandles som image/svg+xml; små SVG’er kan inlines.

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

Inline SVG

<ec-svg src="/assets/icons/search.svg"
        class="icon icon-search"
        aria-hidden="true">
</ec-svg>

SVG-regel	Note
src uden filendelse	Helperen antager .svg.
Attributter	Kopieres til SVG-roden. Eksisterende værdier gemmes som data-original-*.
exclude-attributes	Bruges til attributter der ikke skal kopieres.
Scoping	Interne <style>-regler og id-referencer scopes, så samme SVG kan bruges flere gange.

Embeds

<ec-embed src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"></ec-embed>
<ec-embed src="https://vimeo.com/123456789" append-query="autoplay=1"></ec-embed>

Provider	Matcher	Output
YouTubeEmbedProvider	youtu.be og youtube.com	<iframe src="https://www.youtube.com/embed/{id}">
VimeoEmbedProvider	vimeo.com/{id}	<iframe src="https://player.vimeo.com/video/{id}">
VimeoM3u8EmbedProvider	player.vimeo.com/external/{id}.m3u8	Partial Partials/EcEmbed/M3u8Embed

Custom embeds:

• Brug ISimpleEmbedProvider, når output er et enkelt tag med en URL-attribut.
• Brug IViewEmbedProvider, når output skal renderes med partial og model.