0

I've seen lots of questions and answers around how to do this but I am very stuck how I implement this into my webpage. I have a div named "banner" that contains an image drawn from a custom field that is on all my artist pages as a banner for each page. I would like to be able to drag this image inside the div and to save it's position. (I only want this function for myself, not visitors to the website) AKA Facebook page cover image.. This would allow me to add an image that is bigger than the div container to my custom field and for me to edit how this is showing inside the div.

This demonstates what I want to do- http://w3lessons.info/2014/08/31/facebook-style-cover-image-reposition-using-jquery-php/ but i don't understand where i put these codes in my wordpress files and how to make this work for me.. I only want this on my artist pages, and therefore using my single-artists.php template..

Here is my php code-

<?php
// artist download start
//  if ( isset($_GET['download']) ) {
//      header('Content-type: application/mp3');
//      header('Content-Disposition: attachment; filename='.basename($_GET['download']));
//      readfile( $_GET['download'] );
//  }
// artist download end

get_header(); 
global $cs_transwitch,$prettyphoto_flag;
$prettyphoto_flag = "true";
    $cs_artist = get_post_meta($post->ID, "cs_artist", true);
    if ( $cs_artist <> "" ) {
        $xmlObject = new SimpleXMLElement($cs_artist);
            $cs_layout = $xmlObject->cs_layout;
            $cs_sidebar_left = $xmlObject->cs_sidebar_left;
            $cs_sidebar_right = $xmlObject->cs_sidebar_right;
    }
        if ( $cs_layout == "left" ) {
            $cs_layout = "two-thirds column right";
            $show_sidebar = $cs_sidebar_left;
        }
        else if ( $cs_layout == "right" ) {
            $cs_layout = "two-thirds column left";
            $show_sidebar = $cs_sidebar_right;
        }
        else $cs_layout = "sixteen columns left";
?>
<div id="banner">
<div id="bannercontent"><?php
list($src, $w, $h) = get_custom_field('banner:to_image_array');
?>
<img src="<?php print $src; ?>" width="100%" />
</div></div>
<script>$( "#bannercontent" ).draggable({
stop: function(){
    alert('top offset: ' + $('#bannercontent').offset().top + ' left offset: ' + $('#bannercontent').offset().left);
}
});</script>
<div class="clear:both;"></div>
        <div id="container" class="container row">
            <div role="main" class="<?php echo $cs_layout;?>" >
                <?php
                    /* Run the loop to output the post.
                     * If you want to overload this in a child theme then include a file
                     * called loop-single.php and that will be used instead.
                     */
                    //get_template_part( 'loop', 'single_cs_artist' );
                ?>
                        <?php if ( have_posts() ): while ( have_posts() ) : the_post(); ?>
                        <?php
                            //showing meta start
                            $cs_artist = get_post_meta($post->ID, "cs_artist", true);
                            if ( $cs_artist <> "" ) {
                                $xmlObject = new SimpleXMLElement($cs_artist);
                                    $cs_layout = $xmlObject->cs_layout;
                                    $cs_sidebar_left = $xmlObject->cs_sidebar_left;
                                    $cs_sidebar_right = $xmlObject->cs_sidebar_right;
                                    $artist_release_date = $xmlObject->artist_release_date;
                                    $artist_social_share = $xmlObject->artist_social_share;
                                    $artist_buy_amazon = $xmlObject->artist_buy_amazon;
                                    $artist_buy_apple = $xmlObject->artist_buy_apple;
                                    $artist_buy_groov = $xmlObject->artist_buy_groov;
                                    $artist_buy_cloud = $xmlObject->artist_buy_cloud;
                            }
                            //showing meta end
                        ?>
                            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                <h1 class="heading"><?php the_title(); ?></h1>
                                <div class="in-sec">
                                    <?php
                                    // getting featured image start
                                        $image_id = get_post_thumbnail_id ( $post->ID );
                                        if ( $image_id <> "" ) {
                                            //$image_url = wp_get_attachment_image_src($image_id, array(208,208),true);
                                            $image_url = cs_attachment_image_src($image_id, 208, 208);
                                                $image_url = $image_url;
                                            //$image_url_full = wp_get_attachment_image_src($image_id, 'full',true);
                                            $image_url_full = cs_attachment_image_src($image_id, 0, 0);
                                                $image_url_full = $image_url_full;
                                        }
                                        else {
                                            $image_url = get_template_directory_uri()."/images/admin/no_image.jpg";
                                            $image_url_full = get_template_directory_uri()."/images/admin/no_image.jpg";
                                        }
                                            //$image_id = get_post_thumbnail_id ( $post->ID );
                                            //$image_url = wp_get_attachment_image_src($image_id, array(208,198),true);
                                            //$image_url_full = wp_get_attachment_image_src($image_id, 'full',true);
                                    // getting featured image end
                                    ?>
                                        <div class="light-box artist-tracks artist-detail <?php if($image_id == "") echo "no-img-found";?> ">
<div id="main-container">
<div id="leftcolumn">
                                            <a rel="prettyPhoto" name="<?php the_title(); ?>" href="<?php echo $image_url_full?>" class="thumb" >

                                                <?php echo "<img src='".$image_url."' />";?>
                                            </a>
<br>
<br>
<div id="inpostgallery"><?php echo do_shortcode('[inpost_gallery thumb_width="104" thumb_height="104" post_id="' . get_the_ID() . '" thumb_margin_left="0" thumb_margin_bottom="0" thumb_border_radius="2" thumb_shadow="0 1px 4px rgba(0, 0, 0, 0.2)" js_play_delay="3000" id="" random="0" group="0" border="" type="yoxview" show_in_popup="0" artist_cover="" artist_cover_width="200" artist_cover_height="200" popup_width="800" popup_max_height="600" popup_title="Gallery"][/inpost_gallery]'); ?></div>
</div>
<div id="rightcolumn">
                                            <div class="desc">
                                                <p style="font-size:12px;"><span class="bold" style="text-transform:uppercase; color:#262626;"><?php _e('Categories', CSDOMAIN); ?> :</span> 
                                                  <?php
                                                    /* translators: used between list items, there is a space after the comma */
                                                    $before_cat = " ".__( '',CSDOMAIN );
                                                    $categories_list = get_the_term_list ( get_the_id(), 'artist-category', $before_cat, ', ', '' );
                                                    if ( $categories_list ): printf( __( '%1$s', CSDOMAIN ),$categories_list ); endif; '</p>'; 
                                                  ?>
                                                </p>
<br>
<h5><?php print_custom_field('stars:formatted_list', array('<li><img src="http://www.entertaininc.co.uk/wp-content/uploads/2015/09/gold-star-graphic-e1441218522835.png">[+value+]</li>','<ul>[+content+]</ul>') );
 ?></h5><br />
<h2><strong>Price</strong> <?php print_custom_field('price'); ?></h2> <br />
<h2><strong>Location</strong> <?php echo do_shortcode('[gmw_post_info info="city, country" divider=","]'); ?></h2><br />
                                                         <h4><?php _e('Description', CSDOMAIN); ?></h4>
                                                        <div class='txt rich_editor_text'>
                                                            <?php 
                                                                the_content();

                                                            ?>
                                                        </div>
                                                        <div class="clear"></div>
                                                        <?php edit_post_link( __( 'Edit', CSDOMAIN ), '<span class="edit-link">', '</span>' ); ?>
</div></div>
                                             </div>
                                            <div class="clear"></div>
                                        </div>
                                </div>
                                <div class="in-sec">
                                    <div class="artist-opts">
                                        <div class="share-artist">
                                        <?php 
                                            $cs_social_share = get_option("cs_social_share");                           
                                            if($cs_social_share != ''){
                                              $xmlObject_artist = new SimpleXMLElement($cs_social_share);
                                                if($artist_social_share == 'Yes'){
                                                    social_share(); 
                                                 }?>                        
                                            <?php }?>   
                                        </div>
                                        <?php if($artist_buy_amazon != '' or $artist_buy_apple != '' or $artist_buy_groov != '' or $artist_buy_cloud != ''){?>
                                        <div class="availble">
                                            <h4><?php if($cs_transwitch =='on'){ _e('Buy This',CSDOMAIN); }else{ echo __CS('buy_now', 'Buy This'); }?></h4>
                                            <?php
                                                if ( $artist_buy_amazon <> "" ) echo ' <a target="_blank" href="'.$artist_buy_amazon.'" class="amazon-ind">&nbsp;<span>';if($cs_transwitch =='on'){ _e('Amazon',CSDOMAIN); }else{ echo __CS('amazon', 'Amazon'); }  echo '</span></a> ';
                                                if ( $artist_buy_apple <> "") echo ' <a target="_blank" href="'.$artist_buy_apple.'" class="apple-ind">&nbsp;<span>'; if($cs_transwitch =='on'){ _e('Apple',CSDOMAIN); }else{ echo __CS('itunes', 'iTunes'); }  echo '</span></a> ';
                                                if ( $artist_buy_groov <> "") echo ' <a target="_blank" href="'.$artist_buy_groov.'" class="grooveshark-ind">&nbsp;<span>';  if($cs_transwitch =='on'){ _e('GrooveShark',CSDOMAIN); }else{ echo __CS('grooveshark', 'GrooveShark'); }  echo '</span></a> ';
                                                if ( $artist_buy_cloud <> "") echo ' <a target="_blank" href="'.$artist_buy_cloud.'" class="soundcloud-ind">&nbsp;<span>'; if($cs_transwitch =='on'){ _e('SoundCloud',CSDOMAIN); }else{ echo __CS('soundcloud', 'SoundCloud '); } echo '</span></a> ';
                                            ?>
                                        </div>
                                        <?php }?>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                                <?php  
                                foreach ( $xmlObject as $track ){
                                    if ( $track->getName() == "track" ) {
                                ?>
                                <div class="in-sec">
                                    <?php 
                                    enqueue_alubmtrack_format_resources();
                                    ?>
                                        <div class="artist-tracks light-box">
                                        <?php 
                                            $counter = 0;
                                            foreach ( $xmlObject as $track ){
                                                $counter++;
                                                if ( $track->getName() == "track" ) {
                                                    echo "<div class='track'>";
                                                    echo "<h5>";
                                                    echo $artist_track_title = $track->artist_track_title;
                                                    echo "</h5>";
                                                    echo "<ul>";
                                                        if ($track->artist_track_playable == "Yes") {
                                                            echo '
                                                                <li>
                                                                    <div class="cp-container cp_container_'.$counter.'">
                                                                        <ul class="cp-controls">
                                                                            <li><a style="display: block;" href="#" class="cp-play" tabindex="1">&nbsp;<span>'; if($cs_transwitch =='on'){ _e('Play',CSDOMAIN); }else{ echo __CS('play', 'Play'); } echo '</span></a></li>
                                                                            <li><a href="#" class="cp-pause" style="display: none;" tabindex="1">&nbsp;<span>'; if($cs_transwitch =='on'){ _e('Pause',CSDOMAIN); }else{ echo __CS('pause', 'Pause'); } echo '</span></a></li>
                                                                        </ul>
                                                                    </div>
                                                                    <div style="width: 0px; height: 0px;" class="cp-jplayer jquery_jplayer_'.$counter.'">
                                                                        <img style="width: 0px; height: 0px; display: none;" id="jp_poster_0">
                                                                        <audio src="'.$track->artist_track_mp3_url.'" preload="metadata" ></audio>
                                                                    </div>
                                                                    <script>
                                                                        jQuery(document).ready(function($){
                                                                            var myCirclePlayer = new CirclePlayer(".jquery_jplayer_'.$counter.'",
                                                                                {
                                                                                    mp3: "'.$track->artist_track_mp3_url.'"
                                                                                }, {
                                                                                    cssSelectorAncestor: ".cp_container_'.$counter.'",
                                                                                    swfPath: "'.get_template_directory_uri().'/scripts/frontend/Jplayer.swf",
                                                                                    wmode: "window",
                                                                                    supplied: "mp3"
                                                                                });
                                                                        });
                                                                    </script>
                                                                </li>
                                                            ';
                                                        }
                                                        if ($track->artist_track_downloadable == "Yes"){ echo '<li><a href="'.$track->artist_track_mp3_url.'" class="download">&nbsp;<span>'; if($cs_transwitch =='on'){ _e('Download',CSDOMAIN); }else{ echo __CS('download', 'Download'); } echo '</span></a></li>'; }
                                                        if ($track->artist_track_lyrics <> "") { echo '<li><a href="#lyrics'.$counter.'" rel="prettyPhoto[inline]" title="'.$artist_track_title.'" class="lyrics">&nbsp;<span>'; if($cs_transwitch =='on'){ _e('Lyrics',CSDOMAIN); }else{ echo __CS('lyrics', 'Lyrics'); } echo '</span></a></li>';}
                                                        if ($track->artist_track_buy_mp3 <> ""){ echo '<li><a href="'.$track->artist_track_buy_mp3.'" class="buysong">&nbsp;<span>'; if($cs_transwitch =='on'){ _e('Buy&nbsp;Song',CSDOMAIN); }else{  echo __CS('buy_now', 'Buy&nbsp;Song'); } echo '</span></a></li>';}


                                                    echo "</ul>";
                                                    echo '
                                                        <div id="lyrics'.$counter.'" style="display:none;">
                                                            '.str_replace("\n","</br>",$track->artist_track_lyrics).'
                                                        </div>
                                                    ';
                                                    echo "</div>";
                                                }
                                            }
                                        ?>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                                <?php
                                    }
                                } 
                                ?>  
                                <div class="clear"></div>
                                <?php if ( get_the_author_meta( 'description' ) ) :?>
                                <div class="in-sec" style="margin-top:20px;">
                                    <div class="about-author">
                                        <div class="avatars">
                                            <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'PixFill_author_bio_avatar_size', 53 ) ); ?>
                                        </div>
                                        <div class="desc">
                                            <h5><a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php _e('About', CSDOMAIN); ?> <?php echo get_the_author(); ?></a></h5>
                                            <p class="txt">
                                                <?php the_author_meta( 'description' ); ?>
                                            </p>
                                            <div class="clear"></div>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                                <?php endif; ?>
                            </div>
                        <?php endwhile; endif; // end of the loop. ?>
                        <?php comments_template( '', true ); ?>

            </div>
            <?php if( $cs_layout != "sixteen columns left" and isset($show_sidebar) ) { ?>
            <!--Sidebar Start-->
                <div class="one-third column left">
                    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar($show_sidebar) ) : ?>
                    <?php endif; ?>   
                </div>            
            <!--Sidebar Ends-->  
            <?php }?>
            <div class="clear"></div><!-- #content -->
        </div><!-- #container -->
        <div class="clear"></div>
<?php get_footer(); ?>

2 Answers 2

0

You need to use jQuery UI library (draggable) - https://jqueryui.com/draggable/ And then read the offset of the div or so

13
  • thanks for the quick comment @manchary I have read this webpage for the jquery but as someone who's new to this I don't really understand what code i need to add and where in my files..
    – Lizzy
    Sep 11, 2015 at 18:00
  • Which version of wordpress are you using? It can have Jquery UI already included, check out your loaded scripts, or try this code $('#myDiv').draggable() in the console of the elements inspector. If it's not included you will have to include it using wp_register_scripts or hardcoding it to the header(not recommended) Sep 11, 2015 at 18:07
  • 4.2.4 Yes it does I think.. includes there are loads of jquery files including draggable.min.js. But how do I add this function to my banner in my php template.. Sorry I've never used a jquery function before without copying existing code.. As i mentioned above this link shows a tutorial that does exactly what i want to do.. w3lessons.info/2014/08/31/… but it doesn't mention where you paste the codes.. as in which files you paste it in.. very confused
    – Lizzy
    Sep 11, 2015 at 18:17
  • the all jquery part is going to your template file or your main.js file (if you have it). And there is the php part with some crop and resize class included, idk about that, you can resize it all from the front-end and than just save the edits using php Sep 11, 2015 at 18:19
  • thanks a lot. So would I put the html in my template php file? and where would I put the Javascript? Sorry, i'm sure this is all basic stuff :s
    – Lizzy
    Sep 11, 2015 at 18:34
0

You also can use a jquery plugin named draggabilly. See the event dragMove or dragEnd. Hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.