Rendern Sie mehr Haltepunkte mit adaptiven Bildern

Es ist eine recht häufige Anforderung, reaktionsfähige Bilder mit mehr als zwei Haltepunkten zu rendern, d. h mehr als drei verschiedene Bildschirmgrößen.

Obwohl es in Adaptive Images kein integriertes Rendering für eine beliebige Anzahl von Haltepunkten gibt, kann dies problemlos erreicht werden Rollen Sie Ihr eigenes HTML.

Rendern Sie AdaptiveImage mit zusätzlichen Haltepunkten

Dieses Beispiel basiert auf einer Razor-Vorlage in einer Headful-Optimizely-Implementierung, in der wir einen Inhaltstyp mit dem folgenden haben AdaptiveImage Eigentum:

[Display(Name = "Main Image")]
[Proportions(7, 4, FormFactor.Large)]
[Proportions(4, 3, FormFactor.Medium)]
[Proportions(1, 1, FormFactor.Small)]
[Size(3200, FormFactor.Large)]
[Size(1200, FormFactor.Medium)]
[Size(800, FormFactor.Small)]
public virtual AdaptiveImage MainImage { get; set; }

Zunächst definieren wir eine Reihe von Haltepunkte:

(int From, int ImageSize, FormFactor FormFactor)[] breakpoints = {
    (0, 419, FormFactor.Small),
    (420, 767, FormFactor.Small),
    (768, 1023, FormFactor.Medium),
    (1024, 1199, FormFactor.Medium),
    (1200, 1439, FormFactor.Large),
    (1440, 1919, FormFactor.Large),
    (1920, 2560, FormFactor.Large),
    (2561, 3200, FormFactor.Large),
};

Als nächstes iterieren wir über diese Haltepunkte und geben a aus Element für jedes Bild in unserem Element.

Für den kleinsten Haltepunkt, also denjenigen, der bei der Breite Null beginnt, rendern wir stattdessen den Anfangspunkt Element.

@if(Model.MainImage.IsSet())
{
    // The default image, i.e. the smallest one.
    string? defaultImageUrl = null;

    

        @foreach (var breakpoint in breakpoints.OrderByDescending(breakpoint => breakpoint.From))
        {
            string imageUrl = Model.GetImageRenderSettings(x => x.MainImage, breakpoint.FormFactor)
                                   .ResizeToWidth(breakpoint.ImageSize)
                                   .GetUrl();

            if (breakpoint.From == 0)
            {
                defaultImageUrl = imageUrl;

                continue;
            }

            
        }

        

    
}

Notiz: Wir benutzen das Klein Bild von unserem Hauptbild Eigenschaft für die kleinsten Haltepunkte, die Mittel eine für die dazwischen liegenden Haltepunkte und schließlich die Groß eine für die größten Haltepunkte.

Das bedeutet, dass der Benutzer (Webredakteur) nur drei Varianten verwalten muss…

…während das resultierende Markup 8 Bildvarianten enthält:

Auf diese Weise können Sie sogar zusätzliche Parameter hinzufügen, beispielsweise zum Rendern 2x Bilder für Retina-Bildschirme usw.

Rendern Sie ein SingleImage als responsives Bild

Nehmen wir an, wir haben stattdessen eine SingleImage Eigenschaft, die wir als responsives Bild rendern möchten:

[Display(Name = "Product Image")]
[Proportions(4, 3, "Landscape", true)]
[Proportions(2, 3, "Portrait")]
[Size(3200)] // Allow rendering up to a maximum width of 3200px
public virtual SingleImage ProductImage { get; set; }

Während wir a verwenden können Element können wir auch ein verwenden Element mit Quelle Und Größen Attribute als alternativer Ansatz:

@if(Model.ProductImage.IsSet())
{
    // Define breakpoints and their image size
    // SingleImage properties don't have any form factors,
    // so we only define minimum screen and image widths
    (int From, int ImageSize)[] breakpoints = {
        (0, 419),
        (420, 767),
        (768, 1023),
        (1024, 1199),
        (1200, 1439),
        (1440, 1919),
        (1920, 2560),
        (2561, 3200),
    };

    List srcset = new(),
                 sizes = new();

    string? defaultImageUrl = null;

    foreach (var breakpoint in breakpoints.OrderByDescending(breakpoint => breakpoint.From))
    {
        ImageRenderSettings image = Model.GetImageRenderSettings(x => x.ProductImage)
                                         .ResizeToWidth(breakpoint.ImageSize);

        string imageUrl = image.GetUrl();

        srcset.Add($"{imageUrl} {image.Dimensions.Width}w");

        if (breakpoint.From == 0)
        {
            sizes.Add($"{breakpoint.ImageSize}px");

            defaultImageUrl = imageUrl;
        }
        else
        {
            sizes.Add($"(min-width: {breakpoint.From}px) {breakpoint.ImageSize}px");
        }
    }

    
}

In diesem Fall erscheint das Bild im Bearbeitungsmodus als einzelne Variante…

…während das Ergebnis -Element teilt dem Browser mit, welche Bildgröße für jede Bildschirmgröße geladen werden soll:

Wussten Sie? Der Vorteil dieser Methode besteht darin, dass sie dem Browser mitteilt, dass alle Bilder identisch sind. bis auf ihre Größe. Das bedeutet, dass der Browser kein Bild lädt, wenn er bereits ein Bild geladen hat größer Version davon – es kann einfach die Größe ändern, anstatt zusätzliche Bandbreite zu verschwenden.