Navigation

Copyright Angabe für Bilder umsetzen

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.

Copyright-Angabe im Bild-Element
Anpassung der Schriftart und Schriftgröße
Copyright-Angabe nur in Bildunterschrift
Copyright-Angabe in Listen
Copyright-Angabe für Banner-Bilder

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]*/
}

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 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


/* ... */
  -w-addCopyright:onlyInCaption;  
  -w-displayCopyrightInCaption:yes;
/* ... */

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 */

  /* ... */
}

/*@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;

  /* ... */

}