Image
Mit dem Image-Modul kannst du Bilder flexibel und ansprechend in deinen Ninox-Layouts darstellen. Es ist Teil unserer Graphikmodule, die es dir ermöglichen, visuelle Elemente einfach und effektiv zu integrieren. Das Image-Modul kümmert sich nicht nur um die Anzeige des Bildes selbst, sondern auch um das Handling von Ladezuständen und Fehlern und ermöglicht die Kombination mit einem Label.
Funktion und Aussehen
Das Herzstück des Moduls ist das image-Objekt, in dem du die Bildquelle (value), CSS-Klassen (class), Inline-Styles (style) und weitere HTML-Attribute (htmlAttribute) definieren kannst. Während das Bild lädt, wird automatisch ein Spinner angezeigt. Sollte das Bild nicht geladen werden können, erscheint an seiner Stelle ein Fehler-Icon (das broken_image Material Symbol).
Zusätzlich kannst du ein label definieren, um dem Bild eine Beschriftung hinzuzufügen. Die Position des Labels lässt sich über den orientation-Key steuern (top, bottom, left, right). Sowohl das Bild als auch das Label und der umgebende Container können mit den class- und style-Keys individuell gestaltet werden.
Achtung
Die Bildquelle (value) sollte keine interne URL sein (wie fileURL()), da diese speziell auf mobilen Geräten zu Problemen führen (seit Ninox v3.16.0). Sinnvoller sind Share-URL (shareFile()) und Base64-URL (loadFileAsBase64URL()).
Nutzer-Interaktion
Auch bei der Gestaltung der Nutzer-Interaktion mit dem Modul lassen wir dir alle Freiheiten. Dem Image-Modul kannst du eine beliebige Anzahl an actions zuweisen. Jede Action besteht aus einem auslösenden trigger und einem Array von scripts, die bei Auslösen des Triggers ausgeführt werden. Als Trigger können Klick, Mausbewegung und alle weiteren HTML Mouse Events eingesetzt werden. Weitere Infos zu Actions findest du in diesem Teil unserer Doku.
Modulcode
json
GIP_image({
uniqueId: "myUniqueName" + Nr,
embedded: true,
image: {
value: *any*,
},
})json
GIP_image({
uniqueId: "myUniqueName" + Nr,
embedded: true,
style: "",
image: {
style: "",
value: *any*,
},
})json
GIP_image({
uniqueId: "myUniqueName" + Nr,
embedded: true,
class: "",
style: "",
image: {
class: "",
style: "",
value: *any*,
},
placeholder: {
style: "",
value: *any*,
},
actions: [{
trigger: "click",
scripts: [{
type: "",
}],
}],
})json
GIP_image({
uniqueId: "",
embedded: {
height: "",
styleHtml: "",
styleStri: "",
presets: "",
},
class: "",
style: "",
image: {
class: "",
style: "",
value: *any*,
htmlAttribute: "",
},
placeholder: {
style: "",
value: *any*,
},
label: {
class: "",
style: "",
value: *any*,
orientation: "",
},
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
})json
html( raw(GIP_master({})) +
raw(GIP_image({
uniqueId: "",
embedded: {
height: "",
styleHtml: "",
styleStri: "",
presets: "",
},
class: "",
style: "",
image: {
class: "",
style: "",
value: *any*,
htmlAttribute: "",
},
placeholder: {
style: "",
value: *any*,
},
label: {
class: "",
style: "",
value: *any*,
orientation: "",
},
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
})
))Key-Table
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Beispiele
Image: Bild mit Überschrift
Beschreibung
Wir möchten ein Bild mit einer Überschrift darüber anzeigen. Das Bild soll eine feste Breite haben.
Zuerst definieren wir das image-Objekt mit der URL und einem style, um die Breite zu begrenzen. Dann fügen wir ein label hinzu und setzen den Text (value). Die orientation ist standardmäßig 'top', also müssen wir sie nicht explizit setzen.
Image by: Amber Kipp via Unsplash
Code des Beispiels
json
html(raw(GIP_master({})) +
raw(GIP_image({
uniqueId: "Beispielbild" + Nr,
embedded: false,
image: {
value: "https://images.unsplash.com/photo-1573865526739-10659fec78a5",
style: "width: 300px;"
},
label: {
value: "Eine orange Katze",
style: "font-size: 1.2em; font-weight: bold; padding-bottom: 10px;"
}
})))json
GIP_image({
uniqueId: "Beispielbild" + Nr,
embedded: true,
image: {
value: "https://images.unsplash.com/photo-1573865526739-10659fec78a5",
style: "width: 300px;"
},
label: {
value: "Eine orange Katze",
style: "font-size: 1.2em; font-weight: bold; padding-bottom: 10px;"
}
})Card: Steckbrief mit Bild
Beschreibung
Wir möchten eine Card designen, um darin verschiedene Informationen strukturiert und ansprechend darzustellen. In diesem Beispiel sind dies Informationen zu einem Kater aus einem Tierheim. In den Blocks der Card übergeben wir verschiedene Texte und auch ein Image-Modul, um ein Bild des Katers darzustellen.
Image by: Amber Kipp via Unsplash
Code des Beispiels
json
html(raw(GIP_master({})) +
raw(GIP_card({
uniqueId: "VermittlungskarteMitBild" + Nr,
embedded: false,
direction: "vertical",
class: "",
style: "background-color: #FFFCFA; border-color: #e5e2e0; padding: 25px; border-radius: 12px; color: #343a40; gap: 2px;",
blocks: [{
class: "",
style: "font-size: 2.5em; font-weight: bold; color: #e67e22; justify-content: start;",
value: "Simba"
}, {
class: "",
style: "margin-top: 20px;",
value: GIP_image({
uniqueId: "Simba" + Nr,
embedded: true,
image: {
value: "https://images.unsplash.com/photo-1573865526739-10659fec78a5",
style: "width: 100%;"
}
})
}, {
class: "",
style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
value: "— Steckbrief —"
}, {
class: "",
style: "justify-content: start;",
value: "Fellfarbe: Rot, Getigert"
}, {
class: "",
style: "justify-content: start;",
value: "Alter: 4 Jahre"
}, {
class: "",
style: "justify-content: start;",
value: "Lieblingsspielzeug: Federangel"
}, {
class: "",
style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
value: "— Mehr über Simba —"
}, {
class: "",
style: "line-height: 1.6; text-align: justify;",
value: "Unser Simba ist ein verschmuster und verspielter Kater, der die Welt mit neugierigen Augen erkundet. Er liebt gemütliche Nachmittage auf dem Sofa genauso wie ausgiebige Jagdspiele. Simba sucht ein liebevolles Zuhause, in dem er für immer ankommen darf."
}]
})))json
GIP_card({
uniqueId: "VermittlungskarteMitBild" + Nr,
embedded: true,
direction: "vertical",
class: "",
style: "background-color: #FFFCFA; border-color: #e5e2e0; padding: 25px; border-radius: 12px; color: #343a40; gap: 2px;",
blocks: [{
class: "",
style: "font-size: 2.5em; font-weight: bold; color: #e67e22; justify-content: start;",
value: "Simba"
}, {
class: "",
style: "margin-top: 20px;",
value: GIP_image({
uniqueId: "Simba" + Nr,
embedded: true,
image: {
value: "https://images.unsplash.com/photo-1573865526739-10659fec78a5",
style: "width: 100%;"
}
})
}, {
class: "",
style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
value: "— Steckbrief —"
}, {
class: "",
style: "justify-content: start;",
value: "Fellfarbe: Rot, Getigert"
}, {
class: "",
style: "justify-content: start;",
value: "Alter: 4 Jahre"
}, {
class: "",
style: "justify-content: start;",
value: "Lieblingsspielzeug: Federangel"
}, {
class: "",
style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
value: "— Mehr über Simba —"
}, {
class: "",
style: "line-height: 1.6; text-align: justify;",
value: "Unser Simba ist ein verschmuster und verspielter Kater, der die Welt mit neugierigen Augen erkundet. Er liebt gemütliche Nachmittage auf dem Sofa genauso wie ausgiebige Jagdspiele. Simba sucht ein liebevolles Zuhause, in dem er für immer ankommen darf."
}]
})