Wasserzeichen / Copyright in Bilder setzen

Weblication® liefert Ihnen Werkzeuge dafür, um Bilder mit einem Wasserzeichen-Effekt bzw. Copyright-Hinweis zu versehen.

Weblication® liefert Ihnen Werkzeuge dafür, um Bilder mit einem Wasserzeichen-Effekt bzw. Copyright-Hinweis zu versehen.

Es gibt unterschiedliche Wege und Mittel, um Bilder entsprechend zu manipulieren und mit einem Wasserzeichen-Effekt oder mit einem Copyright-Vermerk zu versehen. Nachfolgend finden Sie entsprechende Möglichkeiten aufgelistet.

1. Über ein Verzeichnisereignis beim Hochladen von Bildern

Um ein Copyright-Hinweis bereits in die Bilder einzufügen, die auf den Server hochgeladen werden, bieten sich die Verzeichnisereignisse an. Beim Hochladen von Bildern greifen Sie hierfür auf das onAfterUpload-Ereignis zurück, das Sie über die Verzeichniseinstellungen erreichen.

Das nachfolgende Beispiel setzt auf ImageMagick auf, welches ab Weblication® CMS-Version 9.x über die Systemeinstellungen aktiviert werden kann, wenn dies vom Webserver unterstützt wird. Stellen Sie daher zuvor sicher, daß Sie über die Funktionen von ImageMagick verfügen können.

Wenn Sie den nachfolgenden PHP-Code im Verzeichnisereignis onAfterUpload eines Verzeichnisses (z.B. /baseAssets/img/watermark) setzen, erfolgen zu Bildern beim Hochladen folgende Aktionen:

  1. Dateiname wird in zufälligen Dateinamen (Zeitstempel-Zufallsnummer.Bildendung) umbenannt
  2. In die Bild-Datei wird rechts unten ein Copyright-Hinweis mit dem Text "© Mustermann AG" gesetzt. Die Eigenschaften der Schrift, etc. werden über die Parameter-Angaben für ImageMagick definiert und sind individuell einstellbar.

Beachten Sie bitte die Hinweise am Artikelende!

Beispiel: Auszug aus dem Verzeichnisereignis zu onAfterUpload

/* Dateinamen in Zufallsnamen umwandeln */
$pathSource   $eventData['filePath'];
$fileNameDest time().'-'.rand();
wRepository::renameDocument($pathSource$fileNameDest.'.'.wPathName::getFileExtension($pathSource));
$path $eventData['dirPath']."/".$fileNameDest.".".wPathName::getFileExtension($pathSource);

/* Watermark/CopyrightText über imageMagick setzen: */
//$path = $eventData['filePath'];
$text "© Mustermann AG";

//Schrifteigenschaften
$fontfamily "Bookman-DemiItalic";
$fontsize    "12";

//Farbe Schatten 
$color '#666666';
$strokewidth '1';
$x '11';
$y '10';

//Farbe Schrift
$color_s '#FFFFCC';
$strokewidth_s '1';
$x_s '11';
$y_s '10';

$system '/usr/bin/convert convert "'.$_SERVER['DOCUMENT_ROOT'].$path.'" -font '.$fontfamily.' -pointsize '.$fontsize.' -draw "gravity SouthEast  fill \''.$color.'\'  text 11,12 \''.$text.'\'  fill \''.$color_s.'\'  text 10,11 \''.$text.'\'" "'.$_SERVER['DOCUMENT_ROOT'].$path.'"';
@
exec($system); 

return 
wPathName::removeDocumentRoot($path);

2. Über das Bild-Element mit Standardmitteln

Projekt-Basis BASE Classic

Sie können bereits mit Bordmitteln von Weblication® einen Copyright-Hinweis in zu generierende Bilder setzen. Das aktuelle Weblic® "Bild" unterstützt dies in aktueller Version bereits im Standard.

Die BASE Classic liefert Ihnen hierzu bereits im Standard das Bild-Element als Weblic® schon entsprechend vorbereitet aus. In der design.css sind die Einträge hierzu bereits gesetzt, nur im Standard erstmal deaktiviert (-w-editmaskExtended-copyrighttext:no;-w-addCopyright:no). Diese CSS-Only-Werte setzen Sie jeweils auf yes, damit das Eingabefeld für den Copyright Text ersichtlich ist und ein gesetzter Text auch beim Generieren des Bildes in das Bild geschrieben wird (siehe Quelltextbeispiel unten).

Bild-Element Bearbeitung mit Copyright-Text
Bild-Element Bearbeitung mit Copyright-Text
Generiertes Bild aus Bild-Element mit Copyright-Text
Generiertes Bild aus Bild-Element mit Copyright-Text

Beispiel: Auszug aus der design.css des Projektes

/*@wCssFragment{class:elementPicture;variant:0;caption:Standardarstellung;caption-en:Default}*/
.elementPicture_var0                {-w-editmaskExtended-copyrighttext:yes;-w-addCopyright:yes}

Beachten Sie bei dieser Umsetzung, daß das Originalbild nicht manipuliert wird, sondern nur das über das Bild-Element an entsprechender Stelle gesetzte und generierte Bild mit dem Copyright-Text versehen wird!

Beachten Sie zudem die Hinweise am Artikelende!

Projekt-Basis BASE (Mobile First)

Bei der BASE (Mobile First) verhält es sich ähnlich wie zuvor zur BASE Classic beschrieben. Allerdings haben Sie dort nochmals mehr Möglichkeiten der Einstellungen. So lässt sich z.B. auch die Position des Copyright-Textes etc. einstellen.

elementPicture.scss - Copyright-Einstellungen zu Variante 0
elementPicture.scss - Copyright-Einstellungen zu Variante 0

Die BASE (Mobile First) ermöglicht zudem den Einsatz von CSS-Only-Untervarianten des Bildes (z.B. elementPictureTitle_var72 ("Mit Copyright auf dem Bild")). Auf diese Weise können Sie den Copyright-Vermerk über CSS gestalterisch flexibel an Ihre Vorstellungen anpassen.
Diese Copyright-Angabe wird über das Bild gelegt und überdeckt einen ggf. direkt ins Bild generierten Vermerk.
Soll der Hinweis lediglich per CSS über das Bild gelegt werden, setzen Sie in der Variante die Angabe so:
-w-addCopyright:onlyInCaption;

3. Über das Bild-Element und Projekt-Funktionen

Projekt-Basis BASE Classic

Alternativ zum vorherigen Punkt 2. können Sie das Weblic® Bild-Element auch über Projekt-Funktionen für das Schreiben eines Copyright-Textes ins Bild erweitern. Über die design.css darf bzw. sollte in diesem Fall der Copyright-Text nicht hinzugefügt werden, da ansonsten der Copyright-Text zweimal in das Bild generiert wird.

Die aktuelle BASE Classic wird so ausgeliefert, daß über das Weblic® Bild-Element abgefragt wird, ob es eine Projekt-Funktion "wMyProject::adaptImageAfterCreated" gibt. Sofern diese in der wMyProject.php des Projektes vorhanden ist, wird die Rückgabe des Bildpfades aus dieser Funktion erwartet.

Ebenso wird die aktuelle BASE Classic bereits mit einer wMyProject.php Datei ausgeliefert, die beispielhaft die Funktion "wMyProject::adaptImageAfterCreated" schon gesetzt hat. Ggf. müssen Sie diese "aktiv" schalten, also den Unterstrich vor dem Funktionsnamen (_adaptImageAfterCreated) entfernen.
Wenn Sie diese nutzen wollen, müssen Sie lediglich die Variable $GDorIM mit dem gewünschten Wert befüllen (z.B. bei ImageMagick: "im") und die Variable $text mit Ihrem Copyright-Text befüllen (siehe Quelltextbeispiel unten). Dann wird ein über Bild-Element generiertes Bild mit den dort hinterlegten Funktionen und Parametern (zu GD bzw. ImageMagick) mit Copyright-Text gesetzt.

Die Eigenschaften der Schrift, etc. werden über die Parameter-Angaben für ImageMagick bzw. GD definiert und sind individuell einstellbar.

Generiertes Bild aus Bild-Element mit Copyright-Text über wMyProject-Funktion
Generiertes Bild aus Bild-Element mit Copyright-Text über wMyProject-Funktion

Auszug aus der /[IHR-GLOBALES-PROJEKT]/wGlobal/scripts/php/wMyProject.php

//*********************************************************************************/
/**
* @method String adaptImageAfterCreated(String $path)
*
* @description Callback Funktion, um ein Bild nachträglich anzupassen
*
* @param path Pfad des Bildes
*
* @param options Einstellungen bzw. Bilddaten
*
* @return String
*
*/
//*********************************************************************************/

public static function adaptImageAfterCreated($path$options){
  
//print "adaptImageAfterCreated($path);\n";
  //var_dump($options);

  //######################################################################################################
  //###                                                                                                ###
  //###  WICHTIG: $pathAdapted muss angepasst werden, da sonst das Originalbild überschrieben wird!!!  ###
  //###                                                                                                ###
  //######################################################################################################

  
$GDorIM "gd"// "gd" für Nutzung von GD und "im" für Nutzung von imageMagick
  
$text   "© ".$options['copyrightText']; // Text über Angabe im Bild-Element gesetzt
  //$text = "© Mustermann AG"; // Direktangabe, z.B.: "(c) Mustermann AG"

  
$pathAdapted preg_replace('/\.([^\.]+)$/''-a.$1'$path);

  
$textMarginRight  10;
  
$textMarginBottom 0;

  if(
$options['fontcolor'] == ''){
    
$fontcolorVal self::hex2rgba('#000000');
  }
  else {
    
$fontcolorVal self::hex2rgba($options['fontcolor']);
  }

  if(
$options['fontsize'] == ''){
    
$fontsize 10;
  }

  if(
is_file($_SERVER['DOCUMENT_ROOT'].$pathAdapted)){
    return 
$pathAdapted;
  }

  if(
is_file($_SERVER['DOCUMENT_ROOT'].$path) && $text != ''){

    
/* Manipulation über GD */
    
if($GDorIM == 'gd'){

      
$extension wPathName::getFileExtension($path);
      
$extension strtolower($extension);

      
//Erstellen eines IMG - Objektes ausgehend von einem bestehenden
      
if($extension == 'png'){
        
$image imagecreatefrompng($_SERVER['DOCUMENT_ROOT'].$path);
        
imageAlphaBlending($imagefalse);
        
imageSaveAlpha($imagetrue);
      }
      else if(
$extension == 'jpg' || $extension == 'jpeg'){
        
$image imagecreatefromjpeg($_SERVER['DOCUMENT_ROOT'].$path);
      }
      else if(
$extension == 'gif'){
        
$image imagecreatefromgif($_SERVER['DOCUMENT_ROOT'].$path);
      }

      
//Farben
      
$white        imagecolorallocatealpha($image255255255100);
      
$shadowcolor  imagecolorallocate($image255255255);
      
$fontcolor    imagecolorallocate($image$fontcolorVal[0], $fontcolorVal[1], $fontcolorVal[2]);

      
//Pfad zu der Font-Datei
      
$font $_SERVER['DOCUMENT_ROOT'].'/weblication/grid5/fonts/default.ttf';

      
//Zeichnen:
      
$x $options['pictureWidth']/2;
      
$y $options['pictureHeight']/2;

      
$dimensions imagettfbbox($fontsize0$font$text);
      
$textWidth  abs($dimensions[4] - $dimensions[0]);
      
$textHeight abs($dimensions[5] - $dimensions[1]);
      
$x          imagesx($image) - $textWidth $textMarginRight;
      
$y          imagesy($image) - $textHeight $textMarginBottom;

      
//Schatten (versetzt zu Text)
      
imagettftext($image$fontsize0$x$y$shadowcolor$font$text);

      
//Text
      
imagettftext($image$fontsize0$x-1$y$fontcolor$font$text);

      
//Erstelle Datei
      
imagepng($image$_SERVER['DOCUMENT_ROOT'].$pathAdapted);

      
//Löschen des img-Objektes
      
imagedestroy($image);

      
$path $pathAdapted;

      return 
$path;

    }
    
/* Manipulation über imageMagick */
    
else if($GDorIM == 'im'){

      
copy($_SERVER['DOCUMENT_ROOT'].$path$_SERVER['DOCUMENT_ROOT'].$pathAdapted);

      
$pathSource $path;
      
$pathDest   $pathAdapted;

      
//Schrifteigenschaften
      
$fontfamily $_SERVER['DOCUMENT_ROOT'].'/weblication/grid5/fonts/default.ttf';

      
//Farbe Schatten
      
$color '#666666';
      
$strokewidth '1';
      
$x '11';
      
$y '10';

      
//Farbe Schrift
      
$color_s '#FFFFCC';
      
$strokewidth_s '1';
      
$x_s '11';
      
$y_s '10';

      
$system '/usr/bin/convert convert "'.$_SERVER['DOCUMENT_ROOT'].$pathSource.'" -font '.$fontfamily.' -pointsize '.$fontsize.' -draw "gravity SouthEast  fill \''.$color.'\'  text 11,12 \''.$text.'\'  fill \''.$color_s.'\'  text 10,11 \''.$text.'\'" "'.$_SERVER['DOCUMENT_ROOT'].$pathDest.'"';
      @
exec($system);

      return 
wPathName::removeDocumentRoot($pathAdapted);

    }
    else{
      return 
$path;
    }
  }
  else{
    return 
$path;
  }

}
Beachten Sie bei dieser Umsetzung, daß das Originalbild nicht manipuliert wird, sondern nur das über das Bild-Element an entsprechender Stelle gesetzte und generierte Bild mit dem Copyright-Text versehen wird!
Beachten Sie zudem die Hinweise am Artikelende!

Projekt-Basis BASE (Mobile First)

In der BASE (Mobile First) wird aufgrund der schon im Standard gelieferten Funktionen die zuvor genannte Möglichkeit nicht mitgeliefert.

4. Über Bildergalerien

Projekt-Basis BASE Classic

Bildergalerien können Sie durch manuelle Anpassung des entsprechenden Templates (hier: gallery.wFilelist.php) mit der Möglichkeit eines Copyright-Textes erweitern.

Erweitern Sie hierzu den entsprechendenen wsl:thumbnail Aufruf durch das copyrightText-Attribut und den gewünschten Text (siehe Beispiel unten). Je nach gewählter Galerie-Variante sollten Sie berücksichtigen, daß nicht alle Bilder einer Variante (optimal) mit dem entsprechenden Copyright-Text versehen werden können!

Bildergalerie Variante 0 mit Copyright-Text für Großbild
Bildergalerie Variante 0 mit Copyright-Text für Großbild
...
<!-- Bild -->
<wsl:thumbnail class="listEntryImage" copyrightText="© Mustermann AG" src="{@path}" hd="{/wFilelist/wData/data[@name='createHD']/text()}" lazyLoad="{/wFilelist/wData/data[@name='lazyLoad']/text()}" width="{//data[@name = 'pictureWidth']/text()}" height="{//data[@name = 'pictureHeight']/text()}" quality="{php:functionString('wVariables::getValue', 'thumbnails_quality', '/baseGlobal', '')}" mode="{//data[@name = 'pictureMode']/text()}" backgroundColor="{//data[@name = 'pictureBackgroundColor']/text()}" alt="{php:functionString('htmlspecialchars', $listEntryTitle)}" title="{php:functionString('htmlspecialchars', $listEntryTitle)}"/>
...
Wenn Bilder im Original ausgegeben werden, greift dies nicht (z.B. Großbilder bei var2-Galerie (Fancybox)).
Beachten Sie zudem die Hinweise am Artikelende!

Projekt-Basis BASE (Mobile First)

In der BASE (Mobile First) können Sie zu jeder Bildergalerie-Variante über CSS-Only festlegen, ob ein Copyright-Text ausgegeben werden soll. Es muss hierzu nichts in den Templates erweitert werden.

5. Über Listen

Projekt-Basis BASE (Mobile First)

In der BASE (Mobile First) können Sie zu jeder Listen-Variante, welche eine Thumbnail-Untervariante für Vorschaubilder nutzt, über CSS-Only festlegen, ob ein Copyright-Text ausgegeben werden soll.
Aktivieren Sie dies einfach zur entsprechenden Thumbnail-Untervariante.

Hinweise und weitere Informationen

Die zuvor aufgelisteten Möglichkeiten zum Setzen eines Copyright-Textes in Bilder beziehen sich auf die Werkzeuge von Weblication®! Sofern Bilder unabhängig von Weblication® auf den Server gelangen (z.B. über FTP oder andere Skripte), müssen Sie selber für entsprechende Werkzeuge sorgen, die den gewünschten Copyright-Vermerk setzen!

Die Funktionen und Möglichkeiten der Bildmanipulation über das GD-Modul bzw. ImageMagick unterliegen nicht dem kostenlosen CMS-Suport. Hierfür können wir keine Gewährleistung und Support geben!

Bei Bild-Manipulationen über ausgelagerte Funktionen (z.B. Verzeichnisereignis bzw. wMyProjekt-Funktionen) können Sie individuellste Anpassungen zu den generierten Bildern vornehmen. So lassen sich über ImageMagick z.B. auch Polaroid-Darstellungen von Bildern realisieren und vieles mehr!

Diese Webseite verwendet Cookies. Durch die Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Datenschutzinformationen