Modul: Gerenderte Überschriften

Dieses REDAXO-Modul erzeugt grafische Überschriften und hinterlegt die erzeugte PNG-Grafik zusätzlich mit Text, um sie für Suchmaschinen, Screenreader und Browser ohne CSS-Unterstützung bzw. deaktiviertem CSS lesbar zu machen. Geeignet auch für Initiale.

Über die Moduleingabe können Text, Schriftgröße, Text- und Hintergrundfarbe sowie Schriftart und Positionierung angegeben werden.

Dieses Modul ist eine Abwandlung bzw. Erweiterung der Version von Marcel Fahle, Peter Bickel und verwendet die “Phark Revisited” Methode von Mike Rundle.

Getestete REDAXO-Version: 3.2

Moduleingabe:

<table border="0" cellpadding="2" cellspacing="1" />
<tr><td width="100">Überschrift</td><td><input type="text" size="20" name="VALUE[1]" value="REX_VALUE[1]"></td></tr>
<tr><td>Farbe</td><td>#<input type="text" size="6" name="VALUE[2]" value="<?php<br />
$name = ereg_replace("([^_A-Za-z0-9\.-])","","REX_VALUE[1]");<br />
$text = "REX_VALUE[1]";<br />
$color = "REX_VALUE[2]";<br />
$bgcolor = "";<br />
$slice_id = strlen( "" ) == 0 ? $_POST["slice_id"] : "";<br />
$imgsrc = 49 ."_". 56 ."_". $slice_id ."_". $REX['LANG'] .".png";<br />
$font = $REX[INCLUDE_PATH]."/ttf/";<br />
$fontsize = (int)"";<br />
$imgfile = $REX[INCLUDE_PATH]."/../../pics/headlines/$imgsrc";<br />
$style = "";<br />
<br />
// save<br />
if( $_POST["save"] == 1 ) {<br />
    // create Image<br />
    $abox = imagettfbbox( $fontsize, 0, $font, "A" );<br />
    $bbox = imagettfbbox( $fontsize, 0, $font, $text );<br />
    $width = 5 + abs(min($bbox[2], $bbox[4])-max($bbox[0],$bbox[6]));<br />
    $height = 2 + abs(min($bbox[5],$bbox[7])-max($bbox[1],$bbox[3]));<br />
    $xpos = -1 * min($bbox[0],$bbox[6]);<br />
    $ypos = abs(max($abox[5],$abox[7]));<br />
    $im = imagecreatetruecolor( $width, $height );<br />
    $clr = imagecolorallocate( $im, intval("0x". substr( $color, 0, 2 ), 16), intval("0x". substr( $color, 2, 2 ), 16), intval("0x". substr( $color, 4, 2 ), 16 ));<br />
    $bgclr = imagecolorallocate( $im, intval("0x". substr( $bgcolor, 0, 2 ), 16), intval("0x". substr( $bgcolor, 2, 2 ), 16), intval("0x". substr( $bgcolor, 4, 2 ), 16 ));<br />
    imagefilledrectangle( $im, 0, 0, $width, $height, $bgclr );<br />
    imagettftext($im, $fontsize, 0, $xpos, $ypos, $clr, $font, $text );<br />
    imagepng( $im, $imgfile );<br />
    imagedestroy( $im );<br />
}<br />
<br />
	$size = getimagesize($imgfile);<br />
<br />
// output<br />
// list( $width, $height, $info, $attr ) = getimagesize( $imgfile );<br />
// echo '<img src="/pics/headlines/'. $imgsrc .'" alt="'. $text .'" title="'. $text .'"  '. $attr .'class ="'. $style .'">';<br />
?><br />
<br />
< class="<?=$style;?>" title="REX_VALUE[1]" style="text-indent: -5000px; width:<?=$size[0];?>px; height: <?=$size[1];?>px; background: url('<?=$REX[HTDOCS_PATH]; ?>pics/headlines/<?=$imgsrc;?>') no-repeat;"><br />
	REX_VALUE[1]<br />
</><br />
"></td></tr>
<tr><td>Hintergrund</td><td>#<input type="text" size="6" name="VALUE[3]" value=""</td></tr>

<tr><td>Schriftart</td><td>
<select name="VALUE[4]" >
<?php
$handle = opendir('./include/ttf/');
$filenames = array();

while($file = readdir($handle)) {
	if($file == '.' || $file == '..') continue;
	$filenames[] = $file;
}
closedir($handle);
sort($filenames, SORT_STRING);
foreach($filenames as $file) echo $file . '<br>';

foreach ($filenames as $value) {
	echo '<option value="'.$value.'" ';
	
	if ( ""=="$value" ) {
		echo 'selected="selected" ';
	}
	echo '>'.$value.'</option>';
}
?>
</select>
</td></tr>

<tr><td>Schriftgröße</td><td><input type="text" size="3" name="VALUE[5]" value=""></td></tr>

<tr><td>Float</td><td>
<select name="VALUE[6]" >
<?php
foreach (array("","floatLeft","floatRight") as $value) {
	echo '<option value="'.$value.'" ';
	
	if ( ""=="$value" ) {
		echo 'selected="selected" ';
	}
	echo '>'.$value.'</option>';
}
?>
</select>
</td></tr>

<tr><td>Text</td><td>
<select name="VALUE[8]" >
<?php
foreach (array("h1","h2","h3","h4","h5","h6") as $value) {
	echo '<option value="'.$value.'" ';
	
	if ( ""=="$value" ) {
		echo 'selected="selected" ';
	}
	echo '>'.$value.'</option>';
}
?>
</select>
</td></tr>
</table>

Modulausgabe:

<?php
$name = ereg_replace("([^_A-Za-z0-9\.-])","","REX_VALUE[1]");
$text = "REX_VALUE[1]";
$color = "REX_VALUE[2]";
$bgcolor = "";
$slice_id = strlen( "" ) == 0 ? $_POST["slice_id"] : "";
$imgsrc = 49 ."_". 56 ."_". $slice_id ."_". $REX['LANG'] .".png";
$font = $REX[INCLUDE_PATH]."/ttf/";
$fontsize = (int)"";
$imgfile = $REX[INCLUDE_PATH]."/../../pics/headlines/$imgsrc";
$style = "";

// save
if( $_POST["save"] == 1 ) {
    // create Image
    $abox = imagettfbbox( $fontsize, 0, $font, "A" );
    $bbox = imagettfbbox( $fontsize, 0, $font, $text );
    $width = 5 + abs(min($bbox[2], $bbox[4])-max($bbox[0],$bbox[6]));
    $height = 2 + abs(min($bbox[5],$bbox[7])-max($bbox[1],$bbox[3]));
    $xpos = -1 * min($bbox[0],$bbox[6]);
    $ypos = abs(max($abox[5],$abox[7]));
    $im = imagecreatetruecolor( $width, $height );
    $clr = imagecolorallocate( $im, intval("0x". substr( $color, 0, 2 ), 16), intval("0x". substr( $color, 2, 2 ), 16), intval("0x". substr( $color, 4, 2 ), 16 ));
    $bgclr = imagecolorallocate( $im, intval("0x". substr( $bgcolor, 0, 2 ), 16), intval("0x". substr( $bgcolor, 2, 2 ), 16), intval("0x". substr( $bgcolor, 4, 2 ), 16 ));
    imagefilledrectangle( $im, 0, 0, $width, $height, $bgclr );
    imagettftext($im, $fontsize, 0, $xpos, $ypos, $clr, $font, $text );
    imagepng( $im, $imgfile );
    imagedestroy( $im );
}

$size = getimagesize($imgfile);

// output
// list( $width, $height, $info, $attr ) = getimagesize( $imgfile );
// echo '<img src="/pics/headlines/'. $imgsrc .'" alt="'. $text .'" title="'. $text .'"  '. $attr .'class ="'. $style .'">';
?>

< class="<?=$style;?>" title="REX_VALUE[1]" style="text-indent: -5000px; width:<?=$size[0];?>px; height: <?=$size[1];?>px; background: url('<?=$REX[HTDOCS_PATH]; ?>pics/headlines/<?=$imgsrc;?>') no-repeat;">
	REX_VALUE[1]
</>

Installationshinweise:

Alle ttf-Schriften müssen auf dem Server in das Verzeichnis /redaxo/include/ttf gespeichert werden.
Zusätzlich muss ein Verzeichnis /pics/headlines angelegt und mit Schreibrechten versehen werden.

Weitere REDAXO-Module und Hilfreiches natürlich auch auf der REDAXO-Homepage.

Zurück zur Übersicht

graphicfactory - Gerenderte Überschriften - Internet Agentur, Werbeagentur, Webdesign, Grafikdesign, Traunstein

Modul: Gerenderte Überschriften