SharePoint Online: Mit JSON vom Link zur Grafik
SharePoint-Listen sind ein vielseitiges Werkzeug in Microsoft 365. Mit JSON Column Formatting kannst du das Erscheinungsbild von Spalten anpassen – zum Beispiel Links zu Bildern automatisch als Vorschaubilder darstellen. In diesem Artikel zeigen wir dir, wie du mit einfachem JSON-Code aus einem Link eine Grafik-Vorschau in deiner SharePoint-Liste machst.
Wann ist das nützlich?
Diese Technik ist besonders hilfreich, wenn du eine SharePoint-Liste als Bilddatenbank, Produktkatalog oder Mitarbeiterverzeichnis nutzt. Statt nur einen URL-Link zu sehen, wird die Grafik direkt in der Listenansicht angezeigt. Das verbessert die Übersichtlichkeit und spart Klicks.
Voraussetzungen
Du benötigst eine SharePoint Online-Liste mit einer Spalte vom Typ Einzelne Textzeile oder Hyperlink, die den vollständigen URL zum Bild enthält. Die Bilder müssen öffentlich erreichbar sein oder sich im gleichen SharePoint-Tenant befinden.
JSON-Formatierung anwenden
Klicke in deiner SharePoint-Liste auf den Spaltenkopf der Bild-URL-Spalte und wähle Spalteneinstellungen → Diese Spalte formatieren. Wechsle in den Erweiterten Modus und füge folgenden JSON-Code ein:
Der JSON-Code erstellt ein img-Element, das den Wert der Spalte als src-Attribut nutzt. Du kannst die Höhe und Breite des Bildes über die style-Attribute im JSON anpassen. Typische Werte sind 120px Breite für Thumbnails oder 200px für größere Vorschauen.
Erweiterte Formatierung
Du kannst die Bildvorschau weiter anpassen: einen Hover-Effekt hinzufügen, der das Bild vergrößert, einen Fallback-Text anzeigen, wenn kein Bild vorhanden ist, oder das Bild anklickbar machen, sodass es in einem neuen Tab in voller Größe geöffnet wird.
Tipps für die Praxis
Achte darauf, dass die Bild-URLs korrekt formatiert sind und auf gültige Bilddateien verweisen (JPG, PNG, GIF, SVG). Nutze für interne Bilder den vollständigen SharePoint-URL inklusive Tenant-Domain. Teste die Formatierung mit verschiedenen Bildgrößen, um die optimale Darstellung zu finden. Bei Problemen prüfe, ob die Bilder die richtigen Berechtigungen haben.
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.