Photo WATERMARK overlay (with or without Lightbox)

7 posts by 3 authors in: Forums > CMS Builder
Last Post: March 20, 2015   (RSS)

By csdesign - February 24, 2015

Hello! 

I am using Lightbox from github to display enlargements of photos.  ( http://www.billdraker.com/bird-photography.php

Can anyone help me with adding a transparent graphic or text WATERMARK overlay to photos via cmsb code, lightbox.js / lightbox.css ? 
I checked the add-ons and cmsb cookbook but I don't see any for Watermarks. Adding the watermarks to the photos in photoshop or lightroom
is not an option because there are already hundreds of photos loaded. 

just for reference - this is the section of lightbox code for the gallery page listed above:

<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[uploads]" title="<?php echo $upload['info1'] ?> <?php echo $record['title'] ?>  © Bill & Sharon Draker"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" border="1" alt="<?php echo $record['title'] ?>  <?php echo $record['tags'] ?>" /></a>

lightbox.js and lightbox.css attached. 

Thank you!!  Tina

Attachments:

lightbox.css 2K

lightbox.js 18K

By Toledoh - February 24, 2015

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/

Cheers,

Tim (toledoh.com.au)

By gkornbluth - March 2, 2015 - edited: March 2, 2015

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

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

By csdesign - March 20, 2015

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

By Toledoh - March 20, 2015

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.

Cheers,

Tim (toledoh.com.au)

By Toledoh - March 20, 2015

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. 

Cheers,

Tim (toledoh.com.au)