SUPERIMPOSING TEXT ON RANDOM IMAGES - Jan 6th, 2015
|
Taking the above concept one step further, my client wanted to superimpose the title of the image over each of the
random images. Using the “title” field from each record, nested div tags and CSS to adjust style and position made
easy work of the task.
The basic format for the code is:
<div style="position: relative; background: url(path to image); width: (width)px; height: (height)px;">
<div style="position: absolute; bottom: 0; left: 0.5em; width: (text line width)px; font-weight: bold; color:
#000000;"> <p>(text to appear at the bottom left of the image)</p> </div> </div>
Replacing the code in each cell with the code below (change the table names in each cell as appropriate) will
superimpose the contents of the title field of each record in 9 point black Verdana text at the bottom of each image and
indent it .5 em from the left. The text width is set to the width of the image so that it will wrap and not extend past
the edge of the image.
<div class="group1" ><div style="position: relative; background: url(<?php foreach ($image_1Records as $record): ?>
<?php foreach ($record['image'] as $upload): ?><?php echo $upload['thumbUrlPath2'] ?>); width: <?php echo
$upload['thumbWidth2'] ?>px; height: <?php echo $upload['thumbHeight2'] ?>px;">
<div style="position: absolute; bottom: 0; left: 0.5em; width: <?php echo $upload['thumbWidth2'] ?>px;
font-family:Verdana, Tahoma, Arial, Sans-Serif; font-size:9pt; font-weight:normal; text-align:left; font-style: normal;
color: #000000;"><?php echo $record['title'] ?></div><?php endforeach ?>
<?php endforeach ?></div> </div>
UPDATE
In a multi-recod situation where there were a large number of records but only some of them had images, I didn't want to
increase the server load by loading all the records and images before I chose one, but I was having some difficulty
adding the name of the artist in the overlay.
Greg Thomas from Interactive tools reminded me that a parent record number of an upload can be found with
$upload['recordNum'].
Here's the code we ultimately came up with:
<?php $uploadRecords = mysql_select('uploads', " tableName = 'your_table' 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(http://your_site.com/cmsAdmin/uploads/<?php echo
$upload['thumbUrlPath2'] ?>); width: <?php echo $upload['thumbWidth2'] ?>px; height: <?php echo $upload['thumbHeight2']
?>px;">
<?php
$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: #00F;" class="your_class">
<?php echo $upload['urlPath']; ?>
</div>
<?php
list($accountsRecords, $accountsMetaData) = getRecords(array(
'tableName' => your_table',
'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: #00F;" class="your_class">
<?php echo $record2['first_name']; ?> <?php echo $record2['last_name']; ?>
</div>
<?php endforeach ?>
</div>
</td>
</tr>
</table>
<?php break?>
<?php endforeach ?>
|
The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact
Interactive Tools for information on the downloading of the software or the purchasing of licenses.
