Copyright Angabe für Bilder umsetzen
Veröffentlichungsdatum: 11. Februar 2019
Änderungsdatum: 21. April 2024
Projektgrundlage: BASE
Mit dem Copyrightzeichen werden Bilder bezogen auf das Urheberrecht gekennzeichnet und symbolisieren dadurch, auf wen das Bild als geschützt gekennzeichnet wird.
Copyright-Angabe im Bild-Element
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.
Beispiel: Auszug aus elementPicture.scss zum aktivierten Copyrighthinweis in Bild-Variante 0
/*@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]*/ }
Beispiel: Auszug aus elementPicture.scss zum aktivierten Copyrighthinweis in Bild-Variante 72
/*@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; /* ... */ }
Anpassung der Schriftart und Schriftgröße
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.
Beispiel: Auszug aus elementPicture.scss zum aktivierten Copyrighthinweis mit Schriftgrößen-Angabe in Bild-Variante 0
/*@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.
Copyright-Angabe nur in Bildunterschrift
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:
Beispiel: Auszug aus einer CSS-Only-Variante
/*@wCssFragment{class:elementPictureTitle;variant:72;caption:Mit Copyright nur als Layer auf dem Bild;caption-en:With copyright only on picture;livepreview:yes}*/ .elementPictureTitle_var72 { -w-addCopyright:onlyInCaption; -w-displayCopyrightInCaption:yes; /* ... */ }
Diese Möglichkeit ist übrigens in der BASE bereits über die CSS-Only-Variante "Mit Copyright nur als Layer auf dem Bild" (var72) verfügbar (siehe vorheriges Beispiel).
Copyright-Angabe in Listen
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.
Beispiel: Auszug aus listDefault.scss zum aktivierten Copyright-Hinweis in Thumbnail-Variante 17
/*@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 */ /* ... */ }
Beispiel: Auszug aus listBannerSlider.scss zum aktivierten Copyright-Hinweis in Banner-Variante 0
/*@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 */ /* ... */ }
Beispiel: Auszug aus listPictureGallery.scss zum aktivierten Copyright-Hinweis in Bildergalerie-Variante 2
/*@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.
Copyright-Angabe für Banner-Bilder
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).
Beispiel: Auszug aus der listBannerSlider.scss zur allgemeinen Copyright-Angabe per Text-Layer (z.B. für Hintergrundbilder, Bannervariante 100 (Vollbild))
/* 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; /* ... */ }
Copyright-Angabe für Hintergrundbilder im Inhaltsbereich
Das aktuelle Inhaltsbereich Weblic® erlaubt das Setzen einer Copyright-Angabe über die allgemeinen Einstellungen. Aktivieren Sie dazu die nachfolgend genannte Option.
Copyright im Bild
Beispiel: Auszug aus der elementSection.scss zur allgemeinen Copyright-Angabe für Hintergrundbilder
/*@wCssFragment{class:elementSection;caption:Allgemein;selectable:no}*/ .elementSection { /* ... */ -w-option-backgroundimageAddCopyright:yes; /* Copyright im Hintergrundbild ausgeben [no(Nein)|yes(Ja)]*/ -w-option-backgroundimageCopyrightPrefix:'©'; /* Copyright Prefix */ /* ... */ }
Ein Hintergrundbild wird dann mit der Copyright-Angabe versehen, welches das Bild in der Dokumentenerweiterung angegeben hat.
Bedenken Sie beim Einsatz eines Copyright im Hintergrundbild, daß die Copyright-Angabe ggf. nicht direkt ersichtlich ist, weil vom Hintergrundbild abhängig von der Bildschirmbreite die Randbereiche des Bildes für den Seitenbesucher nicht ersichtlich sind.
Copyright als Layer
Beispiel: Auszug aus der elementSection.scss zur allgemeinen Copyright-Angabe für Hintergrundbilder
/*@wCssFragment{class:elementSection;caption:Allgemein;selectable:no}*/ .elementSection { /* ... */ -w-option-backgroundimageAddCopyrightAsLayer:yes; /* Copyright-Informationen von Hintergrundbildern als Layer einblenden [no(Nein)|yes(Ja)]*/ -w-option-backgroundimageCopyrightPrefix:'©'; /* Copyright Prefix */ /* ... */ }
Zum Hintergrundbild wird die Copyright-Angabe als Layer über das Bild gelegt. Die Copyright-Information kommt aus der Dokumentenerweiterung des Bildes.
(verfügbar ab aktuellem Weblic® unter CMS 18.x)
Formatiert wird der Layer über die Klasse .copyrightLayer (siehe aktuelle Auslieferung der SCSS).