Veröffentlichungsdatum: 11. Februar 2019
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
Mit dem Copyrightzeichen werden Bilder bezogen auf das Urheberrecht gekennzeichnet und symbolisieren dadurch, auf wen das Bild als geschützt gekennzeichnet wird.
Das Bild-Element liefert Ihnen hierzu komfortable Einstellungsmöglichkeiten im Standard.
Nachfolgend sehen Sie in der linken Spalte ein Bild mit Copyright-Angabe im Bild - beispielhaft mit Bild-Variante 0 umgesetzt. Das Copyright Prefix, die Schriftfarbe und auch die Position lassen sich im CSS (auch direkt in der Maske) anpassen. Ebenso kann ein Standard Copyright-Text hinterlegt werden, welcher verwendet wird, falls zu einem Bild direkt nichts definiert wurde.
In der rechten Spalte sehen Sie eine Umsetzung über Bild-Variante 72, welche per CSS ein Copyright-Hinweis über das Bild legt. Die Formatierung können Sie individuell anpassen und legen dabei vorzugsweise die Schrift über die Copyright-Angabe, welche direkt ins Bild integriert wird. So stellen Sie sicher, daß bei Direktanzeige bzw. Speichern des Bildes das Bild selber mit dem Hinweis versehen ist.
/*@wCssFragment{class:elementPicture;variant:0;caption:Standard;caption-en:Default;livepreview:yes}*/ .elementPicture_var0 { /* ... */ -w-addCopyright:yes; /* Copyright im Bild ausgeben [no(Nein)|yes(Ja)]*/ -w-copyrightTextDefault:''; /* Standard Copyright, falls nichts definiert wurde */ -w-copyrightPrefix:'©'; /* Copyright Prefix */ -w-copyrightColor:#FFFFFF; /* Copyright Farbe */ -w-copyrightPosition:; /* Copyright Position [|topLeft|top|topRight|bottomLeft|bottom|bottomRight]*/ }
/*@wCssFragment{class:elementPictureTitle;variant:72;caption:Mit Copyright auf dem Bild;caption-en:With copyright on picture;livepreview:yes}*/ .elementPictureTitle_var72 { -w-addCopyright:yes; -w-displayCopyrightInCaption:yes; /* ... */ }
Ab CMS-Version 016.003.018.000 kann mit dem aktuellen Bild Weblic® zusätzlich die Schriftart und Schriftgröße des Copyright-Textes beeinflusst werden. In der CSS-Only-Variante eines Bildes kann hierzu über die CSS-Only-Eigenschaft -w-copyrightFontSize die Schriftgröße angegeben werden (z.B. 12 für 12px), siehe nachfolgendes Beispiel.
/*@wCssFragment{class:elementPicture;variant:0;caption:Standard;caption-en:Default;livepreview:yes}*/ .elementPicture_var0 { /* ... */ -w-addCopyright:yes; /* Copyright im Bild ausgeben [no(Nein)|yes(Ja)]*/ -w-copyrightTextDefault:''; /* Standard Copyright, falls nichts definiert wurde */ -w-copyrightPrefix:'©'; /* Copyright Prefix */ -w-copyrightColor:#FFFFFF; /* Copyright Farbe */ -w-copyrightPosition:; /* Copyright Position [|topLeft|top|topRight|bottomLeft|bottom|bottomRight]*/ -w-copyrightFontSize:12; /* Copyright Schriftgröße */ }
Die Schriftart kann durch Ablegen einer Schrift-Datei (.ttf) mit folgendem Dateipfad für die Bildgenerierung über ImageMagick oder PHP GD beeinflusst werden:
/weblication/grid5/fonts/default_copyright.ttf
Zu beachten:
Die Größen sind nur ungefähr anpassbar, da Bilder durchaus auch kleiner angezeigt werden können, als sie sind.
Wenn die Copyright-Angabe nur in der Bildunterschrift, nicht aber im Bild selber gesetzt sein soll, definieren Sie das in der CSS-Only-Variante wie folgt:
/* ... */
-w-addCopyright:onlyInCaption;
-w-displayCopyrightInCaption:yes;
/* ... */
Auch in Listen können Sie zu Vorschaubildern oder zu Bildern einer Bildergalerie einen Copyright-Text setzen.
Dies definieren Sie über die entsprechende CSS-Only-Variante, wozu nachfolgend Beispiele aufgezeigt werden.
/*@wCssFragment{class:listDefaultThumbnail;variant:17;caption:Anzeigen groß;caption-en:Large;livepreview:yes}*/ .listDefaultThumbnail_var17 { /* ... */ -w-option-picture-addCopyright:yes; /* Copyright-Text ergänzen */ -w-option-picture-copyrightTextDefault:'Mustermann AG'; /* Standard Copyright-Text, falls nichts definiert wurde */ -w-option-picture-copyrightPrefix:'©'; /* Jedem Copyright-Text voranzustellender Text */ /* ... */ }
/*@wCssFragment{class:listBannerSlider;variant:0;caption:Banner standard;caption-en:Banner default}*/ .listBannerSlider_var0 { /* ... */ -w-option-picture-addCopyright:yes; /* Copyright-Text ergänzen */ -w-option-picture-copyrightColor:; /* Copyright Farbe */ -w-option-picture-copyrightPosition:; /* Copyright Position [|topLeft|top|topRight|bottomLeft|bottom|bottomRight]*/ -w-option-picture-copyrightTextDefault:''; /* Standard Copyright-Text, falls nichts definiert wurde */ -w-option-picture-copyrightPrefix:'©'; /* Jedem Copyright-Text voranzustellender Text */ /* ... */ }
/*@wCssFragment{class:listPictureGallery;variant:2;caption:Kachelansicht;caption-en:Dia view}*/ .listPictureGallery_var2 { /* ... */ -w-option-picture-addCopyright:yes; /* Copyright-Text ergänzen */ -w-option-picture-copyrightTextDefault:'Mustermann AG'; /* Standard Copyright-Text, falls nichts definiert wurde */ -w-option-picture-copyrightPrefix:'©'; /* Jedem Copyright-Text voranzustellender Text */ /* ... */ }
Wenn Sie direkt zu den Bildern jeweils einen Copyright-Text (über die Metadaten) gesetzt haben, können Sie auch auf den Standard Copyright-Text verzichten.
Zusätzlich zur o.g. Umsetzung für Banner-Listen können Sie auch zum Bild eines Banners einen Copyright-Text setzen. Hierzu ist ab CMS-Version 15 eine Listenerweiterung verfügbar, welche mit der allgemeinen CSS-Definition für listEntryCopyright einen Text-Layer setzt.
Als Beispiel ist die Banner-Variante 100 (Banner Vollbild) angeführt, bei welcher eine Copyright-Angabe im Bild ggf. nicht direkt ersichtlich ist, weil vom Hintergrundbild ggf. die Randbereiche des Bildes für den Seitenbesucher nicht ersichtlich sind.
Installieren Sie in solchen Fällen - wenn noch nicht vorhanden - die Listenerweiterung für Copyright-Text und aktivieren Sie diese dann über die -w-dispyElements Angabe in der CSS-Only-Variante des Banners (listEntryOuterExtensionCopyright=yes).
/* Banner / Slider */ /*@wCssFragment{class:listBannerSlider;caption:Banner allgemein;caption-en:Banner default}*/ .listBannerSlider { /* ... */ .listEntryCopyright { position:absolute; right:0; bottom:0; padding:0 0.3rem; font-size:$fontSizeAdditional; line-height:$lineHeightAdditional; color:$fontColorWeak; background:$baseColorWhite; } } /* ... */ /*@wCssFragment{class:listBannerSlider;variant:100;caption:Banner Vollbild;caption-en:Banner full page}*/ .listBannerSlider_var100 { /* ... */ -w-displayElements:editbuttons=yes,editbuttonsPreview=no,lightbox=yes,image=no,background=yes,entriesPreview=yes,imagePreview=no,infolayerPreview=no,listEntryOuterExtensionCopyright=yes; /* ... */ }