Abschnitt: Bild: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Knak (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „==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 …“) |
|||
(7 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 21: | Zeile 21: | ||
| [[Array]] | | [[Array]] | ||
| Beinhaltet die Konfigurationen für die Skalierung des Bildes. | | Beinhaltet die Konfigurationen für die Skalierung des Bildes. | ||
+ | |- | ||
+ | | <code>sectionTypes.image.options.copyright</code> | ||
+ | | [[Object]] | ||
+ | | Siehe [[Bilder im SiteKit#Copyright]] | ||
|} | |} | ||
====Anordnung==== | ====Anordnung==== | ||
Zeile 147: | Zeile 151: | ||
==Datenstruktur== | ==Datenstruktur== | ||
===IES Datenstruktur=== | ===IES Datenstruktur=== | ||
+ | {| class="prettytable" | ||
+ | |- class="hintergrundfarbe1" | ||
+ | ! Name || Type || Beschreibung | ||
+ | |- | ||
+ | | <code>sp_imageUpload</code> | ||
+ | | [[BinaryInformation]] | ||
+ | | Hochgeladenes Bild | ||
+ | |- | ||
+ | | <code>sp_image</code> | ||
+ | | [[ID]] | ||
+ | | Verknüpfung zu einem Bild | ||
+ | |- | ||
+ | | <code>sp_imageCopyright</code> | ||
+ | | [[String]] | ||
+ | | Copyright für hochgeladenes Bild | ||
+ | |- | ||
+ | | <code>sp_imageText</code> | ||
+ | | [[Boolean]] | ||
+ | | Alternativtext des Bildes (Überschreibt den Wert, wenn das Bild eine Verknüpfung ist) | ||
+ | |- | ||
+ | | <code>sp_imageLegend</code> | ||
+ | | [[String]] | ||
+ | | Bildunterschrift | ||
+ | |- | ||
+ | | <code>sp_imageAlign</code> | ||
+ | | [[String]] | ||
+ | | Anordnung des Bildes (left-small, right-small, full) | ||
+ | |- | ||
+ | | <code>sp_imageClick</code> | ||
+ | | [[String]] | ||
+ | | Klickverhalten: Default = Vergrößerungsfuntion, link = Link, none = keine Aktion | ||
+ | |- | ||
+ | | <code>sp_linkType</code> | ||
+ | | [[String]] | ||
+ | | Linktype, wenn Klickverhalten = link: Default = interner Link, external = externer Link, download = Download | ||
+ | |- | ||
+ | | <code>sp_linkNewWindow</code> | ||
+ | | [[Boolean]] | ||
+ | | Gibt an, ob Link im neuen Fenster geöffnet werden soll | ||
+ | |- | ||
+ | | <code>sp_link</code> | ||
+ | | [[ID]] | ||
+ | | Interner Link, der bei einem Klick auf das Bild geöffnet werden soll | ||
+ | |- | ||
+ | | <code>sp_url</code> | ||
+ | | [[String]] | ||
+ | | Extene URL, die bei einem Klick auf das Bild geöffnet werden soll | ||
+ | |- | ||
+ | | <code>sp_download</code> | ||
+ | | [[ID]] | ||
+ | | Interner Link auf ein Medium, das bei einem Klick auf das Bild heruntergeladen werden soll | ||
+ | |} | ||
+ | |||
+ | ===PHP Datenstruktur=== | ||
+ | |||
+ | ====Model==== | ||
+ | [https://iesapi.sitepark.com/docs/php/sitekit-module/last/class-SP.SiteKit.Model.Content.Image.html SP\SiteKit\Model\Content\Image] | ||
− | |||
− | |||
− | |||
− | |||
− | |||
<noinclude> | <noinclude> | ||
[[Category:Abschnitte]] | [[Category:Abschnitte]] | ||
</noinclude> | </noinclude> |
Aktuelle Version vom 6. November 2015, 10:29 Uhr
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. |
sectionTypes.image.options.copyright
|
Object | Siehe Bilder im SiteKit#Copyright |
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
Name | Type | Beschreibung |
---|---|---|
sp_imageUpload
|
BinaryInformation | Hochgeladenes Bild |
sp_image
|
ID | Verknüpfung zu einem Bild |
sp_imageCopyright
|
String | Copyright für hochgeladenes Bild |
sp_imageText
|
Boolean | Alternativtext des Bildes (Überschreibt den Wert, wenn das Bild eine Verknüpfung ist) |
sp_imageLegend
|
String | Bildunterschrift |
sp_imageAlign
|
String | Anordnung des Bildes (left-small, right-small, full) |
sp_imageClick
|
String | Klickverhalten: Default = Vergrößerungsfuntion, link = Link, none = keine Aktion |
sp_linkType
|
String | Linktype, wenn Klickverhalten = link: Default = interner Link, external = externer Link, download = Download |
sp_linkNewWindow
|
Boolean | Gibt an, ob Link im neuen Fenster geöffnet werden soll |
sp_link
|
ID | Interner Link, der bei einem Klick auf das Bild geöffnet werden soll |
sp_url
|
String | Extene URL, die bei einem Klick auf das Bild geöffnet werden soll |
sp_download
|
ID | Interner Link auf ein Medium, das bei einem Klick auf das Bild heruntergeladen werden soll |