Front end buttons to rotate media 90° anti/clockwise, ajax func. WordPress
Hello,
I need help with an ajax php function/jquery script which rotates media items from the front end.
If a callball can be added to the script that would be great.
So these are my buttons on the front end...
<a href="#" data-media="234" class="rotate left"><i class="fa fa-right"></i> Rotate Right</a>
<a href="#" data-media="234" class="rotate right"><i class="fa fa-left"></i> Rotate Left</a>
<strong>data-media</strong> attribute value is my media item id number.
If there is a callback to say when the process complete that would be great.
Answer that I use will get the full prize. I will add more to the prize fund if anyone can help.
<hr/>
The reason why I need this is because wordpress is not recognising the correct orientation of the photos being uploaded. Even on both PC windows and Mac finder, my photos are appearing all at the correct orientation, but wordpress is dissmissing this and they are all being uploaded as landscape. If there is another way to running a bulk script in the media library or something then suggestions welcome please.
Thanks for your support.
Josh
Answers (2)
Romel Apuya answers:
Hi,
Perhaps this Article is Same with your Problem [[LINK href="http://www.neilyoungcv.com/blog/code-share/image-resizing-with-php-exif-orientation-fix/"]]EXIF[[/LINK]]
Josh Cranwell comments:
Thanks Romel but I think I still need a front end function for manual adjustment.
Romel Apuya comments:
Ok,
What plugin or script are you using on the front end uplad??
Romel Apuya comments:
try this
if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type(234), 'methods' => array( 'rotate' ) ) ) ) { ?>
<a href="#" data-media="234" onclick="imageEdit.rotate( 90, <?php echo "234, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?> class="imgedit-rleft rotate left"><i class="fa fa-right"></i> Rotate Right</a>
<a href="#" data-media="234" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?> class="imgedit-rright rotate right"><i class="fa fa-left"></i> Rotate Left</a>
<?php } else {
$note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
?>
Romel Apuya comments:
this rather
if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type(234), 'methods' => array( 'rotate' ) ) ) ) { ?>
<a href="#" data-media="234" onclick="imageEdit.rotate( 90, <?php echo "234, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>" class="imgedit-rleft rotate left"><i class="fa fa-right"></i> Rotate Right</a>
<a href="#" data-media="234" onclick="imageEdit.rotate(-90, <?php echo "234, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>" class="imgedit-rright rotate right"><i class="fa fa-left"></i> Rotate Left</a>
<?php } else {
$note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
?>
Josh Cranwell comments:
Thanks Romel we are looking into this, looks promising
Though the function <strong>imageEdit</strong> how is this loaded in the front end? Or how does the onClick know where to find it?
Romel Apuya comments:
i dont know what are the conditions in the front end script you have but you need to include in enque the image-edit.js
add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_image_edit' );
function enqueue_and_register_my_image_edit(){
wp_enqueue_script( 'image-edit', '/wp-includes/js/image-edit.js', array( 'jquery', 'image-edit' ) );
}
Romel Apuya comments:
Hi,
heres an updated code
<?php if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type(234), 'methods' => array( 'rotate' ) ) ) ) {
$nonce = wp_create_nonce("image_editor-234");?>
<a href="#" onclick="imageEdit.rotate( 90, <?php echo "234, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>" class="imgedit-rleft rotate left"><i class="fa fa-right"></i> Rotate Right</a>
<a href="#" onclick="imageEdit.rotate(-90, <?php echo "234, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>" class="imgedit-rright rotate right"><i class="fa fa-left"></i> Rotate Left</a>
<?php } else {
$note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
} ?>
Romel Apuya comments:
add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_image_edit' );
function enqueue_and_register_my_image_edit(){
wp_enqueue_script( 'image-edit', ABSPATH.'/wp-admin/js/image-edit.js', array( 'jquery', 'image-edit' ) );
}
Jeremy answers:
Are you looking for a way to change the orientation of the media images as they are stored or more simply to allow the end user to re-orient them when viewing a page?
The latter can be accomplished by something like this (needs to be adopted for WP):
http://jsfiddle.net/whgg0ofc/
Josh Cranwell comments:
This is great, but we need the media item to be edited physically rather that visual only. Thanks tho Jeremy.