BILDER-EINBINDEN

Mit dem Aufruf der Helper-Funktion Image() wird der HTML-Code von Bildern erzeugt.
Die HTML-Tag-Parameter beeinflussen den HTML-Code (z. B.: Breite, Schatten, Verlinkung, ...).
Die ImageProvider-Parameter werden hingegen der Bild-URL angehängt und beeinflussen das
Rendern des Bildes beim Abholen vom Server (z. B.: Seitenverhältnis, Zuschnitt, Transparenz, ...).
Beim Rendern werden die Parameter in der hier angegebenen Reihenfolge abgearbeitet:

@Model.Image("<Parameter>")

HTML-Tag-Parameter
Url (Index)
Columns
Width / Height
Shadow / Corner
Link
NoInline
OnlyGetUrl

ImageProvider-Parameter
Url
Inherit
DontCache
TraBack
Rotate
CutTop / CutRight / CutBottom / CutLeft
Ratio / FitIn
Resolution
TraAll
TraBlackWhite
TraTopBottom / TraTop / TraBottom
TraSpot
Saturation
ToPageColor
Blur
BackColor / ForeColor
Quality
SaveAsPng


Beispiele

Bild mit Höhe und Breite

@Model.Image("42, Width=30, Height=20")

Bild mit Seitenverhältnis

@Model.Image("42, Width=30, Ratio=3")

Bild gedreht und zugeschnitten

@Model.Image("42, Width=30, Rotate=10,
CutTop=30, CutBottom=10, CutLeft=10, CutRight=30")

Galerie

@Model.Image("41-44, Width=30, Columns=2")

Banner

@Model.Image("42, Width=-1, Ratio=3")

Bild ohne Link

@Model.Image("42, Width=25, Link=")

/Produkte/ContentManagementSystem/BilderEinbinden/42

Bild mit Link

@Model.Image("42, Width=25, Link=/Projekt/Wasserwerfer/")

Nur URL

@Model.Image("42, Ratio=3, Resolution=1920, OnlyGetUrl=True")

/Produkte/ContentManagementSystem/BilderEinbinden/42?Action=GetImage&Ratio=3&Resolution=1920&BackColor=228,236,239&ForeColor=24,36,40

Logo URL als PNG-Datei

@Model.Image("/DiscJockey/01, Ratio=3, FitIn=True,
Resolution=1920, TraBack=1, OnlyGetUrl=True, Inherit=True, SaveAsPng=True")

/DiscJockey/1?Action=GetImage&Inherit=True&TraBack=1&Ratio=3&FitIn=True&Resolution=1920&BackColor=228,236,239&ForeColor=24,36,40&SaveAsPng=True

Zeitlicher Ablauf der Bild-Darstellung

Browser fordert Seite per URL an

URL der Seite:

/Projekte/Test/

Server rendert _index.vbhtml

VBHTML-Code des Helper-Funktionsaufrufs:

@Model.Image("42, Width=30, Ratio=2"))

Server gibt HTML-Code zurück

Code des HTML-Bild-Tags:

<div class="Image" style="display: inline-block;">

<a class="fancybox-thumb" href="/Produkte/Test/BilderFunktion/42?Action=GetImage&amp;Ratio=2&amp;Resolution=1920&amp; BackColor=228,236,239&amp;ForeColor=24,36,40&amp;FancyBox=.jpg" rel="fancybox-thumb">

<span style="margin: 0.75rem; border-radius: 0.75rem; width: 16.5rem; height: 8.25rem; overflow: hidden; display: inline-block; box-shadow: 0rem 0rem 0.75rem black;">

<img style="width: 16.5rem; height: 8.25rem;" alt="/Produkte/Test/BilderFunktion/42" src="/Produkte/WebContentManagementSystem/BilderFunktion/42?Action=GetImage&amp;Ratio=2&amp;Resolution=330&amp; BackColor=228,236,239&amp;ForeColor=24,36,40&amp;FancyBox=.jpg">

</span></a></div>

Browser fordert Bild per URL an

URL des Bildes:

/Produkte/Test/42?Action=GetImage&Ratio=1,3288&Resolution=...

Server rendert angefordertes Bild und gibt es zurück

Browser zeigt das Bild an:


HTML-Tag-Parameter

Parameter, die nur den HTML-Code beeinflussen und nicht per URL-Query-String
an den Server übergeben werden.

Helper-Funktion: @Model.Image("<Parameter>")
• Erzeugt den HTML-Code eines Einzelbilds oder einer ganzen Bildergalerie
• Berechnet Parameter Resolution in Abhängigkeit der Bildgröße automatisch
• In der Datei Site.vb ist eine größenspezifische Standardauflösung hinterlegt
• Definiert die Parameter Back- und Fore-Color mit den aktuellen Seitenfarben vor


#### Syntaxfehler ####

Bei einem nicht bekannten Parameter wir ein Syntaxfehler ausgegeben.
Werden weder Fehler noch Bild angezeigt, wurde ein HTML-Tag nicht geschlossen!

@Model.Image("42, Width=30, Test=123")

1 Fehler beim Erstellen des Bildes:
Fehler bei Parameter: test


#### Url (oder Indexangabe) ####

Pfad und Dateiname, Index oder Indexbereich von Bildern

• Der Parameter Url (Index) darf ein Intervall (z. B. "11-19") enthalten
• Wird Url als erster Parameter angegeben, darf "Url=" weggelassen werden.
• Wird Url nicht angegeben, werden alle Bilder des Ordners angezeigt.

@Model.Image("Url=42 IMG_04032.jpg, Width=20")

@Model.Image("42 IMG_04032.jpg, Width=20")

@Model.Image("IMG_04032.jpg, Width=20")

@Model.Image("42, Width=20")

@Model.Image("41-44, Width=20")

@Model.Image("Width=20")

@Model.Image("/Home/10-40, Width=20")

@Model.Image("Width=20")


#### Columns ####

Anzahl der Spalten einer Bildergalerie

@Model.Image("41-44, width=30, Columns=2")

@Model.Image("41-44, width=30, Columns=3")


#### Width / Height ####

Breite und Höhe des HTML-IMG-Tags bzw. der Bildergalerie

• Wird Breite und Höhe angegeben, wird der Parameter Ratio berechnet und überschrieben.
• Verzerrte Bilder können somit nicht dargestellt werden.
• Wird Width nicht angegeben, wird der Standardwert von 100% (Textfluss-Breite) gesetzt.
• Wird Width mit -1 angegeben, wird das Bild über die ganze Seitenbreite dargestellt.
• Die Größenangaben werden in % mit Bezug auf die Textfluss-Breite angegeben.

@Model.Image("42, width=30")

@Model.Image("42, height=10")

@Model.Image("42, width=100, height=10")

@Model.Image("42, width=-1, height=10")

@Model.Image("42, width=30, height=10, ratio=123")


#### Shadow / Corner ####

Größe des Schattens und der abgerundeten Ecken in der HTML-Einheit rem.

• Schatten verkleinert das Bild nicht, wenn er als negative Zahl angegeben wird.

@Model.Image("42, width=30, Shadow=1, Corner=1")
@Model.Image("42, width=30, Shadow=3, Corner=3")
@Model.Image("42, width=30, Shadow=-3, Corner=3")


#### Link ####

Hyperlink des Bildes

• Wird der Link-Parameter nicht beschrieben, verlinkt er zur vergrößerten Bilddarstellung.
• Wird der Link-Parameter mit "" beschrieben, findet keine Verlinkung statt.

@Model.Image("42, width=25")
@Model.Image("42, width=25, Link=")
@Model.Image("42, width=25, Link=/Projekt/Wasserwerfer/")
@Model.Image("42, width=25, Link=http://natur-kunst-deko.de")

/Produkte/ContentManagementSystem/BilderEinbinden/42


#### NoInline ####

Zeigt das Bild nicht als Element einer Zeile an.

True -> Image-Container-CSS: disply:flex;
False -> Image-Container-CSS: disply:inline-flex;

@Model.Image("42, width=30")
@Model.Image("42, width=30, NoInline=True")





#### OnlyGetUrl ####

Gibt nur die URL des Bilds als Zeichenkette zurück.

@Model.Image("42, width=30")
@Model.Image("42, width=30, OnlyGetUrl=True")



/Produkte/ContentManagementSystem/BilderEinbinden/42?Action=GetImage&BackColor=228,236,239&ForeColor=24,36,40


ImageProvider-Parameter

Parameter, die per URL-Query-String an den Server übergeben werden, worauf der Server
mit ModuleImageProvider.vb eine JPG- oder PNG-Datei rendert und diese zurück gibt.

ImageProvider
• Bearbeitet und rendert anhand einer URL mit Query-String ein Bild
• Speichert bereits gerenderte Bilder in einen Cache


#### Url ####

Der Parameter Url aus dem Query-String überschreibt die angegebene URL.

.../Produkte/Doc-Manager/11?GetImage=True
... entspricht ...
.../?GetImage=True&URL=/Produkte/Doc-Manager/11

Kann hier nicht simuliert werden, weil die Funktion @Model.Image("")
den Parameter Url immer als URL angibt und nicht in den Query-String schreibt.


#### GetImage ####

Der Server antwortet auf die Anfrage eines Browsers nur dann mit einem Bild,
wenn die URL im Query-String den Parameter "GetImage=True" enthält.

http://johannes-glaser.de/Produkte/Doc-Manager/42?GetImage=True&...


#### Inherit ####

Bild wird in Überordnern gesucht, falls es im angegebenen Verzeichnis nicht gefunden wird.

@Model.Image("01, Width=30, Inherit=False")
@Model.Image("01, Width=30, Inherit=True")


#### DontCache ####

Bild wird nach dem Rendern sofort wieder aus dem Cache-Verzeichnis gelöscht.

@Model.Image("42, Width=30, DontCache=True")
@Model.Image("42, Width=30, DontCache=False")


#### TraBack ####

Transparenter Hintergrund (Toleranz in Prozent)

• TraBack > 0 -> Hintergrundfarbe aus ersten Pixels links oben erkennen
• TraBack < 0 -> Hintergrundfarbe aus dem häuftigsten Vorkommen erkennen

@Model.Image("41, Width=30, TraBack=10")
@Model.Image("41, Width=30, TraBack=-10")


#### Rotate ####

Bild drehen (in Grad) und automatisch zugeschneiden

@Model.Image("43, Width=30, Rotate=45")
@Model.Image("43, Width=30, Rotate=-10")


#### CutTop / CutRight / CutBottom / CutLeft ####

Beschneiden von oben / rechts / unten / links (in Prozent)

@Model.Image("43, Width=30, CutTop=50, CutRight=50, CutLeft=20")
@Model.Image("43, Width=30, Ratio=2, CutTop=10, CutBottom=10")


#### Ratio / FitIn ####

Der Parameter Ratio gibt das Seitenverhältnis (Breite / Höhe) an.
Das Bild wird automatisch zentriert und auf das Seitenverhältnis
(bei FitIn=False) zugeschnitten oder (bei FitIn=True) erweitert.
(Der goldene Schnitt hat das Seitenverhältnis 1.618)

• Der Parameter Ratio wird automatisch gesetzt, wenn Width und Height vorgegeben werden.
• Der Parameter Ratio ist bei einer Galerie 1.5, wenn er nicht überschrieben wird.
• Der Parameter FitIn bestimmt, ob beim Zuschneiden beschnitten oder eingepasst wird.

@Model.Image("43, Width=30, Ratio=3")
@Model.Image("43, Width=30, Ratio=3, FitIn=True")


#### Resolution ####

Auflösung der längsten Seite (in Pixel)

• Der Standardwert ist im ModuleImageProvider.vb auf 1920 eingestellt.
• Mit NaN wird das Bild in Original-Auflösung geladen.

@Model.Image("41, Width=30, Resolution=NaN")
@Model.Image("41, Width=30, Resolution=64")


#### TraAll ####

Transparenz (in Prozent)

@Model.Image("44, Width=30, TraAll=25")
@Model.Image("44, Width=30, TraAll=75")


#### TraBlackWhite ####

Transparenz der Schwarz- bzw. Weiß-Anteile (in Prozent)

• TraBlackWhite < 0 -> Schwarzanteile zu Transparenz
• TraBlackWhite > 0 -> Weißanteile zu Transparenz

@Model.Image("44, Width=30, TraBlackWhite=75")
@Model.Image("44, Width=30, TraBlackWhite=-75, BackColor=0;255;0")


#### TraTopBottom / TraTop / TraBottom ####

Transparenter Verlauf oben bzw. unten (Effektgröße in Prozent)

@Model.Image("44, Width=30, TraTopBottom=25")
@Model.Image("44, Width=30, TraTop=25")


#### TraSpot ####

Transparenter kreisförmiger Verlauf (Effektgröße in Prozent)

@Model.Image("44, Width=30, TraSpot=25")
@Model.Image("44, Width=30, TraSpot=100")


#### Saturation ####

Graustufen (Farbsättigung in Prozent)

@Model.Image("42, Width=30, Saturation=0")
@Model.Image("42, Width=30, Saturation=50")


#### ToPageColor ####

Ersetzt Schwarzanteile durch Vordergrundfarbe und Weißanteile durch Hintergrundfarbe

• ToPageColor > 0 -> Effektstärke
• ToPageColor < 0 -> Effektstärke bei vertauschter Vorder- und Hintergrundfarbe)


@Model.Image("42, Width=30, ToPageColor=100")
@Model.Image("42, Width=30, ToPageColor=-75,
BackColor=255;0;0, ForeColor=0;0;255")


#### Blur ####

Unschärfe (in %)

100% entspricht einem Unschärferadius von der Größe der längste Seite des Bildes

@Model.Image("42, Width=30, Blur=1")
@Model.Image("42, Width=30, Blur=10")


#### BackColor / ForeColor ####

Hintergrundfarbe und Vordergrundfarbe (im Format 255;255;255)

BackColor für Effekt ToPageColor und Hintergrund bei JPG
ForeColor für Effekt ToPageColor


@Model.Image("41, Width=30, ToPageColor=100")
@Model.Image("41, Width=30, ToPageColor=100,
BackColor=255;0;0, ForeColor=255;0;0")


#### Quality ####

JPG-Qualität der Komprimierung

Der Parameter Quality wird mit dem Standardwert 80% in ModuleImage.vb vorbelegt.

@Model.Image("42, Width=30, Quality=75")
@Model.Image("42, Width=30, Quality=10")


#### SaveAsPng ####

Speichert das Bild im PNG-Format mit Transparenz

True -> PNG-Format ARGB mit transparenz ohne Hintergrundfarbe
False -> JPG-Format RGB mit Hintergrundfarbe statt Transparenz


@Model.Image("41, Width=30, TraBackground=10, SaveAsPng=False")
@Model.Image("41, Width=30, TraBackground=10, SaveAsPng=True")