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 -->

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.