Merging Text and Image in Newsletter Made Simple

I’m always looking for a nice and convenient way to apply complex imageprocessing to images without making use of third party tools. This time I want to apply a ramp and a textlayer to a campaign image in newsletter made simple. This tutorial is for experts!

We take this image:

and apply a ramp with a text layer and a logo. Our result:

Remember: This is a whole new image without using Photoshop or something similar. This is *magic* ;-).

What do we need?


      (of course)

Newsletter Made Simple

      (and dependency modules)

Supersizer Plugin

Let’s start with preparation:
First we need a tiny helper script. We add a new UDT “createimage”:

$textstring = htmlentities($params[‘text’], ENT_QUOTES | ENT_IGNORE, "UTF-8");
$textstring = "No text given";
$sourceimage = $params[‘image’];
$sourceimage = "uploads/newsletter/header.jpg";
$imagename = stristr($sourceimage, ‘?’);
$imagename2 = substr($imagename,1);
$escaped = preg_replace(‘/[^A-Za-z0-9_\-]/’, ‘_’, $textstring);
$filename = "uploads/newsletter/image/image_".$escaped."_".$imagename2.".jpg";

if (!function_exists(‘Schreibebild’)) {
function Schreibebild($text, $quelldatei, $dateiname)
$font = ‘uploads/newsletter/font/trebuc.ttf’;
$font_groesse = 24;

$ausgangsbild = imagecreatefromjpeg($quelldatei);
$logo = imagecreatefrompng("uploads/newsletter/logo.png");
$ramp = imagecreatefrompng("uploads/newsletter/ramp.png");

imagecopy($ausgangsbild, $logo,0,0,0,0,280,100);
imagecopy($ausgangsbild, $ramp,0,200,0,0,640,80);

$text_farbe = imagecolorallocate($ausgangsbild, 255, 255, 255);

imagettftext($ausgangsbild, $font_groesse, 0, 20, 255, $text_farbe, $font, html_entity_decode($text));
imagejpeg($ausgangsbild, $dateiname,90);

Schreibebild($textstring, $sourceimage, $filename);

echo "<img src=\"".$filename."\"/>";

As you can see, I am using a fallback image if no one is defined: uploads/newsletter/header.jpg
So take sure this image exists. I use following dimensions: 640x280px
We also need a font. I use trebu.ttf. You can take ANY font. Just take care it is a truetypefont!
To merge both text and image, I like to use a ramp. Mine has dimensions of 640x80px!
And to make it unique we finally add a logo. It is 280x100px.
For the ramp and the logo I use png images. Because they allow nice shadows and transparency.
Take care everything is in right place (uploads/newsletter/)

In our nms message template, we need a new image block:

[php]{nms_content name=’Headerimage’ assign=’headerimage’}[/php]

and a textfield (for campaign title):

[php]{nms_content name=’campaign’ prompt=’Campaign-Title’ wysiwyg=’false’ oneline=’true’ assign=’campaign’}[/php]

now we put all together. Paste the following code to the template where you want the new image to appear:

[php]{supersizer path=$headerimage crop=true width=640 height=280 strip_tags=true passthru=true protect=false assign="ssheaderimage" url=true}{createimage text=$campaign image=$ssheaderimage}[/php]

We pass the supersizer image to our UDT. And this returns us the final image. The good thing about this: it doesn’t matter how big the sourceimage is, our supersizer script scales it down so it will always fit in our newsletter!

Looking for quality CMS Made Simple Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under CMS Made Simple | RSS 2.0

Author Spotlight

Nic Bug

I am a freelance web designer from Germany and CMS Made Simple is my every day tool. I have been using it since 2007 and I love it because it’s so easy to use. Even my clients understand and use it daily. I also have my own CMS Made Simple project called There, you will find premium templates for made for CMS Made Simple.

Leave a Reply

Your email address will not be published. Required fields are marked *