Photo WATERMARK overlay (with or without Lightbox)
7 posts by 3 authors in: Forums > CMS Builder
Last Post: March 20, 2015 (RSS)
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
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/
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
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.
Tim (toledoh.com.au)
By csdesign - March 20, 2015
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
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.
Tim (toledoh.com.au)