Author Topic: [CODE] Rotate Image Feature  (Read 18 times)

KHDev

  • Global Moderator
  • Veteran Member
  • *****
  • Posts: 510
  • Karma: +43/-2
  • Etano Contributor (Skins & Mods)
[CODE] Rotate Image Feature
« on: July 03, 2018, 01:00:08 PM »


---

Add the option for users and admins to rotate images.



:: How It Works ::


1) Once on the photo settings page (either after upload or later) there will be a button to rotate

2) If the user clicks the rotate button the image will rotate 90 degrees via the power of JQueryRotate plugin and record the degrees in a hidden textfield

3) User saves the changes using the normal save button on the page

4) if the hidden textfield isn't empty then the saving process will then go onto rotate the image once input data is validated via a new img function which uses PHP's function imagerotate() to rotate the image and replace the old image.


IMPORTANT
+ Any rotation will only be applied when the user clicks the save button.




DISCLAIMER!

This modification requires manual edits to PHP, HTML, CSS and JS Files.

By choosing to add this feature to your site, you accept all responsibility and do so at your own risk.

While this modification has been tested and verified as working I (KHDev) accept no responsibility or liability for any damage, loss or any other kind of issues caused by the attempt to install or use this modification.

ALWAYS BACK UP (MAKE A COPY) OF FILES BEFORE YOU EDIT THEM IN CASE SOMETHING GOES WRONG!

INSTRUCTIONS BELOW ARE BASED ON THE DEFAULT ETANO SKIN! IF YOU USE A DIFFERENT SKIN THEN YOU WILL NEED TO CUSTOMISE THE SKIN EDITS TO MEET YOUR NEEDS. I WILL NOT PROVIDE ADDITIONAL INSTRUCTIONS!





Installation



+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ includes > img_functions.inc.php
++ add new function to bottom of the file
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Code: [Select]

function rotate_image($orig_image,$degrees,$filename,$saveto){
$ext=strtolower(substr(strrchr($filename,"."),1));
global $accepted_images;

if (empty($accepted_images)) {
$accepted_images=array('jpg','jpeg','png');
}

$img_new2=false;
if (in_array($ext,$accepted_images)) {
if($ext == 'jpg' || $ext == 'jpeg'){
$img = imagecreatefromjpeg($orig_image);
$img_new = imagerotate($img, $degrees, 0);
$img_new2 = imagejpeg($img_new, $saveto,100);

imagedestroy($img);
imagedestroy($img_new);

}elseif($ext == 'png'){
$img = imagecreatefrompng($orig_image);
$img_new = imagerotate($img, $degrees, 0);
$img_new2 = imagepng($img_new, $saveto,0);

imagedestroy($img);
imagedestroy($img_new);

}elseif($ext == 'gif'){
$img = imagecreatefromgif($orig_image);
$img_new = imagerotate($img, $degrees, 0);
$img_new2 = imagegif($img_new, $saveto);

imagedestroy($img);
imagedestroy($img_new);

}
}

return $img_new2;

}




+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ includes > common.inc.php
++ add global image refresh var around line 130
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Code: [Select]

if(isset($_SESSION[_LICENSE_KEY_]['site']['refresh_image'])){
$InactiveFor = time() - $_SESSION[_LICENSE_KEY_]['site']['refresh_image'];
$imageExpire = 5; // 5 minutes
$expire = $imageExpire * 60;

if($InactiveFor >= $expire || isset($_SESSION[_LICENSE_KEY_]['site']['refresh_image_force'])){
$_SESSION[_LICENSE_KEY_]['site']['refresh_image'] = time();
if(isset($_SESSION[_LICENSE_KEY_]['site']['refresh_image_force'])){
unset ($_SESSION[_LICENSE_KEY_]['site']['refresh_image_force']);
}
}
}else{
$_SESSION[_LICENSE_KEY_]['site']['refresh_image'] = time();
}

$tplvars['refresh_image']='?'.$_SESSION[_LICENSE_KEY_]['site']['refresh_image'];




++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ processors > photo_settings.php (approx line 137)
++ add code to rotate image if needed
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Code: [Select]

$rotate_values=sanitize_and_format_gpc($_POST,'rotation',$__field2type[FIELD_INT],$__field2format[FIELD_INT],array());
if(!empty($rotate_values)){
foreach($rotate_values as $pid=>$rval){
if(!empty($rval) && in_array($rval,array(90,180,270,360)) && isset($photos[$pid])){

$orig_photo=$photos[$pid];
$rotate_value = 360-(int)$rval;

if(!empty($rotate_value)){
require_once _BASEPATH_.'/includes/img_functions.inc.php';

// Original Photo
$photo_path = _PHOTOPATH_.'/'.$orig_photo;
$rotated_image=rotate_image($photo_path,$rotate_value,$orig_photo,$photo_path);
// T1 Thumb Photo
if($rotated_image){
$photo_path = _PHOTOPATH_.'/t1/'.$orig_photo;
$rotated_image=rotate_image($photo_path,$rotate_value,$orig_photo,$photo_path);
}
if($rotated_image){
// T2 Thumb Photo
$photo_path = _PHOTOPATH_.'/t2/'.$orig_photo;
$rotated_image=rotate_image($photo_path,$rotate_value,$orig_photo,$photo_path);
}

$_SESSION[_LICENSE_KEY_]['site']['refresh_image_force'] = 'Y';

}

}
}
}




+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ -- -- --- --- --
++ upload jQueryRotate.js
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

You can download a copy of it from  http://jqueryrotate.com/   (you might need to right-click and "save link as" to download)

Then upload it to yoursite (SITE > js  > HERE)


+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ js > photo_settings.js
++ add the following  function to the file
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Code: [Select]

function rotateimg(imgID){
var value = document.getElementById("rotation_"+imgID).value;
if(value ==''){
value = 0;
}

var newVal = parseInt(value,10) + parseInt(90,10);

$("#img"+imgID).rotate({ animateTo:newVal});
if(newVal == '360'){
newVal = 0;
}
document.getElementById("rotation_" + imgID).value = newVal;
}



+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ site_skins > def > photo_settings.html
++ add hidden input field and rotate button
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

At the bottom of the page add the following to add the jQueryRotate.js file

Code: [Select]
<script type="text/javascript" src="{tplvars.baseurl}/js/jQueryRotate.js"></script>
Now, find the <img> tag which loads the image (should look something like)

<img class="user_photo thumb2" src="{tplvars.photourl}/t2/{loop.photo}" alt="{loop.caption}" />

and replace it with

Code: [Select]
<div class="ps-photo">
<span>
<a href="javascript:" class="content-link rotate-btn" onclick="rotateimg({loop.photo_id})">Rotate</a>
<img class="user_photo thumb2" id="img{loop.photo_id}" src="{tplvars.photourl}/t2/{loop.photo}{tplvars.refresh_image}" alt="{loop.caption}" />
</span>
</div>
<input type="hidden" class="rotation" name="rotation[{loop.photo_id}]" id="rotation_{loop.photo_id}" value="" />



+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ site_skins > def > styles > photo_settings.css
++ add the following styles
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Code: [Select]

.ps-photo{
    text-align: center;
    margin: 20px 0px 40px 0px;
}

.ps-photo span{
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: 2px solid #eee;
    border-radius: 3px 3px 3px 3px;
}

.ps-photo a.rotate-btn{
position: absolute;
    top: 2px;
    right: 2px;
    display: inline-block;
    padding: 5px 5px;
    border: 1px solid;
    border-radius: 3px 3px 3px 3px;
    z-index: 9999;
margin:0px;
background-color: #ffffff;
}

.ps-photo img.user_photo {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}




+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ site_skins > def > XXXXX
++ Now, in each skin file that loads a users image we need to add a extra bit of code to the <img> tag
++ to stop browsers loading the old cached image
++ {tplvars.refresh_image}
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

In each of the files listed below you need to locate where images are loaded (i have given estimated line ref based on the default skin)

Then add {tplvars.refresh_image} to the end of the src="" attribute

for example

static > result_user.html (line 2)

OLD LINE
Code: [Select]
<img class="user_photo thumb1" src="{tplvars.photourl}/t1/{profile._photo}" onerror="this.src='media/pics/no_photo.gif';" />
NEW LINE
Code: [Select]
<img class="user_photo thumb1" src="{tplvars.photourl}/t1/{profile._photo}{tplvars.refresh_image}" onerror="this.src='media/pics/no_photo.gif';" />
now continue... NOTE!! In each file the img element varies so don't just copy and paste the one above as thats for the result_user.html file only.

widgets > blogs > display.html (line 4)
widgets > photos > display.html (line 4)

blog_post_view.html (line 13)
blog_post_view_left.html (line 27)
blog_search.html (line 4)
blog_view_left.html (line 26)
home.html (line 1)
message_read.html (line 11)
my_comments.html (line 5)
my_photos.html (line 6)
my_profile.html (line 2)
photo_search.html (line 9)
photo_search_left.html (line 7)
photo_view.html (line 22 / 29)
photo_view_left.html (line 6)
profile.html (line 2)
profile_comments.html (line 2 / 10)


And that should be it for the front-end. You may need to clear your browser/cache afterwards.


Now for the admin side of things

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ admin > processors > photo_edit.php
++ add code to rotate image if needed
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Around line 62 just before $topass['message']['type']=MESSAGE_INFO; add

Code: [Select]


$rotate_value=sanitize_and_format_gpc($_POST,'rotation',TYPE_INT,0,0);
if(!empty($rotate_value) && in_array($rotate_value,array(90,180,270,360))){

$query="SELECT `photo` FROM `{$dbtable_prefix}user_photos` WHERE `photo_id`=".$input['photo_id'];
if (!($res=@mysql_query($query))) {trigger_error(mysql_error(),E_USER_ERROR);}
$orig_photo=mysql_result($res,0,0);

if(!empty($orig_photo)){

$rotate_value = 360-(int)$rotate_value;

if(!empty($rotate_value)){
require_once _BASEPATH_.'/includes/img_functions.inc.php';

// Original Photo
$photo_path = _PHOTOPATH_.'/'.$orig_photo;
$rotated_image=rotate_image($photo_path,$rotate_value,$orig_photo,$photo_path);
// T1 Thumb Photo
if($rotated_image){
$photo_path = _PHOTOPATH_.'/t1/'.$orig_photo;
$rotated_image=rotate_image($photo_path,$rotate_value,$orig_photo,$photo_path);
}
if($rotated_image){
// T2 Thumb Photo
$photo_path = _PHOTOPATH_.'/t2/'.$orig_photo;
$rotated_image=rotate_image($photo_path,$rotate_value,$orig_photo,$photo_path);
}

$_SESSION[_LICENSE_KEY_]['site']['refresh_image_force'] = 'Y';
}
}
}





++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ admin > skin > photo_edit.html
++ add js, hidden field and button
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

At the top of the file add

Code: [Select]

<script type="text/javascript" src="{tplvars.baseurl}/js/jQueryRotate.js"></script>
<script type="text/javascript">
function rotateimg(imgID){

var value = document.getElementById("rotation").value;
if(value ==''){
value = 0;
}

var newVal = parseInt(value,10) + parseInt(90,10);

$("#img"+imgID).rotate({ animateTo:newVal});

if(newVal == '360'){
newVal = 0;
}

document.getElementById("rotation").value = newVal;
}
</script>



Then find

Code: [Select]
<img class="user_photo" src="{tplvars.photourl}/t2/{output.photo}" />

and replace it with:

Code: [Select]
<div class="ps-photo">
<span>
<a href="javascript:" class="content-link rotate-btn" onclick="rotateimg({output.photo_id})">Rotate</a>
<img class="user_photo" id="img{output.photo_id}" src="{tplvars.photourl}/t2/{output.photo}{tplvars.refresh_image}" />
</span>
</div>

<input type="hidden" class="rotation" name="rotation" id="rotation" value="" />




++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ admin > skin > styles > photo_edit.css
++ add new styles
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Code: [Select]
.ps-photo{
    text-align: center;
    margin: 20px 0px 40px 0px;
}

.ps-photo span{
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: 2px solid #eee;
    border-radius: 3px 3px 3px 3px;
}

.ps-photo a.rotate-btn{
position: absolute;
    top: 2px;
    right: 2px;
    display: inline-block;
    padding: 5px 5px;
    border: 1px solid;
    border-radius: 3px 3px 3px 3px;
    z-index: 9999;
margin:0px;
background-color: #ffffff;
}

.ps-photo img.user_photo {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}




+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ admin > skin > XXXXX
++ Now, in each skin file that loads a users image we need to add a extra bit of code to the <img> tag
++ to stop browsers loading the old cached image
++ {tplvars.refresh_image}
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

In each of the files listed below you need to locate where images are loaded (i have given estimated line ref based on the default skin)

Then add {tplvars.refresh_image} to the end of the src="" attribute

for example

blog_post_view.html (line 23)

OLD LINE
Code: [Select]
<img class="user_photo thumb0" src="{tplvars.photourl}/t1/{loop.photo}" alt="{loop.user}" />
NEW LINE
Code: [Select]
<img class="user_photo thumb0" src="{tplvars.photourl}/t1/{loop.photo}{tplvars.refresh_image}" alt="{loop.user}" />
now continue... NOTE!! In each file the img element varies so don't just copy and paste the one above as thats for the result_user.html file only.


member_results.html (line 32)
photo_results.html (line 5)
profile.html (line 50)
reject.html (line 19)



And that should be it. You may need to refresh/clear your browser cache once done.