Photo WATERMARK overlay (with or without Lightbox)

interactivetools.com did some custom work for me a while ago - it works a treat! You can see the logo on all photos here: http://blakemachinery.com.au/

Hi Tina,

Here's some code that I used to overlay a title and artists name on a random image from a user account images field.

It's similar to one of the SUPERIMPOSING TEXT ON RANDOM IMAGES recipe in my CMSB Cookbook http://www.thecmsbcookbook.com

It should be very easy to modify it to overlay a .png watermark image instead of the text information.

<?php $uploadRecords = mysql_select('uploads', " tableName = 'accounts' AND fieldName = 'images'"); ?>
<table align="center" width="80%" border="0" cellpadding="5">
  <tr>
    <?php  shuffle($uploadRecords) ?>
    <?php foreach ($uploadRecords as $upload): ?>
    <td align="center">
      <div onclick='window.location="#"' class="round-corner" style="position: relative; background: url('<?php echo $masterurl ?>/cmsAdmin/uploads/<?php echo
$upload['thumbUrlPath2'] ?>'); width: <?php echo $upload['thumbWidth2'] ?>px; height: <?php echo $upload['thumbHeight2']
?>px;">
      <?php
     // Parse the file name to display title from file name
     // $upload['urlPath'] = preg_replace('/\.\w+$/', '', $upload['urlPath']); 
     // $upload['urlPath'] = preg_replace("/[-_]/", " ", $upload['urlPath'] ); 
      //  $upload['urlPath'] = ucwords($upload['urlPath'] ); 

      ?>
        <div style="position: absolute; top: .9em; left: 1.2em; width: 200px; font-family:Verdana, Tahoma, Arial, Sans-Serif; font-size:1.2em; font-weight:bold; text-align:left; font-style: normal; color: #<?php echo $nawa_colorsRecord['rotator_artist_s_name_and_title_color'] ?>;" class="shadow1">
         <?php if ($upload['info1']):?><?php echo ucwords($upload['info1']); ?><?php // else :?><?php // echo $upload['urlPath']; ?><?php endif?>
        </div>
        <?php  
          list($accountsRecords, $accountsMetaData) = getRecords(array(
          'tableName'   => 'accounts',
          'where'       => "`num` = '{$upload['recordNum']}'",
          'loadUploads' => false,
          'allowSearch' => false,
          'limit'       => '1',
        ));
        ?>
        <?php foreach ($accountsRecords as $record2): ?>
          <div style="position: absolute; bottom: 1.2em; left: 1.2em; width: 200px; font-family:Verdana, Tahoma, Arial, Sans-Serif; font-size:1.2em; font-weight:bold; text-align:left; font-style: normal; color: #<?php echo $nawa_colorsRecord['rotator_artist_s_name_and_title_color'] ?>;" class="shadow1">
            <?php  echo $record2['first_name']; ?> <?php echo $record2['last_name']; ?>
          </div>
        <?php endforeach ?>
      </div>
    </td>
  </tr>
</table>
<?php break?>
<?php endforeach ?>


Good luck,

Jerry Kornbluth

Thanks guys!!  Going back to work on this today. 

I also received this from another forum so I'll be trying both: 

The CSS:

.imagearea {width:640px;height:480px}
.overlay {position:absolute;visibility:visible;z-index:9999;color:#fff;font-family: Arial, serif;padding:20px;}

The HTML:
< div class="imagearea" >
< div class="overlay" >
Overlaid text or transparent PNG watermark
< /div ><! end overlay -->
< img src="imagefolder/image.jpg" >
< /div ><! end imagearea -->

Are you wanting to protect the image from people downloading it and using it elsewhere?  If so, the css version will not work. You need to imbed the watermark into the image.

Hi Tim, 

That would be ideal but I wasn't sure that was possible since all the images are already uploaded.  In a perfect world, they would have been watermarked before upload, but they were not so I'm trying to find a fix.

Thanks, Tina

That's exactly what I have on the Blake Machinery link above. And it can be applied to existing images. Send an email to consulting and mention that site. I think Greg did it.