Copyright Angabe für Bilder umsetzen

Veröffentlichungsdatum: 11. Februar 2019
Änderungsdatum: 14. Juni 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.

Bild mit Copyright-Hinweis im Bild
Bild mit Copyright-Hinweis im Bild

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]*/
}
Bild mit Copyright-Hinweis auf dem Bild (CSS)
Bild mit Copyright-Hinweis auf dem Bild (CSS)

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, Schriftgröße und Positionierung

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.

Ab CMS-Version 18 und aktuellem Bild Weblic® kann zudem die Schriftgröße auch für HD-Bilder speziell angegeben werden. Zudem kann zusätzlich zur Positionierung ein Abstand (padding) für den im Bild generierten Copyright-Text definiert werden (nur über ImageMagick nutzbar). Die beiden kommagetrennten Werte zu -w-copyrightPadding und -w-copyrightPaddingHD beziehen sich der Reihenfolge nach auf den Abstand rechts und unten.

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 */
  -w-copyrightFontSizeHD:24; /* Copyright Schriftgröße für HD-Bilder */
  -w-copyrightPadding:; /* Copyright Abstände (z.B.: 24,12)*/
  -w-copyrightPaddingHD:; /* Copyright Abstände für HD-Bilder (z.B.: 48,24)*/
}

Als Standardschriftart wird die auf dem Server hinterlegte Schriftart verwendet. Wenn diese den individuellen Gestaltungsanforderungen nicht entspricht oder nicht verfügbar ist, kann eine benutzerdefinierte Schriftart verwendet werden. Legen Sie dazu eine Schrift-Datei (.ttf) unter folgendem Dateipfad ab, um sie für die Bildgenerierung mit ImageMagick oder PHP GD zu verwenden: 
/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 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

Die Copyright-Angabe für Banner-Bilder kann ebenso über CSS-Only vorgenommen werden (siehe nachfogendes Beispiel).

Ab CMS-Version 18 und aktuellem Banner Weblic® kann zudem die Schriftgröße auch für HD-Bilder speziell angegeben werden. Zudem kann zusätzlich zur Positionierung ein Abstand (padding) für den im Bild generierten Copyright-Text definiert werden (nur über ImageMagick nutzbar). Die beiden kommagetrennten Werte zu -w-option-picture-copyrightPadding und -w-option-picture-copyrightPaddingHD beziehen sich der Reihenfolge nach auf den Abstand rechts und unten.


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-copyrightShadowColor:; /* Copyright Schatten Farbe */    
  -w-option-picture-copyrightFontSize:12; /* Copyright Schriftgröße */    
  -w-option-picture-copyrightFontSizeHD:24; /* Copyright Schriftgröße für HD-Bilder */    
  -w-option-picture-copyrightPadding:; /* Copyright Abstände (z.B.: 24,12)*/
  -w-option-picture-copyrightPaddingHD:; /* Copyright Abstände für HD-Bilder (z.B.: 48,24)*/    
  -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 */

  /* ... */
}

Banner mit Hintergrundbild

Zusätzlich zur o.g. Umsetzung können Sie auch zum Hintergrundbild 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).

Copyright-Angabe für Objekt-Wizard Listen

Ab CMS-Version 18 und aktuellem Objektverwaltung Weblic® kann nun die Schriftgröße für normal- und HD-Bilder speziell angegeben werden. Weiterhin kann zusätzlich ein Abstand (padding) für den im Bild generierten Copyright-Text definiert werden (nur über ImageMagick nutzbar). Die beiden kommagetrennten Werte zu den copyrightPadding und copyrightPaddingHD Fragmenten beziehen sich der Reihenfolge nach auf den Abstand rechts und unten.

Auszug aus dem XML einer Objektmaske zu einem Vorschaubild der Listenansicht

   <wd:fragment id="copyrightFontSize" type="char.default">12</wd:fragment>
   <wd:fragment id="copyrightFontSizeHD" type="char.default">24</wd:fragment>
   <wd:fragment id="copyrightPadding" type="char.default">24,12</wd:fragment>
   <wd:fragment id="copyrightPaddingHD" type="char.default">48,24</wd:fragment>