Das Medien-Modul
- Bildoptimierung
- Zusammen mit dem Programm Mediapool
- Erklärung der Funktionen
- Bildausschnitt definieren
- Bildauflösungscheck
- Bildquelle austauschen
- Flussrichtung
- Maximale Breite
- Deckkraft
- Anpassung an Eltern-Layoutbereich = Bilder bündig ausrichten
- Bild verlinken
- Gewünschter Dateiname, Title-Tag, Alt-Tag (wichtig für die Suchmaschine)
- Dateiname
- Title-Tag
- Alt-Tag (wichtig)
- Bildunterschrift (optional)
- ID-Name
- CSS-Klassen
- Bildzoom
- Lazyload
- Abstände
Mit dem Modul Medien können Bilder entweder direkt aus dem Mediapool ausgewählt oder per Drag & Drop auf die Seite gezogen werden.
Bildoptimierung
Auch wenn unser IndiceCMS eine automatische Bildoptimierung auf Ihrer Webseite vornimmt, empfehlen wir Ihnen, keine Dateien hochzuladen, die größer als 2 MB sind. Minimieren Sie diese besser vor dem Hochladen herunter. Suchen Sie hierfür in Ihrer Suchmaschine nach "Bilder verkleinern online".
Das Zusammenspiel von Modul Medien und Mediapool
Der Mediapool ist die zentrale Sammelstelle für alle Bilder, Videos und PDFs Ihrer Website. Er dient ausschließlich der Verwaltung Ihrer Mediendateien.
Um ein Medium auf eine Seite einzufügen, ziehen Sie das Modul „Medien“ an die gewünschte Position. Daraufhin öffnet sich automatisch der Mediapool mit allen bereits hochgeladenen Dateien. Wählen Sie das gewünschte Medium per Klick aus.
Möchten Sie eine neue Datei einfügen, wählen Sie „Neue Datei einfügen“. Sie gelangen in die Dateistruktur Ihres Computers (Explorer/Finder) und können dort die gewünschte Datei auswählen und hochladen.
Alternativ lassen sich Medien auch per Drag & Drop direkt auf die Seite ziehen. In diesem Fall öffnet sich automatisch das Fenster „Medien bearbeiten“.
Um ein Medium auf eine Seite einzufügen, ziehen Sie das Modul „Medien“ an die gewünschte Position. Daraufhin öffnet sich automatisch der Mediapool mit allen bereits hochgeladenen Dateien. Wählen Sie das gewünschte Medium per Klick aus.
Möchten Sie eine neue Datei einfügen, wählen Sie „Neue Datei einfügen“. Sie gelangen in die Dateistruktur Ihres Computers (Explorer/Finder) und können dort die gewünschte Datei auswählen und hochladen.
Alternativ lassen sich Medien auch per Drag & Drop direkt auf die Seite ziehen. In diesem Fall öffnet sich automatisch das Fenster „Medien bearbeiten“.
Erklärung der Funktionen
Bildausschnitt definieren
Ziehen Sie mit der Maus über das Bild, um den gewünschten Ausschnitt frei festzulegen. Alternativ können Sie vorab ein festes Seitenverhältnis (z. B. 21:9, 16:9, 4:3, 3:4, 1:1) auswählen und anschließend den Ausschnitt positionieren.
Das Bild kann bei Bedarf horizontal oder vertikal gespiegelt sowie gedreht werden.
Das Bild kann bei Bedarf horizontal oder vertikal gespiegelt sowie gedreht werden.
Bildbreite
Hier legen Sie fest, ob das Bild im Layoutbereich über die gesamte Breite (z. B. 100 %) angezeigt wird oder schmaler bleibt.
Bildauflösungscheck
Der Bildauflösungscheck zeigt an, ob das verwendete Bild für verschiedene Bildschirmauflösungen ausreichend groß ist. Grüne Markierungen bedeuten, dass die Auflösung geeignet ist, rote Markierungen weisen auf eine zu geringe Bildgröße hin.
Bildquelle austauschen
Über „Bild ändern“ kann das aktuelle Bild mit einem Bild aus dem Mediapool ersetzt werden.
Flussrichtung
Bestimmt, ob Text das Bild links, rechts oder zentriert umfließen soll.
Hinweis: Bei Textumfluss kann es zu Darstellungsproblemen kommen.
Fügen Sie nach umflossenen Bildern immer einen Absatz (Modul „Absatz“) ein.
Hinweis: Bei Textumfluss kann es zu Darstellungsproblemen kommen.
Fügen Sie nach umflossenen Bildern immer einen Absatz (Modul „Absatz“) ein.
Maximale Breite
Optional kann eine maximale Breite in px, em, rem, vh, vw, vmin, vmax, dvh und % definiert werden. Diese Funktion ist besonders bei Icons oder Logos sinnvoll, damit diese nicht zu groß dargestellt werden.
Deckkraft
Regelt die Transparenz des Bildes in Prozent. (100 % = vollständig sichtbar).
Anpassung an Eltern-Layoutbereich = Bilder bündig ausrichten
Wenn Sie Bilder nebeneinander in Spalten anordnen möchten, sollten diese möglichst in gleicher Größe dargestellt werden. Beim normalen Einfügen funktioniert dies nur, wenn alle Bilder im identischen Format vorliegen. Mit IndiceCMS ist eine bündige Darstellung jedoch auch bei unterschiedlich großen Bildern möglich:
So gehen Sie vor:
Aktivieren Sie bei jedem Bild „Anpassung an Eltern-Layoutbereich“. Ein graues Symbol am Bild zeigt an, dass es skaliert wird.
Stellen Sie im Layoutbereich unter „Spalten, Layout & Abstände“ bei „Höhe des Layoutbereiches“ die Option „Anpassung an die Eltern-Spalte“ ein.
Ergebnis:
Die Bilder werden trotz unterschiedlicher Größen bündig und gleichmäßig dargestellt.
Aktivieren Sie bei jedem Bild „Anpassung an Eltern-Layoutbereich“. Ein graues Symbol am Bild zeigt an, dass es skaliert wird.
Stellen Sie im Layoutbereich unter „Spalten, Layout & Abstände“ bei „Höhe des Layoutbereiches“ die Option „Anpassung an die Eltern-Spalte“ ein.
Ergebnis:
Die Bilder werden trotz unterschiedlicher Größen bündig und gleichmäßig dargestellt.
Medien bearbeiten
Layoutbereich Höhe
Bild verlinken
Hier kann eine URL hinterlegt werden, auf die das Bild verlinkt. Optional kann festgelegt werden, dass der Link in einem neuen Tab geöffnet wird.
Gewünschter Dateiname, Title-Tag, Alt-Tag (wichtig für die Suchmaschine)
Auch Bilder werden über die Suchmaschinen gefunden. Daher macht die Suchmaschinenoptimierung auch bei Bildern Sinn. Der Dateiname sollte daher möglichst sprechend gewählt sein. Der Alt-Tag sowie der Title-Tag bestimmen massgeblich, wie gut ein Bild in der Bildersuche gerankt wird.
Dateiname
Der Dateiname sollte möglichst sprechend gewählt werden, da auch Bilder über Suchmaschinen gefunden werden.
Title-Tag
Der Title-Tag wird angezeigt, wenn der Mauszeiger über dem Bild steht. Er ist für die Suchmaschinenoptimierung wichtig, damit Google den Inhalt der Seite und des Bildes besser erfassen und genauer indexieren kann.
Alt-Tag (wichtig)
Der Alt-Tag (“Alternativer Tag”) beschreibt den Bildinhalt in kurzen Worten. Er wird angezeigt, wenn ein Bild nicht geladen werden kann. Er gehört zu den Meta-Angaben und ist für den User nicht sichtbar. Für die Suchmaschinen ist der Alt-Tag extrem wichtig, da er das Ranking bei der (Google) Bildersuche beeinflusst.Screenreader oder Voicebrowser können den Alt-Tag vorlesen. Damit ist der Alt-Tag wichtige Voraussetzung für eine barrierefreie Seite.
Bildunterschrift (optional)
Text, der unterhalb des Bildes angezeigt wird. Kann für erklärende Hinweise oder Quellenangaben genutzt werden.
ID-Name
Vergibt eine eindeutige ID für das Bild. Diese Einstellung ist nur für Entwickler/Programmierer relevant, z. B. für CSS- oder JavaScript-Anpassungen.
CSS-Klassen
Hier können vorhandene CSS-Klassen zur individuellen Gestaltung des Bildes zugewiesen werden.
Bildzoom
Wenn aktiviert, kann das Bild per Klick vergrößert angezeigt werden.
Lazyload
Legt fest, ob das Bild erst beim Scrollen geladen wird. Empfohlen für bessere Ladezeiten und Performance.
Abstände
Definiert den Abstand des Bildes zu anderen Elementen nach oben, unten, links und rechts. Die Angabe erfolgt in px, em, rem, vh, vw, vmin, vmax, dvh oder %.
Einfügen von PDF-Dateien
Auch PDF-Dateien können über das Modul Medien eingebunden werden. Ziehen Sie dazu das Modul an die gewünschte Stelle oder wählen Sie die PDF-Datei direkt aus dem Mediapool aus. Nach dem Hinzufügen stehen verschiedene Anzeige- und Ausgabeeinstellungen zur Verfügung.
PDF-Dateien können alternativ auch über das Modul Download bereitgestellt werden. Dieses eignet sich besonders für reine Downloadlisten ohne visuelle Darstellung.
PDF-Dateien können alternativ auch über das Modul Download bereitgestellt werden. Dieses eignet sich besonders für reine Downloadlisten ohne visuelle Darstellung.
PDF-Dateiname
Zeigt den ursprünglichen Dateinamen der PDF inklusive Dateiendung an.
Anzeigename (optional)
Optional kann ein alternativer Anzeigename für die Ausgabe hinterlegt werden. Dieser kann erklärender oder aussagekräftiger sein als der eigentliche Dateiname.
Beispiel:
Dateiname: Prospekt_Wrocklage-Portfolio.pdf
Anzeigename: „Voila – das sind wir: Wrocklage Werbewerkstatt"
Beispiel:
Dateiname: Prospekt_Wrocklage-Portfolio.pdf
Anzeigename: „Voila – das sind wir: Wrocklage Werbewerkstatt"
Anzeigeoptionen
Über das Dropdown-Menü legen Sie fest, wie die PDF-Datei ausgegeben wird:
- Die PDF-Datei wird zum Download angeboten
- Die PDF-Datei wird angezeigt
- Die PDF-Datei wird in einem neuen Fenster angezeigt
- Die PDF-Datei wird als Slider angezeigt
- Die PDF-Datei wird als Slider mit Thumbnails angezeigt
- Die PDF-Datei wird mit Cover angezeigt
Die PDF-Datei wird zum Download angeboten
PDF wird zum Download angeboten
Dateigröße, 6.770,74 kb
Dateigröße, 6.770,74 kb
Die PDF-Datei wird angezeigt
PDF wird angezeigt.pdf
Dateigröße, 6.770,74 kb
Dateigröße, 6.770,74 kb
Die PDF-Datei wird in einem neuen Fenster angezeigt
PDF wird angezeigt neues Fenster.pdf
Dateigröße, 6.770,74 kb
Dateigröße, 6.770,74 kb
Die PDF-Datei wird als Slider angezeigt
Die PDF-Datei als Slider mit Thumbnails
Die PDF-Datei wird mit Cover angezeigt
Dateigröße anzeigen
Optional kann die Dateigröße der PDF in der Ausgabe angezeigt werden.
Hinweis auf das Modul Download
Für eine umfangreichere Darstellung von PDF-Dateien (z. B. mit Vorschau, Beschreibung, Sortierung oder Zugriffsbeschränkungen) eignet sich in manchen Fällen das Modul Download besser. Dieses bietet zusätzliche Anzeige- und Verwaltungsoptionen.
| Typ | Datei | Inhalt | |
|---|---|---|---|
| Prospekt_Wrocklage-Portfolio.pdf (6771 KB) | Voila – das sind wir: Wrocklage Werbewerkstatt | Download |