Abschnitt: Bild
Beschreibung
Mit dem Bild-Abschnitt können Bilder in den Content einer Seite eingebunden werden. Die Bilder können sowohl aus einem Medien-Pool stammen als auch direkt am Artikel hochgeladen werden. Neben einen Alternativtext, Copyright-Hinweis und einer Bildunterschrift kann eine Anordnung und das Klickverhalten konfiguriert werden.
- Anordnung
- Die Anordnung des Bildes innerhalb einer Seite. Zum Beispiel: "kleines Bild rechts".
- Klickverhalten
- Klickverhalten des Bildes.
- Vergrößerungsfunktion
- Das Bild wird im ImageViewer dargestellt. Der ImageViewer bietet die Möglichkeit über alle in der Seite eingebundenen Bilder (durch den Bild-Abschnitt) zu Browsen.
- Link
- Das Bild kann mit den Link-Typen "interner Link", "externer Link" oder "Download" verlinkt werden.
- keine Aktion
- Das Klicken auf das Bild hat keine Aktion zur Folge.
Konfiguration
IES Optionen
Name | Type | Beschreibung |
---|---|---|
sectionTypes.image.options.alignments
|
Array | Beinhaltet die Konfigurationen für die Anordnung des Bildes. |
sectionTypes.image.options.picture
|
Array | Beinhaltet die Konfigurationen für die Skalierung des Bildes. |
Anordnung
"alignments" : [
{
"label" : "links", // Label für die Redaktionelleoberfläche
"value" : "left" // CSS-Klasse des Bildes (ohne "SP-figure-")
}
]
Skalierung
"picture": {
"sizes" : [
{ // Mobile-Bild für die kleinste Auflösung
"width" : 25, // breite in Pixel
"height" : 25, // höhe in Pixel
"order" : 0.4 // Reihenfolge: in dieser Reihenfolge werden die skalierten Bilder im Picture-Tag ausgegeben. Dabei muss darauf geachtet werden, dass das größte Bild zu erst ausgegeben wird, sprich den index 0.0 hat.
},
{
"mediaQry" : "(min-width: 10em)", // Media Query für das Picture-Tag
"width" : 50,
"height" : 50,
"order" : 0.3
},
{
"mediaQry" : "(min-width: 60em)",
"width" : 500,
"height" : 500,
"static" : true, // Fallback Bild falls das Picture-Tag vom Browser nicht unterstützt wird.
"order" : 0.0
}
],
"padding" : "fit", // Padding für sp:scaleimage
"background" : "" // Hintergrundfarbe des Bildes (nur bei eingeschlateten Padding relevant)
}
Beispiel
{
"sectionTypes" : {
...,
"image": {
"id" : "image",
"name": "Bild",
"order": 0.000001,
"template": { "module" : "sitekit-module", "uri" : "/templates/sectionTypes/image.spml" },
"aggregator" : { "module" : "sitekit-module", "uri" : "/aggregator/sectionTypes/image.spml" },
"options" : {
"alignments" : [
{
"label" : "links",
"value" : "left"
},
{
"label" : "rechts",
"value" : "right"
},
{
"label" : "groß",
"value" : "big"
},
{
"label" : "kleines Bild links",
"value" : "small-left"
},
{
"label" : "kleines Bild rechts",
"value" : "small-right"
}
],
"picture": {
"sizes" : [
{
"width" : 25,
"height" : 25,
"order" : 0.4
},
{
"mediaQry" : "(min-width: 10em)",
"width" : 50,
"height" : 50,
"order" : 0.3
},
{
"mediaQry" : "(min-width: 20em)",
"width" : 100,
"height" : 100,
"order" : 0.2
},
{
"mediaQry" : "(min-width: 30em)",
"width" : 150,
"height" : 150,
"order" : 0.1
},
{
"mediaQry" : "(min-width: 60em)",
"width" : 500,
"height" : 500,
"static" : true,
"order" : 0.0
}
],
"padding" : "fit",
"background" : ""
}
}
},
...
}
}
PHP Optionen
Mehrsprachigkeit
Unterstütz z.Z. keine Mehrsprachigkeit.
IES Mehrsprachigkeit
PHP Mehrsprachigkeit
Hat keine Mehrsprachigkeits-Definitionen in PHP
Datenstruktur
IES Datenstruktur
PHP Datenstruktur
Der Text-Abschnitt benutzt folgende Models:
SP\SiteKit\Model\Content\Image
SP\SiteKit\Model\Content\Image\Item