Abschnitt: Bild - Versionsgeschichte

Veltrup: /* IES Optionen */

2015-11-06T09:29:44Z

IES Optionen

Veltrup: /* IES Optionen */

2015-11-06T09:29:27Z

IES Optionen

Veltrup: /* IES Optionen */

2015-11-06T09:27:50Z

IES Optionen

Veltrup: /* IES Datenstruktur */

2015-11-03T14:01:14Z

IES Datenstruktur

Veltrup: /* IES Datenstruktur */

2015-11-03T13:54:50Z

IES Datenstruktur

Veltrup: /* PHP Datenstruktur */

2015-10-21T09:36:21Z

PHP Datenstruktur

Knak: /* PHP Datenstruktur */

2015-07-17T15:17:02Z

PHP Datenstruktur

Knak: /* PHP Datenstruktur */

2015-07-17T15:16:53Z

PHP Datenstruktur

Knak: 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 …“

2015-07-17T15:07:58Z

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

Neue Seite

==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===
{| class="prettytable"
|- class="hintergrundfarbe1"
! Name || Type || Beschreibung
|-
| <code>sectionTypes.image.options.alignments</code>
| [[Array]]
| Beinhaltet die Konfigurationen für die Anordnung des Bildes.
|-
| <code>sectionTypes.image.options.picture</code>
| [[Array]]
| Beinhaltet die Konfigurationen für die Skalierung des Bildes.
|}
====Anordnung====
<source lang="javascript">
"alignments" : [
{
"label" : "links", // Label für die Redaktionelleoberfläche
"value" : "left" // CSS-Klasse des Bildes (ohne "SP-figure-")
}
]
</source>
====Skalierung====
<source lang="javascript">
"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)
}
</source>
====Beispiel====
<source lang="javascript">
{
"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" : ""
}
}
},
...
}
}
</source>

===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:
<source lang="xml">
SP\SiteKit\Model\Content\Text
</source>
<noinclude>
[[Category:Abschnitte]]
</noinclude>

@@ Zeile 24: / Zeile 24: @@
 | <code>sectionTypes.image.options.copyright</code>
 | [[Object]]
-| Siehe [[Bilder_im_SiteKit#Copyright]]
+| Siehe [[Bilder im SiteKit#Copyright]]
 |}
 ====Anordnung====

@@ Zeile 24: / Zeile 24: @@
 | <code>sectionTypes.image.options.copyright</code>
 | [[Object]]
-| Siehe [[Bilder im SiteKit]]
+| Siehe [[Bilder_im_SiteKit#Copyright]]
 |}
 ====Anordnung====

@@ Zeile 182: / Zeile 182: @@
 | [[String]]
 | Linktype, wenn Klickverhalten = link: Default = interner Link, external = externer Link, download = Download
 |-
 | <code>sp_linkNewWindow</code>

@@ Zeile 21: / Zeile 21: @@
 | [[Array]]
 | Beinhaltet die Konfigurationen für die Skalierung des Bildes.
 |}
 ====Anordnung====

@@ Zeile 147: / Zeile 147: @@
 ==Datenstruktur==
 ===IES Datenstruktur===
+{| class="prettytable"
 ===PHP Datenstruktur===

@@ Zeile 150: / Zeile 150: @@
 ===PHP Datenstruktur===
-Der Bild-Abschnitt benutzt folgende Models:
-<source lang="xml">
+====Model====
-SP\SiteKit\Model\Content\Image
-SP\SiteKit\Model\Content\Image\Item
+[https://iesapi.sitepark.com/docs/php/sitekit-module/last/class-SP.SiteKit.Model.Content.Image.html SP\SiteKit\Model\Content\Image]
-</source>
 <noinclude>
 [[Category:Abschnitte]]
 </noinclude>