Abschnitt: Bild: Unterschied zwischen den Versionen

Aus SiteparkWiki
Zur Navigation springen Zur Suche springen
(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]
  
===PHP Datenstruktur===
 
Der Text-Abschnitt benutzt folgende Models:
 
<source lang="xml">
 
SP\SiteKit\Model\Content\Text
 
</source>
 
 
<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

PHP Datenstruktur

Model

SP\SiteKit\Model\Content\Image