diff options
| author | dave <dave@36083f99-b078-4883-b0ff-0f9b5a30f544> | 2008-06-23 14:44:48 +0000 |
|---|---|---|
| committer | dave <dave@36083f99-b078-4883-b0ff-0f9b5a30f544> | 2008-06-23 14:44:48 +0000 |
| commit | 3c840aee3ec9b4f94a5610678ab1550a51b431fe (patch) | |
| tree | 2c5e14cac70b41e51a749226bdca99e46e64f086 /mod/profile/views/default/profile | |
| parent | bdcb2c682bbfcc3189ebb5acbfb8e39e3b8c52a3 (diff) | |
| download | elgg-3c840aee3ec9b4f94a5610678ab1550a51b431fe.tar.gz elgg-3c840aee3ec9b4f94a5610678ab1550a51b431fe.tar.bz2 | |
beginnings of the icon cropper tool
git-svn-id: https://code.elgg.org/elgg/trunk@1064 36083f99-b078-4883-b0ff-0f9b5a30f544
Diffstat (limited to 'mod/profile/views/default/profile')
| -rw-r--r-- | mod/profile/views/default/profile/editicon.php | 40 |
1 files changed, 39 insertions, 1 deletions
diff --git a/mod/profile/views/default/profile/editicon.php b/mod/profile/views/default/profile/editicon.php index 423227204..670cf83dc 100644 --- a/mod/profile/views/default/profile/editicon.php +++ b/mod/profile/views/default/profile/editicon.php @@ -14,6 +14,8 @@ */
?>
+<!-- grab the required js for icon cropping -->
+<script type="text/javascript" src="<?php echo $vars['url']; ?>mod/profile/views/default/js/jquery.imgareaselect-0.4.2.js"></script>
<form action="<?php echo $vars['url']; ?>action/profile/iconupload" method="post" enctype="multipart/form-data">
<p>
@@ -29,4 +31,40 @@ <p>
<input type="submit" class="submit_button" value="<?php echo elgg_echo("upload"); ?>" />
</p>
- </form>
\ No newline at end of file + </form>
+
+<?php
+
+ echo "Your current master photo: <br />";
+ //display the current user photo
+ $user_master_image = $vars['url'] . "pg/icon/" . $_SESSION['user']->username . "/master/" . $_SESSION['user']->icontime . ".jpg";
+
+?>
+
+<script>
+ function preview(img, selection) {
+ var scaleX = 100 / selection.width;
+ var scaleY = 100 / selection.height;
+ $('#user_avatar + div > img').css({
+ width: Math.round(scaleX * 600) + 'px',
+ height: Math.round(scaleY * 500) + 'px',
+ marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
+ marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
+ }); }
+
+ $(document).ready(function () {
+ $('<div><img src="<?php echo $user_master_image; ?>" style="position: relative;" /></div>')
+ .css({ float: 'left', position: 'relative', overflow: 'hidden', width: '100px', height: '100px' })
+ .insertAfter($('#user_avatar'));
+ });
+
+ $(window).load(function () {
+ $('#user_avatar').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
+ $('#user_avatar').imgAreaSelect({ x1: 100, y1: 100, x2: 200, y2: 200 });
+ });
+</script>
+
+<p>
+<img id="user_avatar" src="<?php echo $user_master_image; ?>" alt="User profile photo"
+ style="float: left; margin-right: 10px;" />
+</p>
\ No newline at end of file |