We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 24981
    • 109 Posts
    OK - I cheated and used a single layout table.  Don’t beat me, I didn’t want to use faux columns...

    I’ve used the new Newslisting module for the projects "blog" so that I could arrange the projects order by changing the publish date.

    http://www.matrix-consult.co.uk

    At one stage I implemented sIFR font replacement then took it down (can’t turn-off anti-aliasing in Flash output), and put up the Dynatext (alistapart) font replacement then took that down... My advice - don’t try font replacement if you want to replicate 8px bitmap fonts  sad  So the section headers are plain gifs which the admin can insert using a TV image insert.

    Cheers
    Richard
      • 7455
      • 2,204 Posts
      To generate an transparent png from ttf fonts i used the folloing code (made by:pemacviper adapted for transparancy by me):

      // ------------------------------------------------------------------------------------------------------------
      //                             Snippet by pemacviper webmedia, www.pemacviper.de
      // ------------------------------------------------------------------------------------------------------------
      //
      // This Snippet makes a PNG-Image out of the dynamic logtitle, pagetitle
      // or description in every textcolor and backgroundcolor you want with or
      // without shadow, with or without transparency.
      // Just insert a new menu, the True Type Font you want and the PNG
      // will be genereated and put into the page where you want it to be.
      //
      // Beware! True Type Fonts like "Times New Roman(R)" underlie Copyrights.
      // Look for some FREE True Type Fonts in the net to be out of the wood.
      // a good place to look is http://www.dafont.com/
      //
      // Configure the data below to make the snippet work.
      //
      // Have fun.
      //
      // This peace of code is free in the terms of the GNU GPL.
      //
      // ------------------------------------------------------------------------------------------------------------
      //                                                      HISTORY
      // ------------------------------------------------------------------------------------------------------------
      //
      // Ver. 1.3 Final - 23/10/2005 - pemacviper
      //	-added shadown function
      //
      // Ver. 1.2 Final - 18/06/2005 - pemacviper
      //	-XHTML-conform output
      //	-corporate-conform Snippetname(Makeimage > MakeImage)
      //
      // Ver. 1.1 Final - 17/05/2005 - Dimmy
      //	some small changes e.g. adding transparancy support
      //
      // Ver. 1.0 Final - 11/05/2005 - pemacviper
      //	authoring
      //
      // ------------------------------------------------------------------------------------------------------------
      
      
      
      // ------------------------------------------------------------------------------------------------------------
      //                                           Start Configuration
      // ------------------------------------------------------------------------------------------------------------
      
      
      // Height and width of the pic
      $height = "222";
      $width = "140";
      
      
      // Color of background in RGB, transparency from 0-127 (127=100%, 0=0%)
      // Alpha transparancy added by Dimmy
      $r1 = "255";
      $g1 = "255";
      $b1 = "255";
      $tr1 = "0";
      
      
      // Color of text in RGB, transparency from 0-127 (127=100%, 0=0%)
      // Alpha transparancy added by Dimmy
      $r2 = "43";
      $g2 = "55";
      $b2 = "140";
      $tr2 = "0";
      
      
      // Color of shadow in RGB, transparency from 0-127 (127=100%, 0=0%)
      // Alpha transparancy added by Dimmy
      $r3 = "200";
      $g3 = "200";
      $b3 = "200";
      $tr3 = "0";
      
      
      // Define her the image-text where "$text1" is the forground-text
      // and "$text2" is the text of the shadown-text.
      // If you don't want a shadow just leave "$text2" blank e.g. "$text2= "";"
      // You can use here all the variables which are supported by Etomite e.g.
      // "Pagetitle" of the site = $etomite->documentObject['pagetitle']
      // "Longtitle" of the site = $etomite->documentObject['longtitle']
      // "Description" of the site = $etomite->documentObject['description']
      $text1 = $etomite->documentObject['pagetitle'];
      $text2 = $etomite->documentObject['pagetitle'];
      
      
      // Define here the name of the generated pic e.g.
      // "Pagetitle" of the site = $etomite->documentObject['pagetitle']
      // "Longtitle" of the site = $etomite->documentObject['longtitle']
      // "Description" of the site = $etomite->documentObject['description']
      $imgname = $etomite->documentObject['pagetitle'];
      
      
      // Path where to save the pic
      $imagepath = "assets/site/makeimage/images";
      
      
      // Path to True Type Font where "$font1" is the font of the foreground-text
      // and "$font2" is the font of the shadown-text.
      $font1 = "/assets/site/makeimage/ttf/arial.ttf";
      $font2 = "/assets/site/makeimage/ttf/arial.ttf";
      
      
      // Define here the font size of the text and the shadow in px where
      // "$fontsize1" is the size of the foreground-text and "$fontsize2"
      // is the size of the shadow-text.
      $fontsize1 = "25";
      $fontsize2 = "25";
      
      
      // Define here the rotation of the text and the shadow in degrees
      // where "$rotate1" is the rotation of the foreground-text and "$rotate2"
      // is the rotation of the shadow-text.
      // "0" means text readable form left to right
      // "90" means text readable from down to up
      // "-90" means text readable from up to down
      // "180" means text readable upsidedown
      $rotate1 = "90";
      $rotate2 = "90";
      
      
      // Define here the distance from 0 on x-axis and y-axis of the text and
      // the shadow in px where "$x1"/"$y1" is the position of the foreground-text
      // and "$x2"/"$y2" is the position of the shadow-text.
      $x1 = "90";
      $y1 = "163";
      $x2 = "120";
      $y2 = "220";
      
      
      // ------------------------------------------------------------------------------------------------------------
      //                                             End of Configuration
      // ------------------------------------------------------------------------------------------------------------
      
      
      // ------------------------------------------------------------------------------------------------------------
      //                                                Start Code
      // ------------------------------------------------------------------------------------------------------------
      
      
      Header ("Content-type: image/png");	// Generates the Header
      $im = imagecreate ($width, $height);	// Creates frame of pic
      $backcolor = ImageColorAllocatealpha ($im, $r1, $g1, $b1, $tr1);	// Creates back-color
      $fontcolor1 = ImageColorAllocatealpha ($im, $r2, $g2, $b2, $tr2);	// Creates shadown-text
      $fontcolor2 = ImageColorAllocatealpha ($im, $r3, $g3, $b3, $tr3);	// Creates foreground-text
      ImageTTFText ($im, $fontsize2, $rotate2, $x2, $y2, $fontcolor2, $font2, $text2);	// Shadowcreation
      ImageTTFText ($im, $fontsize1, $rotate1, $x1, $y1, $fontcolor1, $font1, $text1);	// Textcreation
      ImagePNG ($im, "$imagepath/$imgname.png");	// Output of the pic
      ImageDestroy ($im);	// Clean the cache
      
      return "<img src=\"$imagepath/$imgname.png\" border=\"0\" alt=\"$imgname\" />";	//Output for the Browser
      
      // ------------------------------------------------------------------------------------------------------------
      //                                               End of Code
      // ------------------------------------------------------------------------------------------------------------
      

      maybe this wil work for you to.

      To make the snippet work the GD- and FreeType-library has to be installed in php.

      Greets Dimmy
        follow me on twitter: @dimmy01
        • 33337
        • 3,975 Posts
        Hi Richard,

        Very nice site !

        Thanks for sharing.

        regards,

        zi
          Zaigham R - MODX Professional | Skype | Email | Twitter

          Digging the interwebs for #MODX gems and bringing it to you. modx.link
          • 25317
          • 122 Posts
          Nice site.... good work. grin
            • 26435
            • 1,193 Posts
            http://validator.w3.org/check?uri=http%3A%2F%2Fwww.matrix-consult.co.uk%2F
              Husband, Father, Brother, Son, Programmer, Atheist, Nurse, Friend, Lover, Fighter.
              All of the above... in no specific order.


              I send pointless little messages
              • 24981
              • 109 Posts
              Thanks Scotty.  Lazy of me not to check (damn alt tags!).  Validates now!

              Richard