Thanks for that comment re ContentFlow. It’s probably not going to get used anyway, as I prefer the sliding transition. Also thanks to both of you re QuickManager. On to image area tagging ...
I have wanted to implement image area tagging such as found in this demo :
http://neillh.com.au/phototagging2/index.php
So I started messing around with the code provided there, specifically
http://neillh.com.au/phototagging2/phototagging.rar
This was extracted to a local website such that its contents lived under
assets/snippets/phototagging
The database for the tags was created with this call in phpMyAdmin, with the table
becoming part of the MODx database:
CREATE TABLE phototags (
rec_id int(11) NOT NULL AUTO_INCREMENT,
pic int(11) NOT NULL,
title varchar(255) NOT NULL,
x1 int(11) DEFAULT NULL,
y1 int(11) DEFAULT NULL,
x2 int(11) DEFAULT NULL,
y2 int(11) DEFAULT NULL,
width int(11) DEFAULT NULL,
height int(11) DEFAULT NULL,
PRIMARY KEY (rec_id)
)
(I changed the original "id" and "photoid" to be "rec_id" and "pic". In hindsight, I’m
not sure that it was necessary. My goal at the time was to avoid confusing myself regarding
what was getting used where ...)
For use in Easy2Gallery I created a document for a "landing page" and in my case it’s id was 51. So that’s where that number is coming from below.
Main Easy2Gallery call ;
[!easy2? &slideshow=`smoothgallery` &ss_config=`slidingtransition` &landingpage=`51`!]
Landing page contents :
<div class="picture">
[!phototagging_form_e2g!]
[!easy2? &page_tpl=`areatag_chunk` &landingpage=`51`!]
[!phototagging_content_e2g!]
</div><!-- class picture -->
Calls added to "head" section of template used by landing page :
<link rel="stylesheet" href="assets/snippets/phototagging/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="assets/snippets/phototagging/css/imgareaselect-animated.css" />
<script type="text/javascript" src="assets/snippets/phototagging/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="assets/snippets/phototagging/js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="assets/snippets/phototagging/js/jquery.load.js"></script>
Snippet call placed (immediately, in my case) after opening "body" tag in template used by landing page ...
[!phototagging_function_e2g!]
Code for phototagging_function_e2g :
<?php
global $modx;
//Function to sanitize values received from the form. Prevents SQL injection
function clean($str) {
$str = @trim($str);
if(get_magic_quotes_gpc()) {
$str = stripslashes($str);
}
return $str; //$modx->db->escape($str);
}
if($_POST['tag']) {
//Sanitize the POST values
$title = clean($_POST['title']);
$x1 = $_POST['x1'];
$y1 = $_POST['y1'];
$w = $_POST['w'];
$h = $_POST['h'];
$fid = $_GET['fid'];
//Insert tag into database.
$qry = " INSERT INTO phototags (rec_id, title, x1, y1, x2, y2, width, height,pic) " .
" VALUES('', '".$title."', '".$x1."', '".$y1."', '".$_POST['x2']."', '".$_POST['y2']."', '".$w."', '".$h."', '".$fid."') ";
$result=$modx->db->query($qry); //MattC
} elseif($_GET['delete']) {
//Sanitize the POST values
$rec_id = clean($_GET['rec_id']);
$qry = " DELETE FROM phototags where rec_id = $rec_id "; //MattC
$result=$modx->db->query($qry); //MattC
}
return;
?>
Code for "phototagging_form_e2g" snippet :
<?php
$fid = $_GET['fid'];
$output = '';
$output .= '<div class="start-tagging">Click here to start tagging</div><!-- class start tagging -->';
$output .= '<div class="finish-tagging hide">Click here to cancel tagging</div><!-- class finish tagging -->';
$output .= '<div class="image">';
$output .= ' <div id="title_container" class="hide">';
$output .= ' <form method="post" action="[~[*id*]~]?fid=' . $fid . '" >';
$output .= ' <!-- Grab the X/Y/Width/Height -->';
$output .= ' <input type="hidden" name="x1" id="x1" value="' . $x1 . '" />';
$output .= ' <input type="hidden" name="y1" id="y1" value="' . $y1 . '" />';
$output .= ' <input type="hidden" name="x2" id="x2" value="' . $x2 . '" />';
$output .= ' <input type="hidden" name="y2" id="y2" value="' . $y2 . '" />';
$output .= ' <input type="hidden" name="w" id="w" value="' . $w . '" />';
$output .= ' <input type="hidden" name="h" id="h" value="' . $h . '" />';
$output .= ' <input type="hidden" name="pic" id="fid" value="' . $fid . '" />';
$output .= ' <label for="title">Tag text</label><br />';
$output .= ' <input type="text" id="title" name="title" size="30" value="" maxlength="55" /><br />';
$output .= ' <input type="hidden" name="tag" value="true" />';
$output .= ' <input type="submit" value="Submit" class="" />';
$output .= ' </form>';
$output .= ' </div><!-- id title container -->';
return $output;
?>
Code for "phototagging_content_e2g" snippet :
<?php
global $x1, $y1, $x2, $y2, $w, $h;
$fid = $_GET['fid'];
$output = '';
$list_tags = array();
$qry = " SELECT rec_id, title, x1, y1, x2, y2, width, height FROM phototags WHERE pic=".$fid;
echo $qry;
$results=$modx->db->query($qry) or die("Error retrieving record: " . mysql_error());
while ($row=$modx->db->getRow($results))
{
extract ($row);
$name = str_replace(' ', '-', $title);
$list_tags[] = array('rec_id' => $rec_id, 'title' => $title);
$output .= '<!-- Style for the tagged area -->';
$output .= '<style type="text/css">';
$output .= ' .map a.'.$name.' { border:1px solid #000; top:'.$y1.'px; left:'.$x1.'px; width:'.$width.'px; height:'.$height.'px; }';
$output .= ' .map a:hover.'.$name.' { border:3px solid #fff; }';
$output .= '</style>';
$output .= '<!-- Tags displayed as a list -->';
$output .= '<ul class="map">';
$output .= ' <li><a class="'.$name.'"><span><b>'.$title.'</b></span></a></li>';
$output .= '</ul>';
}
$output .= '</div><!-- class image -->';
$output .= '<p>In this photo:';
foreach ($list_tags as $value)
{
$output .= "<a href='" . str_replace(' ', '-',$value['title']) . "'>" . $value['title'] . "</a> (<a href='[~[*id*]~]&fid=".$fid."&delete=true&rec_id=" . $value['rec_id'] . "'>Delete</a>) ";
}
$output .= '</p>';
return $output;
?>
Chunk used for page template ("areatag_chunk") :
<div class="landingpage">
<div class="image">
<img src="[+easy2:src+]" alt="[+easy2:title+]" width="100%" class="imageview" id="imageid">
</div>
<div class="imagetitle">[+easy2:title+]</div>
<div class="imagedesc">[+easy2:description+]</div>
</div>
The above code is the result of trying to get the image area tagging to work under various circumstances. So it is no doubtedly inefficient and/or filled with extraneous code. Or maybe it’s wrong in places in that it could be more bullet proof. But on a localy installation it seems to be working. That said, I’d be interested in seeing better implementations and learning from how others would change the code. My hope is that it at least provides a starting point/proof-of-concept ...
Regards,
Matt
PS One thing I have noticed is that the image area tagged may be off a bit from where it is drawn depending on margins, padding, etc. used by the containing div. And I’m not sure the form-interaction-with-php is as tidy as it could be. FWIW ...
☆ A M B ☆
☆ A M B ☆
