Bilder
Bilder sind eine einfache Methode, Ihren Web-Auftritt gestalterisch zu bereichern. Mit dem surfboard CMS können Sie einfach eine Bild-Datei von Ihrer Festplatte auswählen, hochladen und auf der Seite platzieren. Bitte achten Sie darauf, den geeigneten Datei-Typ zu verwenden, für Fotos üblicherweise JPG, für Grafiken und Symbole PNG. Andere Bild-Formate wie TIF oder BMP sind für die Darstellung im Browser nicht geeignet.
Bilder sind eine einfache Methode, Ihren Web-Auftritt gestalterisch zu bereichern.Die unsichtbaren Bild-Attribute "alt" (Alternativ-Text) und "title" (Bild-Titel) sowie sichtbare Bildunterschriften können unabhängig voneinander direkt im Editor angegeben werden.
Für die Positionierung und Gestaltung der Bildunterschrift stehen einfache Auswahlboxen zur Verfügung, es können aber auch alle im Style-Editor angelegten CSS-Stile angewendet werden.
Bitte hier klicken!Es kann zusätzlich ein zweites Bild für einen Mouseover-Effekt angegeben werden. Auf Klick kann auch noch ein weiteres Bild in einer Lightbox groß dargestellt werden.
Die Bild-Unterschrift kann eingeblendet ...
... oder animiert werden.
Diese Bild wurde später geladen (lazy loading) und hat einen Zoom-Effekt (zoom on hover)
Auch das Laden von Dateien im SVG-Format wird unterstützt. SVG-Dateien enthalten vektorbasierte Grafiken und bleiben daher beim Vergrößern scharf.
CSS Bilder-Stil | picturestyle
the CSS picture style to be used
Größen-Anpassung | size
select the size adaptation of the picture
responsive: the picture will be as wide as its container
:limit: the picture will be as it is, but not wider as its container
lazy loading? | lazyloading
check to activate lazy loading
if activated the picture will be loaded only when it is inside the visible part of the screen
Titel | pictitle
the title or description of the picture
the title will be used for the 'alt' and 'title'-attribute of the -tag
Bild | picture
the picture file to be shown
Bild (hover) | picturehover
the picture file to be shown on mouse-over
Markierung verhindern? | unselectable
check to make the picture unselectable
the picture will be shown as a background-image and can not be copied & pasted using keyboard shortcuts. keep in mind that is not copy-protection, the user can copy the file from his browser cache or using other browser tools.
Sprachfilter | languagefilter
select in which language the picture should be shown
if your picture is language-dependent, you can upload create multiple picture elements and set each to its language. if the language is set, the picture will not be shown when another language version of the page is shown.
Text | caption
the visible caption of the picture
the caption is the text to be shown with the picture (unline the invisible 'title' or 'alt' attribute).
Text (CSS-Klassen) | captionclass
the CSS textblock style to be used for the caption
Text (Position) | captionposition
select the position of the caption
Hover-Effekt | imagehover
select a hover effect out of the imagehover.io library
zoom on hover? | zoomonhover
check to activate a zoom effect on mouse over
Überblendung | blend
select the CSS blend mode to create blend or mix effects